The default landing hero: centered, capped measure, breathing room.

The pattern#

html
<section class="mx-auto max-w-3xl px-6 py-24 text-center">
  <h1 class="text-5xl font-bold tracking-tight">Headline</h1>
  <p class="mt-6 text-xl text-slate-600">Subhead with a capped measure.</p>
</section>

Responsive behavior#

Every pattern here is breakpoint-agnostic at its core — add sm:/md:/lg: prefixes to the grid/flex containers to tune when it collapses. Because the primitives are utilities, responsiveness is a prefix, never a rewrite.

When to use#

  • Landing pages
  • Campaign pages
  • 404s

patterns/index|All patterns · utilities/grid/grid-template-columns|Grid · utilities/flexbox/flex-direction|Flexbox