/

<Hero> Component

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

Share
Code Editor
<Hero

  data={{

    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',

      }],

    }]

  }}

/>

Where it's used

Latest:9.0.0
Search with

Releases

Latest:9.0.0
registry.npmjs.org
[object Object]
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...
8.x.x
Loading 8.x.x releases...
9.x.x
Loading 9.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.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. 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].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
videoControlsTop
boolean
If true, video controls will be shown above videos, rather than below.
className
string
Optional className to add to the root element.
gaPrefix
string
prefix override for CTA custom events