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.
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.
API
| Parameter | Default | Description |
|---|---|---|
|
image
|
false | Background image |
|
imageFocus
|
[] | Where to focus in the background. |
|
video
|
false | Display a video as a background. This option will replace image. |
|
size
|
normal | Ratio (normal, large) |
|
title
|
The title text | |
|
byline
|
The byline text | |
|
paragraph
|
The body text. | |
|
stretch
|
false | Always stretch the hero vertically. Makes the hero the width of the viewport. Requires a centered container. |
|
animation
|
false | Name of the animation |
|
ariaLabel
|
Hero | Label provided for accessibility tools such as screen readers |
|
heroView
|
default | Select which view to display |
|
customHeroData
|
false | An array containing the custom data for the selected view (heroView). |
|
meta
|
false | The meta text |
|
background
|
false | Image or a color |
|
textColor
|
The color of the text. | |
|
textAlignment
|
left | Alignment texts. Supports "left", "center" and "right". |
|
contentBackgroundColor
|
The background color for texts in the content area. | |
|
contentAlignmentVertical
|
bottom | Vertical placement of the content: top|center|bottom. |
|
contentAlignmentHorizontal
|
left | - |
|
contentApplyRoundedCorners
|
true | Apply rounded corners to content if contentBackgroundColor is set. |
|
contentApplyShadows
|
true | Apply shadows to content if contentBackgroundColor is set. |
|
buttonArgs
|
[] | Add a @button by passing @button component arguments. If button is treated as a link, all te text elements in the content gets wrapped with this link. |
|
poster
|
false | Poster image for the video |
|
overlay
|
Add an overlay over an image to make text more legible | |
|
content
|
false | Content slot to be displayed in the hero |
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 |