A container of capped text with a full-width colored band.

The pattern#

html
<section class="bg-slate-900 py-20 text-white">
  <div class="container mx-auto max-w-5xl px-6">capped content on full-width color</div>
</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#

  • CTA bands
  • Stat strips
  • Testimonial sections

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