<Hero> ComponentA flexible hero component used as the primary content at the top of many HashiCorp pages.
<Herodata={{title: 'Testing',description: 'Etiam porta sem malesuada magna mollis euismod.',product: 'nomad',backgroundImage: {url: 'https://www.datocms-assets.com/2885/1538522323-vault-grid-background.jpg',format: 'svg',alt: 'terraform background'},buttons: [{ title: 'Download', url: '#' },{ title: 'Get Started', url: '#' }],videos: [{name: 'UI',playbackRate: 2,src: [{srcType: 'mp4',url: '//consul-static-asssets.global.ssl.fastly.net/videos/v1/connect-video-ui.mp4',}],}]}}/>
| 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.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. Videos should have an aspect ratio of about 5:9. Typically dimensions are 1150 px wide by 660 px tall. 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 |
videoControlsTopboolean | If true, video controls will be shown above videos, rather than below. |
classNamestring | Optional className to add to the root element. |
gaPrefixstring | prefix override for CTA custom events |