Hero
The opening section of a page: a display headline, an intro, actions and optional media, stacked, split or centred.
Split hero
Hand-pulled noodles, pulled to order.
Twelve seats at the counter, one broth simmered for eighteen hours, and noodles stretched in front of you.
Tue–Sun · 12:00–15:00, 18:00–22:30
<section class="mn-section mn-hero mn-hero-split">
<div class="mn-container mn-hero-in">
<div class="mn-hero-copy">
<h1 class="mn-display">Hand-pulled noodles, pulled to order.</h1>
<p class="mn-intro">Twelve seats at the counter, one broth simmered for eighteen hours, and noodles stretched in front of you.</p>
<div class="mn-hero-actions"><a class="mn-btn mn-btn-lg" href="#">Book a seat</a><a class="mn-btn mn-btn-lg mn-btn-ghost" href="#">See the menu <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
<p class="mn-hero-note">Tue–Sun · 12:00–15:00, 18:00–22:30</p>
</div>
<div class="mn-hero-media"><div class="mn-media" style="--ratio:4/3"><svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Illustration: a bowl of noodles with chopsticks" xmlns="http://www.w3.org/2000/svg">
<rect width="400" height="300" fill="var(--mn-surface-2)"/>
<g fill="none" stroke="var(--mn-muted)" stroke-width="3" stroke-linecap="round" opacity=".55">
<path d="M160 70c-12-16 12-24 0-42"/><path d="M200 62c-12-16 12-24 0-42"/><path d="M240 70c-12-16 12-24 0-42"/>
</g>
<path d="M70 140h260c0 70-52 118-130 118S70 210 70 140Z" fill="var(--mn-surface)" stroke="var(--mn-fg)" stroke-width="3"/>
<path d="M150 258h100v10a8 8 0 0 1-8 8h-84a8 8 0 0 1-8-8Z" fill="var(--mn-fg)"/>
<g fill="none" stroke="var(--mn-primary)" stroke-width="4" stroke-linecap="round">
<path d="M92 142c20-26 44 10 66-12s40 14 62-8 38 16 60-4 30 4 34 12"/>
<path d="M100 150c24-18 40 12 62-6s42 12 66-6 36 12 56-2 24 2 26 8" opacity=".75"/>
</g>
<ellipse cx="200" cy="140" rx="130" ry="10" fill="none" stroke="var(--mn-fg)" stroke-width="3"/>
<circle cx="262" cy="128" r="16" fill="var(--mn-accent)"/><circle cx="262" cy="128" r="7" fill="var(--mn-surface)"/>
<g stroke="var(--mn-fg)" stroke-width="6" stroke-linecap="round"><path d="M250 30 170 150"/><path d="M280 36 190 152"/></g></svg></div></div>
</div>
</section>Centred hero with product UI
For finance teams of 5 to 500
Close the books in four days, not fourteen.
Ledger reconciles every account overnight and hands you the exceptions.
September closeOn track
| Account | Status | Unmatched |
|---|---|---|
| Operating · 4410 | Matched | €0.00 |
| Stripe payouts | Review | €1,284.10 |
<section class="mn-section mn-hero mn-hero-center">
<div class="mn-container mn-hero-in">
<div class="mn-hero-copy">
<p class="mn-eyebrow">For finance teams of 5 to 500</p>
<h1 class="mn-display">Close the books in four days, not fourteen.</h1>
<p class="mn-intro">Ledger reconciles every account overnight and hands you the exceptions.</p>
<div class="mn-hero-actions"><a class="mn-btn mn-btn-lg" href="#">Start free</a><a class="mn-btn mn-btn-lg mn-btn-outline" href="#">Book a demo</a></div>
</div>
<div class="mn-hero-media mn-hero-media-fade">
<div class="mn-card"><div class="mn-card-body mn-stack">
<div class="mn-row" style="justify-content:space-between"><strong>September close</strong><span class="mn-badge mn-badge-soft mn-success">On track</span></div>
<div class="mn-progress" role="progressbar" aria-label="Close progress" aria-valuenow="72" style="--_v:72%"></div>
<div class="mn-table-wrap"><table class="mn-table"><thead><tr><th scope="col">Account</th><th scope="col">Status</th><th scope="col" style="text-align:right">Unmatched</th></tr></thead><tbody><tr><td>Operating · 4410</td><td><span class="mn-badge mn-badge-soft mn-success">Matched</span></td><td style="text-align:right">€0.00</td></tr><tr><td>Stripe payouts</td><td><span class="mn-badge mn-badge-soft mn-warning">Review</span></td><td style="text-align:right">€1,284.10</td></tr></tbody></table></div>
</div></div>
</div>
</div>
</section>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/hero.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-hero | Use with mn-section. Stacked by default: copy, then media. |
| mn-hero-split | Copy and media side by side on wide sections. |
| mn-hero-center | Centred copy. |
| mn-hero-in | Inner grid; put it on the mn-container. |
| mn-hero-copy | An <h1 class="mn-display">, mn-intro, mn-hero-actions, mn-hero-note. Start with the headline: no badge above it; put news in the note or a banner. |
| mn-poster | A headline sized to the width of its container, for one very large statement or a wordmark. |
| mn-hero-media | Screenshot: product UI, illustration or photo. mn-hero-media-fade fades a tall screenshot out at the bottom. |
Accessibility
- The hero headline is usually the page’s only <h1>.
- Primary and secondary actions should be links (<a class="mn-btn">) when they navigate.
- Media that carries meaning needs alt text; decorative art is aria-hidden.
- Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview.