Pemisah
Satu garis tipis, untuk saat jarak kosong saja belum cukup menunjukkan dua blok itu terpisah.
Pratinjau langsung
Sumber
<div class="dc-divide">
<p class="dc-divide__text">지원 서류는 회사가 확인한 뒤 연락합니다.</p>
<hr class="dc-divide__rule" />
<p class="dc-divide__text">연락이 오지 않으면 7일 뒤에 다시 물어볼 수 있습니다.</p>
</div>.dc-divide { font-family:var(--dc-font); }
.dc-divide__text { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-divide__rule { height:1px; margin:var(--dc-5) 0; border:0; background:var(--dc-line); }
.dc-divide__labeled { display:flex; align-items:center; gap:var(--dc-3); margin:var(--dc-5) 0; }
.dc-divide__labeled::before, .dc-divide__labeled::after { content:""; flex:1 1 0; height:1px; background:var(--dc-line); }
.dc-divide__label { font-size:12px; font-weight:600; color:var(--dc-text-mute); }
.dc-divide__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--dc-2); margin:0; font-size:13px; color:var(--dc-text-sub); }
.dc-divide__mitem { white-space:nowrap; }
.dc-divide__vr { flex:0 0 auto; width:1px; height:1em; background:var(--dc-line-bold); }
Cara memakainya
- Kalau jarak sudah memisahkan, garisnya tidak perlu — garis dipakai saat ruang kurang
- Beri jarak atas dan bawah yang sama; kalau tidak, garisnya terlihat menempel ke satu sisi
- Kalau alasan pemisahan bisa disebut — "atau" — pakai pemisah berlabel
Hal yang perlu diwaspadai
- Untuk pemisah yang cuma visual pakai border, bukan hr, dan beri aria-hidden pada garis vertikal hiasan
- Biarkan warnanya --dc-line; kalau dipekatkan, garisnya lebih mencolok daripada isinya