role presentation
Divider draft v0.1.0
A thin line that separates two groups of content.
A divider is a hairline between two sections of content or two groups of controls: between items of a list, between a header and a body, between the actions of a toolbar. It is horizontal by default and vertical inside a row. A divider says that a topic or a group changes; spacing alone often says it as well, so a divider is used when the separation must be seen.
Playground
Token inspector
Part container
Not rendered in this configuration.
-
color from default
{global.border.base.neutral.4}Details
- Resolves through
light-switch.base.400 rawneutral.light.ash.400 raw- Value
-
#B6B4B4dark:#363636 - CSS
--divider-container-color- Token
divider.container.color- Decisions
-
border-width from default
{stroke-width.sm}Details
- Value
-
0.6px - CSS
--divider-container-border-width- Token
divider.container.border-width- Decisions
-
margin-block
horizontalfrom default{space.16}Details
- Value
-
16px - CSS
--divider-container-margin-block-horizontal- Token
divider.container.margin-block.horizontal- Decisions
-
margin-inline
verticalfrom default{space.16}Details
- Value
-
16px - CSS
--divider-container-margin-inline-vertical- Token
divider.container.margin-inline.vertical- Decisions
-
min-height
verticalfrom default{space.24}Details
- Value
-
24px - CSS
--divider-container-min-height-vertical- Token
divider.container.min-height.vertical- Decisions
<hr class="ds-divider" data-orientation="horizontal">