hero accepted

LedgerHero

Open with a claim backed by inspectable evidence.

Structural distinction

Asymmetric editorial split: a declarative masthead column beside a numbered evidence rail whose entries expand in place. Proof participates in the opening argument instead of being deferred down-page.

Use when

Products whose buyers want receipts before rhetoric: infrastructure, research, finance, healthcare, developer tools. Long consideration cycles.

Avoid when

Impulse consumer moments, media-led launches (use a media-led hero), or when there are fewer than two genuine evidence entries.

Accessibility

Section is labelled by the headline (aria-labelledby). Evidence rail is an aside with an accessible label and an ordered list. Each entry is a native button with aria-expanded/aria-controls from Radix Collapsible. Detail content is in the SSR payload.

scroll

The section recedes as it departs — short upward settle with an opacity quiet (translate/opacity driven by scroll progress). No parallax, no pinning.

hover

Evidence entries warm their ordinal to the accent and raise a hairline underline under the title. Targets never move.

press

Evidence entries expand in place (height transition on motion tokens) with an affordance glyph rotating 45°. CTAs compress one physical step.

focus

Triggers are real buttons in natural order; focus ring uses theme focus tokens inset so it never clips at rail edges.

reduced

Entrance renders instantly, recede is pinned, expansion is effectively instant (1ms), all content available.

Usage

import { LedgerHero } from "@guillermo/marketing";

<LedgerHero
  headingLevel={1}
  content={{
    eyebrow: "Product · Release",
    headline: ["Deliberate line one", "line two"],
    dek: "One supporting paragraph.",
    actions: [{ label: "Primary", href: "#" }],
    evidence: [{ id: "a", title: "Claim", detail: "Proof." }],
  }}
/>