Hero Header

split x image-right

The classic Relume hero — a bold headline, supporting line, and dual CTA beside a full-bleed visual.

heroheadercta

Launch your site in a single afternoon.

A design system, section blocks, and funnels — ready to drop into any client build and theme to your brand.

Get startedSee how

Code

relume-hero.tsx

export function HeroHeader() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-16 md:py-24">
      <div className="grid grid-cols-1 gap-x-16 gap-y-10 md:grid-cols-2 md:items-center">
        <div>
          <h1 className="mb-5 text-5xl font-bold tracking-tight md:text-6xl">Launch your site in a single afternoon.</h1>
          <p className="text-lg text-muted-foreground">
            A design system, section blocks, and funnels — ready to drop into any client build and theme to your brand.
          </p>
          <div className="mt-8 flex flex-wrap gap-4">
            <a className="rounded-full bg-foreground px-5 py-2.5 text-background">Get started</a>
            <a className="rounded-full border border-border px-5 py-2.5">See how</a>
          </div>
        </div>
        <div className="aspect-[4/3] w-full rounded-2xl border border-border bg-muted" />
      </div>
    </section>
  );
}

Adapted from the Relume Library — swap the placeholder copy and it themes itself from your project tokens.

Use it in another build

Drop this section into a page, keep your project tokens, and it themes itself. Or tell Claude Code: “add the Hero Header section and fill it with my copy.”