<NextSteps> Component

Share
Code Editor
<>
<NextSteps
heading="Next steps"
description="Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer."
cta={{
copy: "Ready to speak with our sales team?",
href: "https://www.hashicorp.com",
ctaText: "Contact us"
}}
steps={[
{
heading: 'Heading',
description: 'Sub-heading',
badge: 'Beta',
cta: {
title: 'Step link',
url: '/'
}
},
{
heading: 'Heading',
description: 'Sub-heading',
cta: {
title: 'Step link',
url: '/'
}
},
{
heading: 'Heading',
description: 'Sub-heading',
cta: {
title: 'Step link',
url: '/'
}
},
]}
/>
</>

Examples

Light theme

Next steps

Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer.

Dark theme

Next steps

Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer.

Optional Badge

Next steps

Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer.

Props

NameDescription
appearance
string
Render NextSteps on light or dark background.
Options: "light", "dark"
theme
string
Optional theme which controls the primary step color.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
heading*
string
The heading for the section.
description*
string
The description for the section.
cta
object
Optional CTA displayed below the tiles.
Object contains nested props, see below:
cta.copy
string
The description copy prior to the CTA.
cta.href
string
The url of the CTA.
cta.ctaText
string
The text of the CTA.
steps*
object
The list of steps to display as tiles.
Object contains nested props, see below:
steps.heading*
string
The heading for the step.
steps.badge
string
Optional badge. Limit to one word.
steps.description
string
The description for the step.
steps.cta*
object
Object contains nested props, see below:
steps.cta.title*
string
The title of the cta.
steps.cta.url*
string
The url of the cta.