Dividers are thin lines that group content in lists and layouts. They separate sections horizontally or vertically.
Variants
Full-width
Inset (16px left)
Middle inset
Vertical
Item A
Item B
Item C
<!-- Full-width --> <div class="dv-line"></div> <!-- Inset (16px left) --> <div class="dv-line" style="margin-left:16px;"></div> <!-- Middle inset --> <div class="dv-line" style="margin:0 16px;"></div> <!-- Vertical --> <div style="display:flex;align-items:center;gap:16px;"> <span>Item A</span> <div class="dv-vline"></div> <span>Item B</span> </div>
Specs
| Property | Value | Token |
|---|---|---|
| Thickness | 1px | divider.thickness |
| Color | #DCE4E1 | color.outline-variant |
| Inset offset | 16px | divider.inset |