Hero — Text hero above an endorsement band

A left-aligned text hero ends with a divided proof band containing one endorsement and a two-column logo group.

ReactHTML

1440 × 900

Component.tsx126 lines

export default function HeroStackedProofBand() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="max-w-4xl">
          <p className="text-sm font-medium text-neutral-500">Eyebrow</p>
          <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl mt-4">
            Headline for the main outcome
          </h1>
          <p className="text-lg text-pretty text-neutral-600 mt-6 max-w-2xl">
            A short introduction that names the audience and the benefit.
          </p>
          <div className="flex flex-wrap items-center gap-3 mt-8">
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Primary action
            </a>
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Secondary action
            </a>
          </div>
        </div>
        <div className="mt-12 grid gap-8 border-t border-neutral-200 pt-8 md:grid-cols-2">
          <figure className="space-y-4">
            <blockquote className="text-base text-neutral-600">
              A brief endorsement describing the useful change for a real user.
            </blockquote>
            <figcaption>
              <div className="flex items-center gap-3">
                <span
                  aria-hidden="true"
                  className="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                >
                  AR
                </span>
                <div className="min-w-0">
                  <h3 className="text-base font-semibold">Alex Rivera</h3>
                  <p className="text-sm text-neutral-500">Role or specialty</p>
                </div>
              </div>
            </figcaption>
          </figure>
          <div>
            <p className="text-sm font-medium text-neutral-500">
              Supporting organizations
            </p>
            <ul
              role="list"
              className="mt-4 grid grid-cols-2 gap-4 text-sm font-semibold"
            >
              <li className="flex items-center gap-2">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5"
                >
                  <rect x="4" y="4" width="16" height="16" rx="3" />
                  <path d="M4 12h16M12 4v16" />
                </svg>
                Logo
              </li>
              <li className="flex items-center gap-2">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5"
                >
                  <rect x="4" y="4" width="16" height="16" rx="3" />
                  <path d="M4 12h16M12 4v16" />
                </svg>
                Logo
              </li>
              <li className="flex items-center gap-2">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5"
                >
                  <rect x="4" y="4" width="16" height="16" rx="3" />
                  <path d="M4 12h16M12 4v16" />
                </svg>
                Logo
              </li>
              <li className="flex items-center gap-2">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5"
                >
                  <rect x="4" y="4" width="16" height="16" rx="3" />
                  <path d="M4 12h16M12 4v16" />
                </svg>
                Logo
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when supporting people and organizations carry more weight than a product image. Pick a media hero for visual explanation. Variations: replace the endorsement with a rating, show two logos, or add an organization count beside the label.
Hierarchy: The headline leads, then lede and actions, followed by endorsement text and attribution. Keep the headline under 10 words, lede under 25, endorsement under 25 and organization names short.
Responsive: The proof band stacks below 768px; its logo group stays two columns. Display type steps from 36px through 48px to 60px. Actions wrap without changing reading order.
Layout: A max-w-6xl section holds a max-w-4xl pitch and max-w-2xl lede. The proof band sits 48px below the actions with a 1px top border and 32px top padding. At 768px it uses equal columns with a 32px gap.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Eyebrow                                                   │
│Headline for the main outcome                             │
│Supporting lede                                           │
│[Primary action] [Secondary]                              │
│                                                          │
│Endorsement sentence             Supporting organizations │
│Avatar  Name / Role               Logo       Logo         │
│                                 Logo       Logo          │
└──────────────────────────────────────────────────────────┘

View all

Hero — Announcement rail and wide pitch
Layout tags: sidebar,numbers,spacious
Hero — Bento tiles
Layout tags: bento,media,compact
Hero — Centred search bar
Layout tags: centered,form,row

Hero — Text hero above an endorsement band

Pattern notes

More in Hero

Hero — Announcement rail and wide pitch

Hero — Bento tiles

Hero — Centred search bar