@spectrum-web-components/divider

Overview

sp-divider brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.

View the design documentation for this component.

$3


``zsh
yarn add @spectrum-web-components/divider
`

Import the side effectful registration of via:

`js
import '@spectrum-web-components/divider/sp-divider.js';
`

When looking to leverage the Divider base class as a type and/or for extension purposes, do so via:

`js
import { Divider } from '@spectrum-web-components/divider';
`

$3

Horizontal dividers are used to separate content stacked vertically.


Small


`html


Small

The small divider is used to divide similar components such as table rows,
action button groups, and components within a panel.

`

Medium

`html


Medium

The medium divider is used to divide subsections on a page, or to separate
different groups of components such as panels, rails, etc.

`

Large

`html


Large

The large divider should be used only for page titles or section titles.

`

#### Vertical

Vertical dividers are used to separate content horizontally.

When a vertical divider is used inside of a flex container, use align-self: stretch; height: auto; on the divider.


Small


`html



`

Medium

`html



`

Large

`html



`

#### Static color

Use the static color option when a divider needs to be placed on top of a color background or visual. Static color dividers are available in black or white regardless of color theme.

Static black

`html
style="background-color: var(--spectrum-docs-static-black-background-color); color: var(--spectrum-black); padding: 20px"
>



Static black on light background


Use static black on light color or image backgrounds.