Đế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

Danh sách mô tả

Để trình bày chi tiết của một bản ghi thành từng cặp tên và giá trị.

Hiển thị dữ liệu

Xem trước trực tiếp

Nguồn

<dl class="dc-dl">
  <div class="dc-dl__row">
    <dt class="dc-dl__key">주문번호</dt>
    <dd class="dc-dl__val">2026-0312-0087</dd>
  </div>
  <div class="dc-dl__row">
    <dt class="dc-dl__key">주문자</dt>
    <dd class="dc-dl__val">김도현<span class="dc-dl__note">010-1234-5678</span></dd>
  </div>
  <div class="dc-dl__row">
    <dt class="dc-dl__key">결제 수단</dt>
    <dd class="dc-dl__val">신용카드<span class="dc-dl__note">국민 1234 · 3개월 무이자</span></dd>
  </div>
  <div class="dc-dl__row">
    <dt class="dc-dl__key">받는 곳</dt>
    <dd class="dc-dl__val">경기도 화성시 동탄순환대로 1길 24, 삼성반도체 3공구 현장사무소</dd>
  </div>
  <div class="dc-dl__row">
    <dt class="dc-dl__key">요청 사항</dt>
    <dd class="dc-dl__val">—</dd>
  </div>
</dl>
.dc-dl {
  margin: 0; max-width: 560px;
  font-family: var(--dc-font); font-size: 13px;
}
.dc-dl__row {
  display: grid; grid-template-columns: 120px 1fr;
  gap: var(--dc-4); align-items: start;
  padding: var(--dc-3) 0;
  border-bottom: 1px solid var(--dc-line);
}
.dc-dl__row:last-child { border-bottom: 0; }
.dc-dl__key { margin: 0; font-weight: 600; color: var(--dc-text-mute); }
.dc-dl__val { margin: 0; color: var(--dc-text); line-height: 1.6; }
.dc-dl__note {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--dc-text-sub);
}
.dc-dl--stacked .dc-dl__row { grid-template-columns: 1fr; gap: var(--dc-1); }
.dc-dl--actions .dc-dl__val {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dc-3);
}
.dc-dl__action {
  position: relative;
  flex: 0 0 auto;
  min-height: 32px; padding: 0 var(--dc-2);
  border: 0; border-radius: var(--dc-r-xs);
  background: transparent; color: var(--dc-brand-text);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.dc-dl__action::before { content: ""; position: absolute; inset: -6px; }
.dc-dl__action:hover { background: var(--dc-brand-soft); }
@media (max-width: 480px) {
  .dc-dl__row { grid-template-columns: 1fr; gap: var(--dc-1); }
}

Cách dùng

  • Nhãn là danh từ ngắn; giá trị giữ nguyên như nó có
  • Ghép dt với dd — danh sách mô tả được đọc theo cặp, bảng thì không
  • Thiếu giá trị thì để dấu gạch ngang, đừng xóa dòng; không có cũng là thông tin

Điểm cần lưu ý

  • Cột nhãn cố định trên màn hình hẹp sẽ cắt giá trị hai chữ một dòng — hãy xếp dọc
  • Nếu mỗi dòng có nút sửa, nêu rõ sửa gì trong tên nút bằng dc-sr

Tiếp theo