# Hero · MIAN

The opening section of a page: a display headline, an intro, actions and optional media, stacked, split or centred.

- Id: `hero` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/hero
- Use for: landing page opening, above the fold, headline and call to action, product introduction, homepage top, agency statement, split hero with image.
- On a page: opening · prominence high · density low. Usually after: site-header. Usually before: logo-cloud, figures, bento, feature-grid, media.
- Alternatives: article, figures, slides.
- Avoid: Do not default to badge + giant headline + paragraph + two buttons. A statement headline alone, a split with the real product, or a figure can open better. One primary action only.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Split hero

```html
<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"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div></div>
  </div>
</section>
```

### Centred hero with product UI

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/hero/source