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
<hr class="large" />
<hr class="medium" /> <!-- default -->
<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
<sp-divider size="large"></sp-divider>
<sp-divider size="medium"></sp-divider>
<sp-divider size="small"></sp-divider> <!-- default -->

Spectrum UXP Reference

Last updated 3/8/2023

Was this helpful?

Yes

hr

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

Spectrum UXP Correlate