Divider

A line that separates content, horizontally or vertically, with an optional label.

CSS only components/divider.css

Lines

Pay by bank transfer

Pay by card

<p class="dsgn-body-s">Pay by bank transfer</p><div class="dsgn-divider" role="separator"><span>or</span></div><p class="dsgn-body-s">Pay by card</p>
<div class="dsgn-cluster"><button class="dsgn-icon-button" data-variant="ghost" data-intent="neutral" aria-label="Edit"><span class="dsgn-icon" aria-hidden="true">edit</span></button><hr class="dsgn-divider" data-orientation="vertical"><button class="dsgn-icon-button" data-variant="ghost" data-intent="danger" aria-label="Delete"><span class="dsgn-icon" aria-hidden="true">delete</span></button></div>

Usage

A hairline in the border colour. Decorative lines inside components use box-shadow; use this only between independent blocks. Vertical dividers stretch to the row height.

Details

Classes: .dsgn-divider
Tokens used: --dsgn-border --dsgn-border-width --dsgn-control-line-height --dsgn-font-sans --dsgn-font-size-caption --dsgn-line-height-caption --dsgn-space-12 --dsgn-stack --dsgn-text-muted
In Figma: Divider
Import alone: dsgn.systems/components/divider.css