Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Thẻ

Để gom một mục trong danh sách thành một khối mà người dùng bấm vào xem chi tiết.

Hiển thị dữ liệu

Xem trước trực tiếp

Nguồn

<article class="dc-card">
  <div class="dc-card__media" role="img" aria-label="지게차 점검 장면"></div>
  <div class="dc-card__body">
    <p class="dc-card__eyebrow">안전교육</p>
    <h3 class="dc-card__title"><a class="dc-card__link" href="#">지게차 작업 전 점검 5분</a></h3>
    <p class="dc-card__text">현장에서 매일 하는 점검을 순서대로 정리했습니다.</p>
    <ul class="dc-card__meta">
      <li>영상 12분</li>
      <li>수강 1,240명</li>
    </ul>
  </div>
</article>
.dc-card {
  display: flex; flex-direction: column; overflow: hidden;
  max-width: 340px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  box-shadow: var(--dc-sh-1);
  font-family: var(--dc-font);
}
.dc-card__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--dc-brand-soft), var(--dc-sunken));
}
.dc-card__body {
  display: flex; flex-direction: column; gap: var(--dc-2);
  padding: var(--dc-4);
}
.dc-card__eyebrow {
  margin: 0; font-size: 12px; font-weight: 700;
  color: var(--dc-brand-text);
}
.dc-card__title { margin: 0; font-size: 16px; line-height: 1.4; color: var(--dc-text); }
.dc-card__link { color: inherit; text-decoration: none; }
.dc-card__link:hover { text-decoration: underline; }
.dc-card__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--dc-text-sub); }
.dc-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--dc-3);
  margin: 0; padding: 0; list-style: none;
  font-size: 12px; color: var(--dc-text-mute);
}
.dc-card--row { flex-direction: row; max-width: 520px; }
.dc-card--row .dc-card__media { flex: 0 0 136px; aspect-ratio: auto; }
.dc-card--clickable {
  position: relative;
  transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-card--clickable:hover { border-color: var(--dc-line-bold); box-shadow: var(--dc-sh-2); }
.dc-card--clickable .dc-card__link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.dc-card--clickable:has(.dc-card__link:focus-visible) {
  outline: 2px solid var(--dc-brand); outline-offset: 2px;
}
.dc-card--clickable .dc-card__link:focus-visible { outline: none; }
@media (max-width: 480px) {
  .dc-card--row { flex-direction: column; }
  .dc-card--row .dc-card__media { flex: none; aspect-ratio: 16 / 9; }
}

Cách dùng

  • Chỉ gồm tiêu đề, một dòng mô tả và thông tin phụ — thẻ là bản tóm tắt
  • Nếu cả thẻ bấm được thì đừng lồng thêm liên kết bên trong
  • Các thẻ cùng hàng phải cùng tỉ lệ ảnh và cùng chiều cao

Điểm cần lưu ý

  • Đừng chỉ dựa vào bóng đổ — ở chế độ tối, đường viền mới tạo ranh giới
  • Ảnh trang trí thì đặt aria-hidden; ảnh có nghĩa thì phải có mô tả

Tiếp theo