hr

Since UXP v2.0

Renders a horizontal rule.

The horizontal rule is not theme-aware. If you want theme-aware elements, you should use the Spectrum UXP correlates, or you can style them manually based upon the prefers-color-scheme media query.

See: https://developer.mozilla.org/en/docs/Web/HTML/Element/hr

Example

<hr class="large" />
<hr class="medium" /> <!-- default -->
<hr class="small" />
Copied to your clipboard
1<hr class="large" />
2<hr class="medium" /> <!-- default -->
3<hr class="small" />

Spectrum UXP Correlate

When using Spectrum UXP, you can get a similar rendering using sp-divider.

<sp-divider size="large"></sp-divider>
<sp-divider size="medium"></sp-divider>
<sp-divider size="small"></sp-divider> <!-- default -->
Copied to your clipboard
1<sp-divider size="large"></sp-divider>
2<sp-divider size="medium"></sp-divider>
3<sp-divider size="small"></sp-divider> <!-- default -->

Spectrum UXP Reference

Was this helpful?

Yes

hr

Spectrum UXP Correlate.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

Spectrum UXP Correlate