Hero

hero

Hero is a component for displaying a large box or image with a title and description

hero docs

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
• Use hero-overlay inside the hero to overlay the background image with a color
• Content can contain a figure