<FeaturedSlider> Component

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

Share
Code Editor
<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

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

NameDescription
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"

Examples

"Dark Theme"

Use Cases

Deluxe
SeatGeek
Deluxe Case Study

Deluxe

Disrupt the traditional media supply chain with a digital platform powered by Nomad, Consul and Vault.

Learn More
[object Object]
Seat Geek Case Study

SeatGeek

A team of 5 engineers built a infrastructure platform with Nomad, Consul, and Vault to provide tickets to millions of customers.

Learn More
[object Object]