Thẻ hình ảnh
Dùng khi hình ảnh là thứ người xem thấy trước — ảnh công trường, bài viết, sản phẩm xếp cạnh nhau.
Xem trước trực tiếp
Nguồn
<article class="dc-imgcard">
<div class="dc-imgcard__media" role="img" aria-label="타워크레인 설치 현장 사진">
<svg class="dc-imgcard__ph" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
<path d="M5 11h38v26H5z" fill="none" stroke="currentColor" stroke-width="2" />
<path d="M5 31l11-9 7 6 8-8 12 11v6H5z" fill="currentColor" opacity=".5" />
<circle cx="17" cy="19" r="3" fill="currentColor" />
</svg>
</div>
<div class="dc-imgcard__body">
<p class="dc-imgcard__kicker">3공구 · 9월 12일</p>
<h3 class="dc-imgcard__title"><a class="dc-imgcard__link" href="#">타워크레인 설치 전 안전 점검</a></h3>
<p class="dc-imgcard__desc">작업 전 점검 사진 12장과 반입 자재 검수 기록을 함께 올렸습니다.</p>
</div>
<div class="dc-imgcard__foot">
<span class="dc-imgcard__badge">사진 12장</span>
<span class="dc-imgcard__by">김도현</span>
</div>
</article>.dc-imgcard {
/* 가림막은 밝은 모드에서도 어둡다. --dc-text-on 은 다크 모드에서 검어지므로 여기엔 쓸 수 없다 */
--dc-on-media: white;
position: relative;
display: flex; flex-direction: column;
max-width: 340px;
background: var(--dc-surface);
border: 1px solid var(--dc-line);
border-radius: var(--dc-r-md);
overflow: hidden;
box-shadow: var(--dc-sh-1);
font-family: var(--dc-font);
}
.dc-imgcard__media {
position: relative;
aspect-ratio: 16 / 10;
display: grid; place-items: center;
background: linear-gradient(135deg,
color-mix(in srgb, var(--dc-brand) 24%, var(--dc-sunken)),
var(--dc-sunken));
color: color-mix(in srgb, var(--dc-text-mute) 70%, transparent);
}
.dc-imgcard__ph { width: 48px; height: 48px; }
.dc-imgcard__body {
display: flex; flex-direction: column; gap: var(--dc-1);
padding: var(--dc-4);
}
.dc-imgcard__kicker { margin: 0; font-size: 12px; color: var(--dc-text-mute); }
.dc-imgcard__title { margin: 0; font-size: 16px; line-height: 1.35; }
.dc-imgcard__link { color: var(--dc-text); text-decoration: none; }
.dc-imgcard__link:hover { text-decoration: underline; }
.dc-imgcard__link::after { content: ""; position: absolute; inset: 0; }
.dc-imgcard__desc {
margin: 0; font-size: 13px; line-height: 1.5; color: var(--dc-text-sub);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden;
}
.dc-imgcard__foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--dc-2);
padding: var(--dc-3) var(--dc-4);
border-top: 1px solid var(--dc-line);
font-size: 12px;
}
.dc-imgcard__badge {
padding: 2px var(--dc-2); border-radius: var(--dc-r-full);
background: var(--dc-sunken); color: var(--dc-text-sub);
}
.dc-imgcard__by { color: var(--dc-text-mute); }
.dc-imgcard--row { flex-direction: row; align-items: stretch; max-width: 460px; }
.dc-imgcard--row .dc-imgcard__media { flex: 0 0 136px; aspect-ratio: 4 / 3; }
.dc-imgcard--row .dc-imgcard__body { padding: var(--dc-3) var(--dc-4); justify-content: center; }
.dc-imgcard--overlay .dc-imgcard__media { aspect-ratio: 4 / 3; }
.dc-imgcard__scrim {
position: absolute; inset: auto 0 0 0;
padding: var(--dc-7) var(--dc-4) var(--dc-4);
/* 글자가 앉는 아래쪽은 충분히 진하게 — 밝은 사진 위에서도 흰 글자가 4.5:1 을 넘어야 한다 */
background: linear-gradient(to top,
color-mix(in srgb, black 38%, var(--dc-overlay)),
color-mix(in srgb, black 28%, var(--dc-overlay)) 62%,
transparent);
color: var(--dc-on-media);
}
.dc-imgcard__scrim .dc-imgcard__kicker,
.dc-imgcard__scrim .dc-imgcard__title { color: var(--dc-on-media); }Cách dùng
- Cố định một tỉ lệ ảnh cho cả danh sách; mỗi thẻ một tỉ lệ sẽ làm hàng bị lệch
- Giới hạn tiêu đề trong hai dòng, dòng mô tả bên dưới chỉ chứa thông tin phụ
- Nếu bấm được cả thẻ, đặt liên kết ở tiêu đề rồi cho liên kết đó phủ lên thẻ
Điểm cần lưu ý
- Đừng để alt trống khi ảnh chính là nội dung — hãy mô tả ảnh cho thấy gì
- Chữ đặt trên ảnh luôn cần lớp gradient tối phía sau mới đọc được