Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Divider

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

Horizontal

Full-width
Inset
Middle-inset

Subhead

Vertical

Full-width
Inset
Middle-inset

Dark Theme

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>