sp-divider

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'
size size ElementSize
vertical vertical boolean false

CSS Custom Properties #

Name Default
--spectrum-divider-l-background-color var(--spectrum-global-color-gray-800)
--spectrum-divider-l-height var(--spectrum-global-dimension-size-50)
--spectrum-divider-l-vertical-height var(--spectrum-global-dimension-size-50)
--spectrum-divider-l-vertical-width var(--spectrum-global-dimension-size-50)
--spectrum-divider-m-background-color var(--spectrum-global-color-gray-300)
--spectrum-divider-m-height var(--spectrum-global-dimension-size-25)
--spectrum-divider-m-vertical-height var(--spectrum-global-dimension-size-25)
--spectrum-divider-m-vertical-width var(--spectrum-global-dimension-size-25)
--spectrum-divider-s-background-color var(--spectrum-global-color-gray-300)
--spectrum-divider-s-height var(--spectrum-global-dimension-size-10)
--spectrum-divider-s-vertical-height var(--spectrum-global-dimension-size-10)
--spectrum-divider-s-vertical-width var(--spectrum-global-dimension-size-10)

Description #

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.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/divider

Import the side effectful registration of <sp-divider> via:

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:

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

Horizontal #

Small #

<h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
<sp-divider size="s"></sp-divider>
<p class="spectrum-Body">
Divide like-elements (tables, tool groups, elements within a panel, etc.)
</p>

Medium #

<h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
<sp-divider size="m"></sp-divider>
<p class="spectrum-Body">
Divide subsections, or divide different groups of elements (between panels,
rails, etc.)
</p>

Large #

<h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
<sp-divider size="l"></sp-divider>
<p class="spectrum-Body">Page or Section Titles.</p>

Vertical #

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

Small #

<div style="height: 32px; display: flex;">
<sp-action-button quiet label="Zoom in">
<sp-icon-magnify slot="icon"></sp-icon-magnify>
</sp-action-button>
<sp-divider size="s" vertical></sp-divider>
<sp-action-button quiet label="Zoom in">
<sp-icon-magnify slot="icon"></sp-icon-magnify>
</sp-action-button>
</div>

Medium #

<div style="height: 32px; display: flex;">
<sp-action-button quiet label="Zoom in">
<sp-icon-magnify slot="icon"></sp-icon-magnify>
</sp-action-button>
<sp-divider size="m" vertical></sp-divider>
<sp-action-button quiet label="Zoom in">
<sp-icon-magnify slot="icon"></sp-icon-magnify>
</sp-action-button>
</div>

Large #

<div style="height: 32px; display: flex;">
<sp-action-button quiet label="Zoom in">
<sp-icon-magnify slot="icon"></sp-icon-magnify>
</sp-action-button>
<sp-divider size="l" vertical></sp-divider>
<sp-action-button quiet label="Zoom in">
<sp-icon-magnify slot="icon"></sp-icon-magnify>
</sp-action-button>
</div>