<Hero> ComponentA flexible hero component used as the primary content at the top of many HashiCorp pages.
| Name | Description |
|---|---|
dataobject | All of the data for the hero Object contains nested props, see below: |
data.titlestring | Primary title text |
data.descriptionstring | Subheading text, HTML allowed |
data.centeredboolean | Whether or not to center the contents |
data.productstring | Color theme of links, buttons, highlights |
data.backgroundThemestring | Adjust the text color if its over a dark or light background image |
data.backgroundImageobject | sets the background image of the hero Object contains nested props, see below: |
data.backgroundImage.urlstring | url of the image |
data.backgroundImage.altstring | alt text for the image |
data.backgroundImage.formatstring | format of the image, like "jpg" or "svg" |
data.smallTextTagstring | A small section of text that appears on top of the primary headline if present |
data.titleLogoobject | A small logo intended to appear above the primary headline Object contains nested props, see below: |
data.titleLogo.urlstring | url of the image |
data.titleLogo.altstring | alt text for the image |
data.titleLogo.formatstring | format of the image, like "jpg" or "svg" |
data.alertobject | An Alert component, displays above the primary headline.Object contains nested props, see below: |
data.alert.urlstring | |
data.alert.tagColorstring | |
data.alert.textstring | |
data.formLeadInputobject | A single-field form intended to capture emails, appears below the headline, description, and buttons Object contains nested props, see below: |
data.formLeadInput.destinationUrlstring | |
data.formLeadInput.buttonTextstring | |
data.buttonsarray | 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].titlestring | |
data.buttons[x].urlstring | |
data.buttons[x].externalboolean | |
data.buttons[x].themestring | |
data.helpTextstring | A small piece of help text that appears below buttons/form input, HTML allowed |
data.imageobject | sets an image to the right of the text Object contains nested props, see below: |
data.image.urlstring | url of the image |
data.image.altstring | alt text for the image |
data.image.formatstring | format of the image, like "jpg" or "svg" |
data.videosarray | 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].namestring | name of the video displayed in the UI |
data.videos[x].playbackRatenumber | integer indicating the playback rate, with 1 being the default |
data.videos[x].srcarray | 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 | |
centeredboolean | Whether or not to center the hero content |
classNamestring | Optional className to add to the root element. |
gaPrefixstring | prefix override for CTA custom events |