Component | Standard Hero

styleKeysstandardHero

DevelopDesign

By default, the Standard Hero will place the text alongside the hero image. If you want to change the color underneath the text, you can use the background color feature.

If there are multiple calls to action, you can add multiple buttons, but they should use the "mini" height.

For responsiveness, you can replace the Fluid Image inside StandardHeroImage with a <picture> tag. The fallback image inside the <picture> should then be a Fluid Image.

Most of our heroes use a single background image that covers the entire hero (rather than the "side-by-side" look we used to use, and which is now deprecated.)

Use the "full width image" option for heroes that use a single full image with text overlaid, rather than the side-by-side look.

The box that holds the the text defaults to a left-hand alignment.

A default (side-by-side) hero can use text alignment to swap the text box and the image, so that the image is on the left and the text is on the right.
A "full width image" hero uses the same properly to make the text box align to the right, or be centered.

<StandardHero fullWidthImage textAlign="center" />
<div
  class="standard-hero standard-hero-full-width-image standard-hero-text-center"
>
  ...
</div>

For a "full width image" hero, the box that holds the the text also defaults to being vertically centered. You can adjust this so that the box sits aligned to the top or bottom.

<StandardHero fullWidthImage textVerticalAlign="bottom" />
<div
  class="
    standard-hero standard-hero-full-width-image standard-hero-text-align-bottom
  "
>
  ...
</div>

You can set the background of the text box to be transparent.

<StandardHero fullWidthImage textBackground="transparent" />
<div
  class="
    standard-hero
    standard-hero-full-width-image
    standard-hero-text-transparent-background
  "
></div>

Or you can use a skin to change the background color of the text box. The "holiday" skin will set the box (and the text within it) to use holiday colors:

<StandardHero fullWidthImage skin="holiday" />
<div
  class="
    standard-hero standard-hero-full-width-image standard-hero-skin-holiday
  "
>
  ...
</div>

The "hide image on mobile" option will hide the hero image on mobile (Extra-Small and Small) screens.

By default, on mobile, the Hero will display in a column, first the text and then the image. The "image behind text on mobile" option will cause a "full-width" Hero to instead keep the image behind the text.

The "short" option will make the hero shorter than normal, reducing the spacing around the text box, so that more content fits into less vertical space.

<StandardHero fullWidthImage height="short" />
<div class="standard-hero standard-hero-full-width-image standard-hero-short">
  ...
</div>

This combination places a Left Hand Navigation component over part of the hero, spilling over into the area below the hero. The content below the hero is then shifted over to accommodate the left-hand navigation.

This combination is designed to work only with the hero text just to the right of the left nav, and with that text left-aligned. The hero can use either the "full width image" option (with the text overlaid on top of the image) or the default "side-by-side", with the text adjacent to the image.

Note also that the left-hand navigation will be hidden on Extra-Small screens.

You can use a <video> instead of an image inside a Standard Hero., by placing the video tag inside the StandardHeroImage container where the image tag would normally go.

Note that this applies only to videos that act like animating backgrounds, not for videos where the user would want to play/pause the video. You will need to set the <video> tag to play inline and autoplay; you will likely also want to make it loop. In React, this is <video loop playsInline autoPlay>.

If you don't use the "full width image" option, you get a version with two images instead of one, where one image goes behind the text; the text has a dark translucent layer under it that will go over that image. This version adds a "hero text background image" sub-component to hold that image, which goes inside the hero text container.

Also, this style of hero allowed up to two optional "highlight" sub-components. These are also no longer part of our current designs.

StandardHero

Prop	Type	Default	Description
fullWidthImage	boolean		Whether or not the image should take up the full width
narrow	boolean		[DEPRECATED; use a Standard Banner instead] Adjust the hero's layout and typography to better fit a narrow width
skin	"holiday" \| "standard" \| "inverse"	standard	The visual style of the StandardHero. ["inverse" is DEPRECATED]
staggered	boolean		Whether or not the image and text should be staggered
textAlign	"left" \| "center" \| "right" \| "transparent-background"	left	The horizontal alignment of the text In the basic StandardHero (non-fullWidthImage), setting the value "right" will move the image to the left and the text to the right. (Note: "transparent-background" is deprecated; use the "textBackground" prop instead.)
textBackground	"standard" \| "transparent"	standard	The background of the text
textVerticalAlign	"center" \| "top" \| "bottom"	center	The vertical alignment of the text
withNav	boolean		Adjust the hero's layout to fit a left hand navigation menu
hideImageOnMobile	boolean	false	Hide the hero image on mobile
imageBehindTextOnMobile	boolean	false	Show the hero image behind the text on mobile

All other props are forwarded to the element specified in thecomponentprop(default: <component/>)