Image beside text — the most repeated layout on the internet.

The pattern#

html
<div class="flex gap-4">
  <img class="size-16 shrink-0 rounded-lg" src="a.jpg" alt="" />
  <div class="min-w-0">
    <h3 class="font-semibold truncate">Title</h3>
    <p class="text-sm text-slate-500">Body</p>
  </div>
</div>

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#

  • Comments
  • Notifications
  • Search results

patterns/index|All patterns · Grid · Flexbox