Card Pattern — Menampilkan Konten Modular

Card adalah container yang mengelompokkan informasi terkait. Ini pattern paling umum di UI modern.

Anatomi Card

<article class="card">
  <img src="thumbnail.jpg" alt="Judul artikel" class="card-image" />
  <div class="card-body">
    <h3 class="card-title">Judul</h3>
    <p class="card-text">Deskripsi singkat konten ini.</p>
    <a href="/detail" class="card-link">Baca selengkapnya</a>
  </div>
</article>

Styling Card yang Baik

.card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;           /* Image mengikuti radius */
  border: 1px solid #E5E7EB;
  transition: box-shadow 0.2s;
}
.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.card-body {
  padding: 1.25rem;
}
.card-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

Card dalam Grid

Cards biasanya ditampilkan dalam grid:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

List Pattern

Untuk data yang lebih linear (email, chat, settings):

.list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F3F4F6;
}
.list-item:hover {
  background-color: #F9FAFB;
}

Tips

1. Konsisten — semua card di satu grid harus punya format yang sama
2. Clickable card — jika seluruh card bisa diklik, tambahkan hover effect
3. Content hierarchy — image → title → description → action
4. Responsive — card harus menyesuaikan di mobile (stack vertikal)

Tokopedia product cards: image, title, price, rating, location — hierarki yang sangat jelas.