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

Dòng thời gian

Cho thấy việc gì đã xảy ra theo thứ tự nào, mỗi sự kiện một dòng kèm ngày.

Hiển thị dữ liệu

Xem trước trực tiếp

Nguồn

<ol class="dc-tl">
  <li class="dc-tl__item is-done">
    <span class="dc-tl__dot" aria-hidden="true"></span>
    <div class="dc-tl__body">
      <time class="dc-tl__time" datetime="2026-03-04T09:12">3월 4일 09:12</time>
      <h3 class="dc-tl__title">주문 접수</h3>
      <p class="dc-tl__text">결제가 확인되었습니다. <span class="dc-sr">완료된 단계</span></p>
    </div>
  </li>
  <li class="dc-tl__item is-done">
    <span class="dc-tl__dot" aria-hidden="true"></span>
    <div class="dc-tl__body">
      <time class="dc-tl__time" datetime="2026-03-04T16:40">3월 4일 16:40</time>
      <h3 class="dc-tl__title">상품 준비</h3>
      <p class="dc-tl__text">판매자가 상품을 포장했습니다. <span class="dc-sr">완료된 단계</span></p>
    </div>
  </li>
  <li class="dc-tl__item is-now">
    <span class="dc-tl__dot" aria-hidden="true"></span>
    <div class="dc-tl__body">
      <time class="dc-tl__time" datetime="2026-03-05T08:05">3월 5일 08:05</time>
      <h3 class="dc-tl__title">배송 중</h3>
      <p class="dc-tl__text">서울 강서 물류센터를 떠났습니다. <span class="dc-sr">지금 진행 중인 단계</span></p>
    </div>
  </li>
  <li class="dc-tl__item">
    <span class="dc-tl__dot" aria-hidden="true"></span>
    <div class="dc-tl__body">
      <time class="dc-tl__time" datetime="2026-03-06">3월 6일 예정</time>
      <h3 class="dc-tl__title">배송 완료</h3>
      <p class="dc-tl__text">받는 분 부재 시 경비실에 맡깁니다. <span class="dc-sr">아직 오지 않은 단계</span></p>
    </div>
  </li>
</ol>
.dc-tl { margin:0; padding:0; list-style:none; font-family:var(--dc-font); }
.dc-tl__item { position:relative; padding:0 0 var(--dc-5) var(--dc-6); }
.dc-tl__item::before { content:""; position:absolute; top:18px; bottom:0; left:5px; width:2px; background:var(--dc-line); }
.dc-tl__item:last-child::before { content:none; }
.dc-tl__dot { position:absolute; top:5px; left:0; width:12px; height:12px; border:2px solid var(--dc-line-bold); border-radius:var(--dc-r-full); background:var(--dc-surface); }
.dc-tl__item.is-done::before { background:var(--dc-brand); }
.dc-tl__item.is-done .dc-tl__dot { border-color:var(--dc-brand); background:var(--dc-brand); }
.dc-tl__item.is-now .dc-tl__dot { border-color:var(--dc-brand); background:var(--dc-surface); box-shadow:0 0 0 4px var(--dc-brand-soft); }
.dc-tl__item.is-fail .dc-tl__dot { border-color:var(--dc-danger); background:var(--dc-danger); }
.dc-tl__item.is-fail .dc-tl__title { color:var(--dc-danger); }
.dc-tl__body { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-tl__time { font-size:12px; color:var(--dc-text-mute); font-variant-numeric:tabular-nums; }
.dc-tl__title { margin:0; font-size:15px; font-weight:600; color:var(--dc-text); }
.dc-tl__item.is-now .dc-tl__title { color:var(--dc-brand-text); }
.dc-tl__text { margin:0; font-size:13px; line-height:1.6; color:var(--dc-text-sub); }
.dc-tl--compact .dc-tl__item { padding-bottom:var(--dc-3); }
.dc-tl--compact .dc-tl__body { flex-direction:row; align-items:baseline; gap:var(--dc-3); }
.dc-tl--compact .dc-tl__time { flex:0 0 104px; }
.dc-tl--compact .dc-tl__title { font-size:14px; font-weight:600; }

Cách dùng

  • Chọn mới nhất ở trên hoặc ở dưới, đừng trộn hai kiểu trong một màn hình
  • Đừng chỉ ghi kiểu tương đối, hãy hiện cả ngày thật
  • Quá hai mươi mục thì nhóm theo ngày và cắt phần còn lại sau nút xem thêm

Điểm cần lưu ý

  • Đừng để màu điểm một mình nói trạng thái, hãy viết thành chữ
  • Thêm thuộc tính datetime cho thẻ time để máy cũng đọc được ngày

Tiếp theo