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.

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.

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.

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.

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.

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.

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.

Stretch hero

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

Donec ullamcorper nulla non metus auctor fringilla.

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

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
false mixed -
[] array -
[] array -
false mixed -
normal string -
string|boolean -
string -
string -
false boolean -
false string|boolean -
Hero string -
default string -
false mixed -
false mixed -
false mixed -
string -
left string -
string -
bottom string -
left string -
true boolean -
true boolean -
[] ?array -
false mixed -
string -
false mixed -

CSS API

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

Similar components