Overview

A Hero introduces a route. It carries one short eyebrow, one display headline, one or two lines of body, and at most two buttons. The component is large on purpose — it earns the quietness of every page below it. Each Hero opens on background.accent.<hue>.subtlest per the layering rule; nested cards inside the Hero (a CTA tile, a preview frame) step up to subtler, never down.

Anatomy

Four parts, stacked centered by default. The eyebrow + title group sits 56 px above the action row; the eyebrow itself sits 20 px above the title.

Accents

Six accents, each opening on the canvas weight of its hue. The eyebrow inks in text.accent.<hue> (the 900 step) so it stays inside the same ramp the surface came from. Pick one accent per route and stick to it — the Hero sets the temperature for everything below.

Alignment

Centered is the default — every part stacks on the centerline, the body caps at 600 px, the action sits dead-center. Left-aligned is for product surfaces where the Hero shares the page with secondary content (settings landings, dashboard headers).

Actions

None, one, or two — never three. Two actions is the ceiling, and the second one should be a soft escape (Read more, See examples, Skip for now), not a comparable primary.

With media

When the Hero introduces a feature whose result lives elsewhere — a sample offer, a preview frame, an in-product screenshot — pair the text rail with a media slot to the right. The media slot steps to subtler so it reads as a card on the canvas surface.

Behavior

• 01One Hero per route. The Hero is the route's opening; two of them is two routes. If you find yourself wanting a second Hero, you probably want a Section.
• 02Sits in a 8 px gutter. The Hero card has a 8 px corner radius and lives inside an 8 px outer gutter so all four rounded corners are visible against the canvas. The gutter is part of the component, not the page.
• 03Title fluid, body fixed. The display title scales with clamp() from 40 px on mobile to 64 px on desktop (lg). The body stays at a fixed 18 / 24 — no design system uses fluid type in body copy.
• 04Stay inside one hue. The Hero's accent picks the ramp; text.accent.<hue> is the only ink the eyebrow can take. Don't paint the eyebrow blue on a green Hero — the accent system collapses if hues mix.
• 05Inverse is for moments. The pure-black Hero (the inverse accent) is the loudest the system gets. Use it for announcements that need to feel like an interruption — Black Friday, an outage post-mortem, a policy change. Once per quarter, not once per page.

Accessibility

• The title is the page's H1. Render the title as <h1> — one per page. Subsequent sections inside the page step from h2down. Don't wrap the Hero title in a styled span — assistive tech relies on the heading element, not the visual weight.
• Eyebrow is decorative, not a heading. Set the eyebrow as a <p>; it's styling, not structure. Screen readers announce it as part of the visual context, not as a separate landmark.
• Contrast:every accent ships text that meets WCAG AA on its surface — the inverse Hero gives 21 : 1, the yellow gives 11 : 1, orange 13 : 1. Don't override the ink with a custom colour without re-checking against the surface.
• Focus order: Tab walks through the action buttons in DOM order; the eyebrow / title / description carry no focus targets. Skip-link your way past the Hero on long routes by anchoring main immediately after.
• Reduced motion: the Hero has no entrance animation by default. If the surrounding page brings one, respect prefers-reduced-motion: reduce and present the Hero in place.

Code

The component takes one accent, one title, optional eyebrow / description / actions / media. The accent picks both the surface and the eyebrow ink — never set them separately.

import { Hero, Button } from "@flatpay-dk/ui";
import ArrowOutwardIcon from "@mui/icons-material/ArrowOutwardOutlined";

// Centered, single primary action — the Capital landing pattern
<Hero
  accent="orange"
  eyebrow="Capital"
  title="You're prequalified for a cash advance starting from 500.000 kr"
  description="Whether you want to grow, evolve, or just maintain — get access to the funding that you deserve."
  actions={
    <Button
      size="md"
      variant="primary"
      trailingIcon={<ArrowOutwardIcon />}
    >
      View offers
    </Button>
  }
/>

// Left-aligned, two actions — settings landing
<Hero
  accent="natural"
  align="left"
  eyebrow="Settings"
  title="Make Flatpay yours"
  description="Trading hours, currency defaults, receipt copy — every customer-facing setting that isn't a price."
  actions={
    <>
      <Button size="md" variant="primary">Continue setup</Button>
      <Button size="md" variant="tertiary">Skip for now</Button>
    </>
  }
/>

// With media — Hero text on the left, sample offer card on the right
<Hero
  accent="green"
  align="left"
  size="md"
  eyebrow="Capital"
  title="Apply in three minutes, decision in five"
  description="A short form, a soft credit check, and an offer in your inbox."
  actions={<Button variant="primary">Start the application</Button>}
  media={<SampleOfferCard />}
/>

Best practices

Hero misuse is loud. The questions below catch the common ones before they ship.

Props

Related