A Separator fills its container along its axis: full width when horizontal, full height when vertical. It reserves no spacing of its own, so the surrounding layout sets the gap.
Orientation
Vertical
Default density
Compact density
Restart from the initial state
Show the copyable source
A vertical Separator takes the height of its container, so give the row a block size or let a flex row stretch it.
Sections
Between sections
Default density
Compact density
Restart from the initial state
Show the copyable source
PlanTeam, billed yearly
Seats12 of 15
Next invoice$1,440.00 on March 1
PlanTeam, billed yearly
Seats12 of 15
Next invoice$1,440.00 on March 1
<div style="display:grid;gap:var(--tp-space-4);max-inline-size:24rem;margin-inline:auto">
<div style="display:flex;justify-content:space-between">
<span>Plan</span>
<strong>Team, billed yearly</strong>
</div>
<div style="display:flex;justify-content:space-between">
<span>Seats</span>
<strong>12 of 15</strong>
</div>
<tp-separator></tp-separator>
<div style="display:flex;justify-content:space-between">
<span>Next invoice</span>
<strong>$1,440.00 on March 1</strong>
</div>
</div>
Separators are decorative by default and hidden from assistive technology. Set the decorative property to false when the rule marks a real boundary between groups; it then exposes role="separator" with its orientation.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptiondecorativedecorativebooleantrueSet to false when the rule marks a boundary between groups, so assistive technology announces it as a separator.
CSS parts
PartDescription::part(root)The rule's inner element, which carries the separator role when it is not decorative.
Related
Components, widgets and patterns that use this one.