Hero — `.mv-hero`

Editorial landing opener: a mono meta line drawn on a hairline, an oversized two-tone headline, lead and actions, a captioned product plate and a ruled facts row — editorial, split or centered.

Category	Blocks
Type	Block (ready-made section) (`.mv-hero`)
Status	stable
Also installs	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

Install

node scripts/add.mjs hero --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["hero"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): 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.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<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 &amp; 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 &amp; Finch to Oakridge Studio, $9,840 total, marked paid">
            <div class="inv" aria-hidden="true">
              <div class="inv-top">
                <div><strong>Marlow &amp; 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 &amp; 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.