<Hero> Component

A flexible hero component used as the primary content at the top of many HashiCorp pages.

Share
Code Editor

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...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...

Props

NameDescription
data
object
All of the data for the hero
Object contains nested props, see below:
data.title
string
Primary title text
data.description
string
Subheading text, HTML allowed
data.centered
boolean
Whether or not to center the contents
data.product
string
Color theme of links, buttons, highlights
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
data.backgroundTheme
string
Adjust the text color if its over a dark or light background image
Options: "dark", "light"
data.backgroundImage
object
sets the background image of the hero
Object contains nested props, see below:
data.backgroundImage.url
string
url of the image
data.backgroundImage.alt
string
alt text for the image
data.backgroundImage.format
string
format of the image, like "jpg" or "svg"
data.smallTextTag
string
A small section of text that appears on top of the primary headline if present
data.titleLogo
object
A small logo intended to appear above the primary headline
Object contains nested props, see below:
data.titleLogo.url
string
url of the image
data.titleLogo.alt
string
alt text for the image
data.titleLogo.format
string
format of the image, like "jpg" or "svg"
data.alert
object
An Alert component, displays above the primary headline.
Object contains nested props, see below:
data.alert.url
string
data.alert.tagColor
string
data.alert.text
string
data.formLeadInput
object
A single-field form intended to capture emails, appears below the headline, description, and buttons
Object contains nested props, see below:
data.formLeadInput.destinationUrl
string
data.formLeadInput.buttonText
string
data.buttons
array
Array of buttons to display below the title and subtitle as the primary calls to action. All props match those of the <Button> component.
Array members must be of the type below:
data.buttons[x]
object
Object contains nested props, see below:
data.buttons[x].title
string
data.buttons[x].url
string
data.buttons[x].external
boolean
data.buttons[x].theme
string
data.helpText
string
A small piece of help text that appears below buttons/form input, HTML allowed
data.image
object
sets an image to the right of the text
Object contains nested props, see below:
data.image.url
string
url of the image
data.image.alt
string
alt text for the image
data.image.format
string
format of the image, like "jpg" or "svg"
data.videos
array
One or more videos to play to the right of the text and buttons
Array members must be of the type below:
data.videos[x]
object
Object contains nested props, see below:
data.videos[x].name
string
name of the video displayed in the UI
data.videos[x].playbackRate
number
integer indicating the playback rate, with 1 being the default
data.videos[x].src
array
one or more video sources
Array members must be of the type below:
data.videos[x].src[x]
object
Object contains nested props, see below:
data.videos[x].src[x].srcType
data.videos[x].src[x].url
centered
boolean
Whether or not to center the hero content
gaPrefix
string
prefix override for CTA custom events