Skip to content
LSD Framework
Component · break

Dividers

A line that knows what it's separating. Six expressions — solid, dashed, dotted, labelled, vertical, faded, drawn, ornamented.

01 · Solid / dashed / dotted / accent.lsd-rule
02 · Labelled · pseudo-rule before / after.lsd-divider
or
break · then resume
section · 02
03 · Vertical · controlled height.lsd-rule-v
Galaxy Constellation Orion Aurora belt
04 · Gradient fade · edges dissolve.lsd-rule--fade
05 · Drawn SVG · stroke-dashoffset.lsd-rule-draw
06 · Ornament · CSS-drawn star node.lsd-divider-ornament
View HTML — minimal markup 
<hr class="lsd-rule" />
<hr class="lsd-rule lsd-rule--dashed" />
<hr class="lsd-rule lsd-rule--fade" />

<div class="lsd-divider"><span>or</span></div>

<span class="lsd-rule-v"></span>

<div class="lsd-divider-ornament">
  <span class="lsd-divider-ornament__node">
    <span class="lsd-divider-ornament__dot"></span>
  </span>
</div>