Hero

The Hero component provides a reusable pattern for hero in the interface.

Small hero

Renders a small hero area.

Donec ullamcorper nulla non.

Aenean lacinia bibendum nulla sed consectetur, egestas eget quam.

Normal hero

Renders a normal hero area.

Donec ullamcorper nulla non metus auctor fringilla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Large hero

Renders a large hero area.

Donec ullamcorper nulla non metus auctor fringilla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Large hero (Without text)

Renders a large hero area, without text. Overlay should not be visible.

With content background color

Renders a hero with a background color for the content area.

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Content alignment

Renders a hero with a content aligned horizontal "center" and vertical "center".

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Text alignment

Renders a hero with text aligned center.

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Button

Renders a hero with a button.

Donec ullamcorper nulla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Button

Multi column hero

Renders a normal multi column area.

This is a title

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.

Hero with call to actions

Renders a normal hero area with call to actions.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Primary action Secondary action

Stretch hero

Renders a hero with stretch enabled, making it fill the full viewport height.

Donec ullamcorper nulla non metus auctor fringilla.

This is a byline

Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Responsive image contract

Renders a hero fed by a fake ImageInterface with several candidate sizes, verifying only one eager, high-priority <img> is rendered instead of one hidden image per breakpoint.

A photograph used to demonstrate responsive image loading.

Rendered from a fake responsive image contract

Inspect the element: only one should be present, with loading="eager", fetchpriority="high" and sizes="100vw".

The image is provided as an object implementing several candidate sizes instead of a plain URL, exercising the same srcset/container query data path used for real images.

API

Parameter Default Type Description
image
false mixed -
imageAttributeList
[] array -
imageFocus
[] array -
video
false mixed -
size
normal string -
title
string|boolean -
byline
string -
paragraph
string -
stretch
false boolean -
animation
false string|boolean -
ariaLabel
Hero string -
heroView
default string -
customHeroData
false mixed -
meta
false mixed -
background
false mixed -
textColor
string -
textAlignment
left string -
contentBackgroundColor
string -
contentAlignmentVertical
bottom string -
contentAlignmentHorizontal
left string -
contentApplyRoundedCorners
true boolean -
contentApplyShadows
true boolean -
buttonArgs
[] ?array -
poster
false mixed -
overlay
string -
content
false mixed -

CSS API

Variable Default Type Values Description
--c-hero--base
var(--base) range - Main unit that drives radius and spacing scales.
--c-hero--border-radius
var(--border-radius) range - Border Radius
--c-hero--color--primary
var(--color--primary) color - Primary
--c-hero--corner-shape
var(--corner-shape) select square, round, squircle, circular, bevel, scoop Corner Shape
--c-hero--font-size-100
var(--font-size-100) range - Base font size.
--c-hero--font-size-300
var(--font-size-300) range - Two steps above base in the type scale. Equivalent to h5.
--c-hero--font-size-500
var(--font-size-500) range - Four steps above base in the type scale. Equivalent to h3.
--c-hero--space
var(--space) range - Base spacing unit. Used for padding and margin inside components.
--c-hero--color--alpha
var(--color--alpha) rgba - Used for overlays. Includes opacity — set both color and alpha together.
--c-hero--shadow-color
var(--shadow-color) rgba - Shadow Color
--c-hero--shadow-amount
var(--shadow-amount) range - Multiplier for elevation shadows. 0 = none, 1 = default.
--c-hero--color--alpha-contrast
var(--color--alpha-contrast) color - Used for text and icons on alpha overlays.
--c-hero--color--primary-contrast
var(--color--primary-contrast) color - Primary Contrast

Similar components

Header Group Paper