Case study

Display a case study of a customer in order to convey trust in Funding Circle through businesses' positive experiences.

Description

This component should include a large background image and some content in a box. The content box can include any other component. Typically, it may include a quote from a customer or information about their experiences with Funding Circle. To specifiy the background image and the colour of the background and content box, you must use the case-study-customisation mixin.

Modifiers

There are 6 modifiers, but you must only use 3 at a time. You must choose one each for the X-axis, Y-axis, and sizing.

X-axis

case-study--left - make the content box sit on the left case-study--right - make the content box sit on the right

Y-axis

case-study--middle - make the content box sit in the middle vertically case-study--bottom - make the content box sit slightly below the image

Sizing

case-study--small - makes the component work in half width containers case-study--large - makes the component work in full width containers

The parameters for case-study-customisation are:
1) Path to the folder containing background images or empty string if you don't want to pass an image through this mixin (images within the folder should be named l.jpg and s.jpg)
2) Background color of the content block
3) Background color of the overflow (should be the same color as the content below it). Only required for --bottom variants.


Note

If you're coming here because you recently upgraded to Radius 8.x.x and the case study in your project is now broken please look at the new markup for the case study component. In prior versions of Radius the background image was added to a :before pseudo element. In the 8.0.0 release the Case Study no longer adds the background image to a pseudo element, but requires you add a div with `.case-study__image" as the first child of the case-study component.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-case-study;

Sass Usage

@include radius-component-case-study;
.case-study {
   @include case-study-customisation("img/case-study", #3D5A99, #FAEBD7);
}

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example









Code example

<section class="case-study case-study--small case-study--bottom case-study--left case-study--docs">
  <div class="case-study__image"></div>
  <div class="case-study__inner">
    <div class="case-study__content">
      <div class="placeholder-component"></div>
    </div>
  </div>
</section>

<br><br>

<section class="case-study case-study--large case-study--middle case-study--left case-study--docs">
  <div class="case-study__image"></div>
  <div class="case-study__inner">
    <div class="case-study__content">
      <div class="placeholder-component"></div>
    </div>
  </div>
</section>

<br><br>

<section class="case-study case-study--large case-study--bottom case-study--left case-study--docs">
  <div class="case-study__image"></div>
  <div class="case-study__inner">
    <div class="case-study__content">
      <div class="placeholder-component"></div>
    </div>
  </div>
</section>

<br><br>

<section class="case-study case-study--small case-study--middle case-study--left case-study--docs">
  <div class="case-study__image"></div>
  <div class="case-study__inner">
    <div class="case-study__content">
      <div class="placeholder-component"></div>
    </div>
  </div>
</section>

<br><br>

<section class="case-study case-study--small case-study--bottom case-study--left case-study--docs">
  <div class="case-study__image"></div>
  <div class="case-study__inner">
    <div class="case-study__content">
      <div class="placeholder-component"></div>
    </div>
  </div>
</section>