A horizontal or block-axis separator with an optional label. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
divider,divider--block
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<p>First section</p>
<hr class="divider">
<p>Second section</p>Variants and composition
divider is the inline-axis rule; divider–block restores automatic height for a vertical hr. A child label creates space in the rule.
Behavior and accessibility
Use hr for a thematic break or a decorative element with aria-hidden=true. For a labelled separator, ensure the label remains readable; block-axis dividers need an appropriate orientation.
Reference
See the interactive Storybook specimen. Continue to Dock or return to the Official preset overview.