/

<CaseStudySlider> Component

A slider component that can display up to three case studies and allow a visitor to toggle between them, and click through to read.

Share
Code Editor
<CaseStudySlider 

  data={{

    caseStudies: [

      {

        company: {

          monochromeLogo: {

            url: 'https://www.datocms-assets.com/2885/1538067560-proofpoint-logo-reg-k.png',

          },

          whiteLogo: {

            url: 'https://www.datocms-assets.com/2885/1538067567-proofpoint-logo-reg-reversed.png',

          },

        },

        headline: 'Case Study 1',

        description: 'Sample Text 1',

        caseStudyResource: {

          slug: 'terraform-abstractions-safety-power',

          image: {

            url: 'https://www.datocms-assets.com/2885/1538142087-ye-endahl.jpg',

          },

        },

        buttonLabel: 'Custom Label',

      },

      {

        company: {

          monochromeLogo: {

            url: 'https://www.datocms-assets.com/2885/1524097005-adobe-black-1.svg',

          },

          whiteLogo: {

            url: 'https://www.datocms-assets.com/2885/1524097013-adobe-white-1.svg',

          },

        },

        headline: 'Case Study 2',

        description: 'Sample Text 2',

        caseStudyResource: {

          slug: 'https://www.hashicorp.com',

          image: {

            url: 'https://www.datocms-assets.com/2885/1538233406-wa-6h7-400x400.jpg',

          },

        },

      },

    ]

  }}

  timing={10}

  dark={false}

/>

Where it's used

Latest:7.0.3
Search with

Releases

Latest:7.0.3
registry.npmjs.org
[object Object]
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...

Props

NameDescription
data
object
Data for the case study slider
Object contains nested props, see below:
data.caseStudies
array
Collection of case study objects
Array members must be of the type below:
data.caseStudies[x]
object
Object contains nested props, see below:
data.caseStudies[x].company
object
object containing a company logo, typically returned directly from nextjs
Object contains nested props, see below:
data.caseStudies[x].company.monochromeLogo
object
black/gray logo
Object contains nested props, see below:
data.caseStudies[x].company.monochromeLogo.url
string
url of the image
data.caseStudies[x].company.monochromeLogo.alt
string
alt text for the image
data.caseStudies[x].company.monochromeLogo.format
string
format of the image, like "jpg" or "svg"
data.caseStudies[x].company.whiteLogo
object
white logo
Object contains nested props, see below:
data.caseStudies[x].company.whiteLogo.url
string
url of the image
data.caseStudies[x].company.whiteLogo.alt
string
alt text for the image
data.caseStudies[x].company.whiteLogo.format
string
format of the image, like "jpg" or "svg"
data.caseStudies[x].headline
string
headline text
data.caseStudies[x].description
string
body text under the deadline
data.caseStudies[x].caseStudyResource
data.caseStudies[x].caseStudyImage
object
image representing a linked case study
Object contains nested props, see below:
data.caseStudies[x].caseStudyImage.url
string
url of the image
data.caseStudies[x].caseStudyImage.alt
string
alt text for the image
data.caseStudies[x].caseStudyImage.format
string
format of the image, like "jpg" or "svg"
data.caseStudies[x].buttonLabel
string
overrides the button text
timing
integer
Slider timing in seconds
dark
boolean
Controls color of some elements - button and progress bars

Example

Share
Code Editor
<CaseStudySlider 

  data={{

    caseStudies: [

      {

        company: {

          monochromeLogo: {

            url: 'https://www.datocms-assets.com/2885/1538067560-proofpoint-logo-reg-k.png',

            alt: 'Logo dark',

            format: 'png',

          },

          whiteLogo: {

            url: 'https://www.datocms-assets.com/2885/1538067567-proofpoint-logo-reg-reversed.png',

            alt: 'Logo white',

            format: 'png',

          },

        },

        headline: 'This is the first case study',

        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut arcu justo, et convallis lectus. Sed commodo massa eget risus feugiat suscipit. ',

        caseStudyResource: {

          slug: 'https://www.hashicorp.com',

          image: {

            url: 'https://www.datocms-assets.com/2885/1538142087-ye-endahl.jpg',

            alt: 'Test image',

            format: 'jpg',

          },

        },

        buttonLabel: 'Custom Label',

      },

      {

        company: {

          monochromeLogo: {

            url: 'https://www.datocms-assets.com/2885/1524097005-adobe-black-1.svg',

            alt: 'Logo dark',

            format: 'svg',

          },

          whiteLogo: {

            url: 'https://www.datocms-assets.com/2885/1524097013-adobe-white-1.svg',

            alt: 'Logo white',

            format: 'svg',

          },

        },

        headline: 'This is the second case study',

        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut arcu justo, et convallis lectus. Sed commodo massa eget risus feugiat suscipit. Nulla velit lectus, imperdiet cursus tempor at, ',

        caseStudyResource: {

          slug: 'https://www.hashicorp.com',

          image: {

            url: 'https://www.datocms-assets.com/2885/1538233406-wa-6h7-400x400.jpg',

            alt: 'Test image',

            format: 'jpg',

          },

        },

      },

      {

        company: {

          monochromeLogo: {

            url: 'https://www.datocms-assets.com/2885/1535495419-black.png',

            alt: 'Logo dark',

            format: 'png',

          },

          whiteLogo: {

            url: 'https://www.datocms-assets.com/2885/1535495424-white.png',

            alt: 'Logo white',

            format: 'png',

          },

        },

        headline: 'This is the third case study',

        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut arcu justo, et convallis lectus. Sed commodo massa eget risus feugiat suscipit. Nulla velit lectus, ',

        caseStudyResource: {

          slug: 'https://www.hashicorp.com',

          image: {

            url: 'https://www.datocms-assets.com/2885/1535120026-36755049704aeaabe64ddk.jpg',

            alt: 'Test image',

            format: 'jpg',

          },

        },

        caseStudyImage: {

          url: 'https://www.datocms-assets.com/2885/1535120026-36755049704aeaabe64ddk.jpg',

          alt: 'Case Study image override',

          format: 'jpg',

        },

      },

    ],

  }}

  timing={10}

  dark={false}

/>