Divider

Plain CSS implementation of the Figma Dividers section, node 841:1916.

Horizontal

Full-width

Inset

Middle-inset

Subhead

Subheader

Vertical

Full-width

Inset

Middle-inset

Dark Theme

Subheader

CSS API

Use <hr> for decorative horizontal separation, or role="separator" with aria-orientation="vertical" when the divider is meaningful to assistive technology.

<hr class="sui-divider sui-divider--middle-inset" aria-hidden="true">

<div class="sui-divider sui-divider--vertical" role="separator" aria-orientation="vertical"></div>

<div class="sui-divider sui-divider--with-subhead" role="separator" aria-labelledby="section-label">
  <p class="sui-divider__label" id="section-label">Subheader</p>
</div>