`<FeaturedSlider>` Component

A component used to display several featured items, rotating through them on a timer.

<FeaturedSlider
    heading="Use Cases"
    theme="light"
    features={[
      {
        logo: {
          url:
            'https://www.datocms-assets.com/2885/1582323254-deluxe-logo.svg',
          alt: 'Deluxe'
        },
        image: {
          url:
            'https://www.nomadproject.io/_next/static/images/deluxe-4e1ac6e68d5d4f30f3c3ed20cf03f308.png?fit=crop&fm=webp&h=843.75&q=80&w=1500',
          alt: 'Deluxe Case Study'
        },
        heading: 'Deluxe',
        content:
          'Disrupt the traditional media supply chain with a digital platform powered by Nomad, Consul and Vault.',
        link: {
          text: 'Learn More',
          url:
            'https://www.hashicorp.com/resources/deluxe-hashistack-video-production',
          type: 'outbound'
        }
      },
      {
        logo: {
          url:
            'https://www.datocms-assets.com/2885/1588007630-seatgeekblack.svg',
          alt: 'SeatGeek'
        },
        image: {
          url:
            'https://www.nomadproject.io/_next/static/images/seatgeek-d3f29290e414b2935a5a047e09321596.png?fit=crop&fm=webp&h=843.75&q=80&w=1500',
          alt: 'Seat Geek Case Study'
        },
        heading: 'SeatGeek',
        content:
          'A team of 5 engineers built a infrastructure platform with Nomad, Consul, and Vault to provide tickets to millions of customers.',
        link: {
          text: 'Learn More',
          url:
            'https://www.hashicorp.com/resources/seatgeek-and-the-hashistack-a-tooling-and-automation-love-story',
          type: 'outbound'
        }
      }
    ]}
  />

<FeaturedSlider
    heading="Use Cases"
    theme="light"
    features={[
      {
        logo: {
          url:
            'https://www.datocms-assets.com/2885/1582323254-deluxe-logo.svg',
          alt: 'Deluxe'
        },
        image: {
          url:
            'https://www.nomadproject.io/_next/static/images/deluxe-4e1ac6e68d5d4f30f3c3ed20cf03f308.png?fit=crop&fm=webp&h=843.75&q=80&w=1500',
          alt: 'Deluxe Case Study'
        },
        heading: 'Deluxe',
        content:
          'Disrupt the traditional media supply chain with a digital platform powered by Nomad, Consul and Vault.',
        link: {
          text: 'Learn More',
          url:
            'https://www.hashicorp.com/resources/deluxe-hashistack-video-production',
          type: 'outbound'
        }
      },
      {
        logo: {
          url:
            'https://www.datocms-assets.com/2885/1588007630-seatgeekblack.svg',
          alt: 'SeatGeek'
        },
        image: {
          url:
            'https://www.nomadproject.io/_next/static/images/seatgeek-d3f29290e414b2935a5a047e09321596.png?fit=crop&fm=webp&h=843.75&q=80&w=1500',
          alt: 'Seat Geek Case Study'
        },
        heading: 'SeatGeek',
        content:
          'A team of 5 engineers built a infrastructure platform with Nomad, Consul, and Vault to provide tickets to millions of customers.',
        link: {
          text: 'Learn More',
          url:
            'https://www.hashicorp.com/resources/seatgeek-and-the-hashistack-a-tooling-and-automation-love-story',
          type: 'outbound'
        }
      }
    ]}
  />

Where it's used

Latest:5.0.1

Search with

Releases

Latest:5.0.1

registry.npmjs.org

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...

Props

Name	Description
`heading` string	text displayed in the primary heading
`className` string	Optional className to add to the root element
`theme` string	used to control whether the component appears on a light or dark background Options: `"light"`, `"dark"`
`features` array	The actual "features" rendered by the component Array members must be of the type below:
`features[x]` object	Object contains nested props, see below:
`features[x].heading` string	title of the feature
`features[x].content` string	text content of the feature, html accepted
`features[x].logo` object	company logo Object contains nested props, see below:
`features[x].logo.url` string	url of the image
`features[x].logo.alt` string	alt text for the image
`features[x].logo.format` string	format of the image, like "jpg" or "svg"
`features[x].image` object	featured image Object contains nested props, see below:
`features[x].image.url` string	url of the image
`features[x].image.alt` string	alt text for the image
`features[x].image.format` string	format of the image, like "jpg" or "svg"
`features[x].link` object	controls a link to a resource with further details Object contains nested props, see below:
`features[x].link.text` string	link text
`features[x].link.url` string	link url
`features[x].link.type` string	link type Options: `"internal"`, `"external"`, `"anchor"`