A bounded hero grid for content, actions, and decoration. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
hero,hero-content,hero-actions,hero-decoration
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<section class="hero">
<div class="hero-content">
<h1>Build one coherent system</h1>
<p>Start with the surface your project needs.</p>
<div class="hero-actions"><a class="btn" href="/products">Explore products</a></div>
</div>
</section>Variants and composition
hero-content bounds the text column; hero-actions groups calls to action and hero-decoration holds optional visuals.
Behavior and accessibility
Direction, palette, media, and action wrapping are consumer choices. hero-content bounds long text so it can shrink inside the shared grid cell.
Reference
See the interactive Storybook specimen. Continue to Indicator or return to the Official preset overview.