A thin rule between content
Separates stacked content with a hairline rule in the divider colour. Horizontal by default, with an optional inline label and a vertical orientation for flex rows. Use it inside forms, lists, and cards — page sections under an h2 heading already carry their own divider.
Default
The plain divider renders a semantic hr element, one pixel tall in the divider colour.
It spans the full width of its container with a 16px block margin by default.
With label
Sign in with your email address.
or
Continue with a provider instead.
A start-positioned label reads as a quiet inline heading.
Details
Everything after the rule belongs to the labelled group.
Vertical
EditDuplicateDelete
Spacing
none — 0
sm — 8px
md — 16px (default)
lg — 20px
End of scale.