A card that responds to its slot, not the page.

The pattern#

html
<aside class="@container">
  <div class="grid grid-cols-1 @lg:grid-cols-2 gap-4">adapts to sidebar width</div>
</aside>

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#

  • Design-system components
  • Embedded widgets

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