Hero .mv-hero
Ouverture éditoriale de landing page : une ligne méta mono tracée sur un fin filet, un titre surdimensionné bicolore, un chapô et des actions, une planche produit légendée et une rangée de chiffres clés entre filets. Version éditoriale, scindée ou centrée.
| Catégorie | Blocs |
|---|---|
| Type | Bloc (section prête à l’emploi) (.mv-hero) |
| Statut | stable |
| Installe aussi | avatar, button, dot-pattern, grid-pattern |
| Keywords | landing, hero, header, marketing, above the fold, cta, editorial, swiss |
When to use
- A landing page needs a sober editorial opener with an oversized two-tone headline and actions
- A product screenshot should appear as a captioned plate beside or below the copy
- Key facts or figures should sit in a ruled row right under the headline
Avoid when
- The section closes the page with a final signup prompt → use CTA instead
Installation
node scripts/add.mjs hero --out ./src/marvelousAgent IA avec le serveur MCP Marvelous UI : install_components({ slugs: ["hero"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, components/hero/hero.css, components/avatar/avatar.css, components/avatar/avatar.js, components/button/button.css, core/canvas.js, core/element.js, core/motion.js, core/pointer.js, components/dot-pattern/dot-pattern.css, components/dot-pattern/dot-pattern.js, core/dom.js, components/grid-pattern/grid-pattern.css, components/grid-pattern/grid-pattern.js.
Utilisation
Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :
<mv-tabs id="hero-demo" value="editorial" data-size="sm" style="gap:0">
<style>
#hero-demo > [role="tablist"] { justify-self: center; margin: .75rem auto; }
/* ── Demo content: reconciliation screen (replace with your screenshot) ── */
#hero-demo .lg { container-type: inline-size; font-size: 12px; line-height: 1.4; text-align: start; }
#hero-demo .lg-bar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--mv-border); }
#hero-demo .lg-logo { display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: 13px; letter-spacing: -.01em; }
#hero-demo .lg-logo i { width: 1.1rem; height: 1.1rem; border-radius: 3px; background: var(--mv-fg); box-shadow: inset -.4rem 0 0 var(--mv-accent); }
#hero-demo .lg-crumb { color: var(--mv-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hero-demo .lg-crumb b { color: var(--mv-fg); font-weight: 550; }
#hero-demo .lg-chip { margin-left: auto; padding: .15rem .5rem; border: 1px solid var(--mv-border); border-radius: 4px; font: 500 10.5px/1.5 var(--mv-font-mono); color: var(--mv-fg-muted); white-space: nowrap; }
#hero-demo .lg-bar .mv-avatar-group { --mv-avatar-size: 1.4rem; --mv-avatar-ring: var(--mv-surface); }
#hero-demo .lg-body { display: grid; grid-template-columns: minmax(0, 1fr); }
#hero-demo .lg-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#hero-demo .lg-table th { padding: .6rem 1rem; border-bottom: 1px solid var(--mv-border); color: var(--mv-fg-subtle); font: 500 10px/1.4 var(--mv-font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: start; }
#hero-demo .lg-table td { padding: .62rem 1rem; border-bottom: 1px solid var(--mv-border); white-space: nowrap; }
#hero-demo .lg-table tr:last-child td { border-bottom: 0; }
#hero-demo .lg-table td:nth-child(3), #hero-demo .lg-table th:nth-child(3) { text-align: end; }
#hero-demo .lg-table td:first-child { color: var(--mv-fg-muted); font-family: var(--mv-font-mono); font-size: 11px; }
#hero-demo .lg-table tr[data-focus] td { background: color-mix(in oklch, var(--mv-accent) 7%, transparent); }
#hero-demo .lg-st { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }
#hero-demo .lg-st::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--c); }
#hero-demo .lg-st[data-s="ok"] { --c: var(--mv-success); }
#hero-demo .lg-st[data-s="review"] { --c: var(--mv-warning); }
#hero-demo .lg-st[data-s="missing"] { --c: var(--mv-danger); }
#hero-demo .lg-side { display: none; gap: 1rem; align-content: start; padding: 1rem; border-left: 1px solid var(--mv-border); background: var(--mv-bg-subtle); }
#hero-demo .lg-side h4 { margin: 0; color: var(--mv-fg-subtle); font: 500 10px/1.4 var(--mv-font-mono); letter-spacing: .06em; text-transform: uppercase; }
#hero-demo .lg-big { font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
#hero-demo .lg-big small { font-size: 13px; color: var(--mv-fg-muted); font-weight: 500; letter-spacing: 0; }
#hero-demo .lg-seg { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
#hero-demo .lg-seg i { height: 6px; background: var(--mv-bg-emphasis); }
#hero-demo .lg-seg i:nth-child(-n + 8) { background: var(--mv-fg); }
#hero-demo .lg-steps { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
#hero-demo .lg-steps li { display: flex; justify-content: space-between; gap: .5rem; color: var(--mv-fg-muted); }
#hero-demo .lg-steps b { color: var(--mv-fg); font-weight: 500; font-variant-numeric: tabular-nums; }
@container (min-width: 40rem) {
#hero-demo .lg-body { grid-template-columns: minmax(0, 1fr) 13rem; }
#hero-demo .lg-side { display: grid; }
}
@container (max-width: 30rem) {
#hero-demo .lg-table th:nth-child(4), #hero-demo .lg-table td:nth-child(4), #hero-demo .lg-chip { display: none; }
}
/* ── Demo content: invoice document (split variant) ── */
#hero-demo .inv { display: grid; gap: 1.1rem; padding: clamp(1.1rem, 4cqi, 1.75rem); font-size: 12.5px; line-height: 1.45; text-align: start; font-variant-numeric: tabular-nums; }
#hero-demo .inv-top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
#hero-demo .inv-top strong { display: block; font-size: 15px; letter-spacing: -.01em; }
#hero-demo .inv-top span, #hero-demo .inv-meta dt { color: var(--mv-fg-subtle); }
#hero-demo .inv-paid { padding: .2rem .55rem; border: 1px solid color-mix(in oklch, var(--mv-success) 45%, transparent); color: var(--mv-success); font: 600 10.5px/1.4 var(--mv-font-mono); letter-spacing: .08em; text-transform: uppercase; rotate: -4deg; }
#hero-demo .inv-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding-block: .8rem; border-block: 1px solid var(--mv-border); }
#hero-demo .inv-meta dt { font: 500 10px/1.4 var(--mv-font-mono); letter-spacing: .06em; text-transform: uppercase; }
#hero-demo .inv-meta dd { margin: .15rem 0 0; font-weight: 500; }
#hero-demo .inv-lines { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
#hero-demo .inv-lines li { display: flex; justify-content: space-between; gap: 1rem; }
#hero-demo .inv-lines small { display: block; color: var(--mv-fg-subtle); font-size: 11.5px; }
#hero-demo .inv-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .8rem; border-top: 1px solid var(--mv-fg); font-weight: 600; }
#hero-demo .inv-total b { font-size: 22px; letter-spacing: -.03em; }
</style>
<div role="tablist" aria-label="Block variant">
<button role="tab" data-value="editorial">Editorial</button>
<button role="tab" data-value="split">Split + visual</button>
<button role="tab" data-value="centered">Centered</button>
</div>
<!-- ═════════ Editorial (default) ═════════ -->
<div role="tabpanel" data-value="editorial">
<section class="mv-hero" aria-labelledby="hero-e-title">
<div class="mv-hero-inner">
<div class="mv-hero-content">
<p class="mv-hero-meta">
<span class="mv-hero-kicker">Ledgerline 4.0</span>
<span>Released Sep 9, 2026</span>
<a href="#hero-demo">Read the changelog →</a>
</p>
<h1 class="mv-hero-title" id="hero-e-title">Close the books in days, <span class="mv-hero-muted">not weeks.</span></h1>
<p class="mv-hero-lead">Ledgerline matches every bank line to its invoice, flags what doesn’t add up and walks your team through the month-end checklist. <strong>Finance teams close 62% faster</strong> in their first quarter.</p>
<div class="mv-hero-actions">
<a class="mv-button" data-size="lg" href="#hero-demo">Start a free trial</a>
<a class="mv-button" data-size="lg" data-variant="outline" href="#hero-demo">Talk to sales</a>
</div>
<p class="mv-hero-note">30 days free · Connects to 11,000 banks</p>
</div>
<figure class="mv-hero-visual">
<div class="mv-hero-frame" role="img" aria-label="Ledgerline reconciliation screen: September close, 1,284 of 1,302 transactions matched, two lines awaiting review">
<div class="lg" aria-hidden="true">
<div class="lg-bar">
<span class="lg-logo"><i></i>Ledgerline</span>
<span class="lg-crumb">Close · <b>September 2026</b></span>
<span class="lg-chip">DAY 3 OF 5</span>
<div class="mv-avatar-group" data-size="xs">
<span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:30"><span class="mv-avatar-fallback">AR</span></span>
<span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:200"><span class="mv-avatar-fallback">JT</span></span>
<span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:140"><span class="mv-avatar-fallback">MK</span></span>
</div>
</div>
<div class="lg-body">
<table class="lg-table">
<thead><tr><th>Date</th><th>Counterparty</th><th>Amount</th><th>Status</th></tr></thead>
<tbody>
<tr><td>Sep 28</td><td>Harbor & Pine Logistics</td><td>−$4,820.00</td><td><span class="lg-st" data-s="ok">Matched</span></td></tr>
<tr><td>Sep 27</td><td>Oakridge Studio</td><td>+$12,400.00</td><td><span class="lg-st" data-s="ok">Matched</span></td></tr>
<tr data-focus><td>Sep 27</td><td>Cloudmere Hosting</td><td>−$1,196.40</td><td><span class="lg-st" data-s="review">Amount differs</span></td></tr>
<tr><td>Sep 26</td><td>Vela Coffee Roasters</td><td>−$86.50</td><td><span class="lg-st" data-s="missing">No receipt</span></td></tr>
<tr><td>Sep 25</td><td>Brightwater Legal</td><td>−$3,150.00</td><td><span class="lg-st" data-s="ok">Matched</span></td></tr>
<tr><td>Sep 25</td><td>Northfield Retail Ltd</td><td>+$28,760.00</td><td><span class="lg-st" data-s="ok">Matched</span></td></tr>
</tbody>
</table>
<aside class="lg-side">
<h4>Close progress</h4>
<div class="lg-big">82<small>%</small></div>
<div class="lg-seg"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<ul class="lg-steps">
<li>Bank feeds <b>4 / 4</b></li>
<li>Transactions <b>1,284 / 1,302</b></li>
<li>Accruals <b>12 / 14</b></li>
<li>Intercompany <b>3 / 5</b></li>
</ul>
<h4>Unexplained variance</h4>
<div class="lg-big">$0<small>.00</small></div>
</aside>
</div>
</div>
</div>
<figcaption class="mv-hero-caption"><span><b>Fig. 01</b> · Reconciliation, September close</span><span>Auto-matched: 98.6%</span></figcaption>
</figure>
<dl class="mv-hero-facts">
<div><dt>Security</dt><dd>SOC 2 Type II, ISO 27001</dd></div>
<div><dt>Data residency</dt><dd>Frankfurt or Dublin, your choice</dd></div>
<div><dt>Integrations</dt><dd>Xero, NetSuite, QuickBooks, Sage</dd></div>
<div><dt>Onboarding</dt><dd>Live in under a week</dd></div>
</dl>
</div>
</section>
</div>
<!-- ═════════ Split ═════════ -->
<div role="tabpanel" data-value="split">
<section class="mv-hero" data-variant="split" aria-labelledby="hero-s-title" style="--mv-hero-bg:var(--mv-bg-subtle)">
<div class="mv-hero-inner">
<div class="mv-hero-content">
<p class="mv-hero-meta">
<span class="mv-hero-kicker">Tallyhouse</span>
<span>Invoicing for studios</span>
</p>
<h1 class="mv-hero-title" id="hero-s-title">Send the invoice. <span class="mv-hero-muted">Get paid on Friday.</span></h1>
<p class="mv-hero-lead">Turn tracked hours into a clean invoice in one click, accept cards and bank transfers, and let polite reminders chase the late payers for you.</p>
<div class="mv-hero-actions">
<a class="mv-button" data-size="lg" href="#hero-demo">Create your first invoice</a>
<a class="mv-button" data-size="lg" data-variant="ghost" href="#hero-demo">See a sample →</a>
</div>
<div class="mv-hero-proof">
<div class="mv-avatar-group" data-size="sm">
<span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:20" role="img" aria-label="Nadia Ferreira"><span class="mv-avatar-fallback" aria-hidden="true">NF</span></span>
<span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:250" role="img" aria-label="Owen Clarke"><span class="mv-avatar-fallback" aria-hidden="true">OC</span></span>
<span class="mv-avatar" data-variant="tinted" style="--mv-avatar-hue:160" role="img" aria-label="Yuki Tanaka"><span class="mv-avatar-fallback" aria-hidden="true">YT</span></span>
</div>
<span>Used by <strong>4,300 studios</strong><br>in design, film and architecture</span>
</div>
</div>
<figure class="mv-hero-visual">
<div class="mv-hero-frame" role="img" aria-label="Invoice TH-0418 from Marlow & Finch to Oakridge Studio, $9,840 total, marked paid">
<div class="inv" aria-hidden="true">
<div class="inv-top">
<div><strong>Marlow & Finch</strong><span>Brand identity · Invoice TH-0418</span></div>
<span class="inv-paid">Paid</span>
</div>
<dl class="inv-meta">
<div><dt>Billed to</dt><dd>Oakridge Studio</dd></div>
<div><dt>Issued</dt><dd>Sep 2, 2026</dd></div>
<div><dt>Paid</dt><dd>Sep 5, 2026</dd></div>
</dl>
<ul class="inv-lines">
<li><span>Discovery workshop<small>2 sessions × $960</small></span><span>$1,920</span></li>
<li><span>Logo & wordmark<small>3 routes, 2 rounds</small></span><span>$4,800</span></li>
<li><span>Brand guidelines<small>48-page PDF + Figma library</small></span><span>$2,400</span></li>
<li><span>Print production<small>Expenses, at cost</small></span><span>$720</span></li>
</ul>
<div class="inv-total"><span>Total</span><b>$9,840.00</b></div>
</div>
</div>
<figcaption class="mv-hero-caption"><span><b>Fig. 02</b> · Paid three days after sending</span><span>Stripe · ACH</span></figcaption>
</figure>
</div>
</section>
</div>
<!-- ═════════ Centered ═════════ -->
<div role="tabpanel" data-value="centered">
<section class="mv-hero" data-variant="centered" aria-labelledby="hero-c-title">
<div class="mv-hero-bg" aria-hidden="true">
<div class="mv-grid-pattern" data-fill data-variant="dashed" style="--mv-grid-pattern-mask: radial-gradient(ellipse 60% 55% at 50% 0%, #000 25%, transparent 80%); --mv-grid-pattern-size: 64px"></div>
</div>
<div class="mv-hero-inner">
<div class="mv-hero-content">
<p class="mv-hero-meta"><span class="mv-hero-kicker">Now in public beta</span></p>
<h1 class="mv-hero-title" id="hero-c-title">Every pull request, <span class="mv-hero-muted">its own live preview.</span></h1>
<p class="mv-hero-lead">Kilnworks spins up a full-stack copy of your app for each branch (database, queues and seeded data included) and tears it down on merge.</p>
<div class="mv-hero-actions">
<a class="mv-button" data-size="lg" href="#hero-demo">Connect GitHub</a>
<a class="mv-button" data-size="lg" data-variant="outline" href="#hero-demo">Read the docs</a>
</div>
<p class="mv-hero-note">Free for open source · $12 per seat for teams</p>
<dl class="mv-hero-facts">
<div><dt>Cold start</dt><dd>38 s median</dd></div>
<div><dt>Runtimes</dt><dd>Node, Python, Go, Ruby</dd></div>
<div><dt>Databases</dt><dd>Postgres, MySQL, Redis</dd></div>
<div><dt>Regions</dt><dd>9, on three continents</dd></div>
</dl>
</div>
</div>
</section>
</div>
</mv-tabs>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
data-variant | editorial | split | centered | editorial | editorial (default, or no attribute): headline across the full width, then lead on the left and actions aligned right (from 48rem); split: copy on the left, plate on the right (from 56rem); centered: symmetric meta rule, centered copy, optional backdrop. |
Content structure
| Name | Description |
|---|---|
.mv-hero-bg | Optional decorative layer (aria-hidden): a .mv-grid-pattern or .mv-dot-pattern with data-fill. |
.mv-hero-inner | Inner grid (max width --mv-hero-max): -content, then optionally -visual and -facts. |
.mv-hero-content | Copy: -meta, -title (with -line / -muted / -accent), -lead, -actions, -note, -proof, optionally -facts. Staggered settle-in entrance. |
figure.mv-hero-visual | Product plate: .mv-hero-frame (bordered surface for a screenshot or mockup) + figcaption.mv-hero-caption (mono caption, <b> for the figure number). |
dl.mv-hero-facts | Ruled facts row: div > dt (mono label) + dd (value). 2 columns, 4 from 44rem. |
CSS classes
| Name | Description |
|---|---|
mv-hero | Root section, a query container named mv-hero. |
mv-hero-meta / -kicker | Mono uppercase meta line on a hairline that draws in; -kicker gets a small accent square. A trailing <a> is pushed to the right. Centered: only the kicker, framed by two rules. |
mv-hero-title / -line / -muted / -accent | Fluid headline (cqi); -line forces a break, -muted greys the second clause, -accent colors a fragment. |
mv-hero-proof | Social proof: avatar group + caption. |
CSS variables
| Name | Default | Description |
|---|---|---|
--mv-hero-max | 76rem | Max content width. |
--mv-hero-bg | var(--mv-bg) | Section background. |
--mv-hero-rule | var(--mv-border-strong) | Color of the main hairlines (meta, facts). |
--mv-hero-accent | var(--mv-accent) | Kicker square and .mv-hero-accent color. |
Accessibility
The section is labeled by its <h1> (aria-labelledby). The product plate is a <figure> with a caption; a hand-built mockup gets role="img" + aria-label and its inner markup is aria-hidden. Facts are a <dl>. The backdrop is aria-hidden. Entrance animations are disabled under reduced motion.