Hero

Hero

Use a hero to show a large box or image with a title and description.

Hero documentation

Class names

• component: hero
• part: hero-content, hero-overlay

Syntax

<div class="hero {MODIFIER}">{CONTENT}</div>

Rules

• {MODIFIER} is optional.
• Use hero-content for the text content.
• Put hero-overlay in the hero. It adds a color layer above the background image.
• The content can contain a figure.