<NextSteps> Component

Share
Code Editor
<>
<NextSteps
heading="Next steps"
description="Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer."
ctas={[
{
title: 'Action link',
url: '/'
},
{
title: 'Action link',
url: '/'
}
]}
steps={[
{
heading: 'Heading',
description: 'Sub-heading',
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.

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.
ctas
object
Optional ctas displayed below the heading and description.
Object contains nested props, see below:
ctas.title
string
The title of the cta.
ctas.url
string
The url 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.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.