Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Garis waktu

Menunjukkan apa yang terjadi dalam urutan apa, satu baris per kejadian beserta tanggalnya.

Tampilan data

Pratinjau langsung

Sumber

<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; }

Cara memakainya

  • Pilih terbaru di atas atau di bawah, jangan campur keduanya dalam satu layar
  • Jangan hanya menulis waktu relatif, tampilkan tanggal sebenarnya juga
  • Lewat dua puluh entri, kelompokkan per tanggal dan sisanya sembunyikan di balik lihat lainnya

Hal yang perlu diwaspadai

  • Jangan biarkan warna titik menjadi satu-satunya penanda status; tulis juga sebagai teks
  • Beri atribut datetime pada elemen time agar mesin bisa membaca tanggalnya

Berikutnya