Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Divider

One thin line, for when whitespace alone isn't enough to show that two blocks are separate.

Layout

Live preview

Source

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

How to use it

  • If spacing already separates the blocks, leave the line out — a rule is what you add when space runs short
  • Keep equal space above and below; uneven space makes the line look attached to one side
  • When you can name the reason for the break — "or" — use a divider with a label in it

Watch out for

  • For a purely visual break use a border rather than hr, and mark decorative vertical rules aria-hidden
  • Keep the line at --dc-line; darken it and the divider reads louder than the content

Next