sp-divider

NPM 1.4.0

View Storybook

Try it on webcomponents.dev
Overview API Changelog

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 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>

Medium

Divide subsections, or divide different groups of elements (between panels, rails, etc.)

Large

Vertical

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

Small 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"
        style="align-self: stretch; height: auto;"
        vertical
    ></sp-divider>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>
 Large