<FeaturedSlider>
ComponentA component used to display several featured items, rotating through them on a timer.
<FeaturedSliderheading="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'}}]}/>
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 |
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 |
"Dark Theme"