Card Component Patterns

Cards are the most repeated UI pattern. Master the structure once, adapt everywhere: product cards, blog cards, stats cards, feature cards.

Image card

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow">
  <div class="aspect-video">
    <img src="product.jpg" alt="..." class="w-full h-full object-cover" />
  </div>
  <div class="p-4">
    <span class="text-xs font-medium text-blue-600 uppercase tracking-wide">Category</span>
    <h3 class="text-base font-semibold text-gray-900 mt-1">Card Title</h3>
    <p class="text-sm text-gray-500 mt-1 line-clamp-2">Description text.</p>
    <div class="flex items-center justify-between mt-4">
      <span class="text-sm font-bold">$29</span>
      <button class="text-sm bg-blue-600 text-white px-3 py-1.5 rounded-md hover:bg-blue-700">Buy</button>
    </div>
  </div>
</div>

Horizontal card

<div class="flex gap-4 bg-white rounded-xl p-4 shadow-sm border border-gray-100">
  <div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden">
    <img src="thumb.jpg" class="w-full h-full object-cover" />
  </div>
  <div class="flex-1 min-w-0">
    <h3 class="font-semibold text-gray-900 truncate">Article title</h3>
    <p class="text-sm text-gray-500 mt-1 line-clamp-2">Summary text</p>
  </div>
</div>

line-clamp-2 truncates text to exactly 2 lines with an ellipsis. min-w-0 on a flex child prevents text overflow from breaking the layout.