@spectrum-web-components/rule

Description

sp-rule bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.

Usage

yarn add @spectrum-web-components/rule

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

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

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

import { Rule } from '@spectrum-web-components/rule';

Horizontal

Sizes

Small Medium Large

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

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

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

Vertical

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

Sizes

Small Medium 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-rule size="s" vertical></sp-rule>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>

<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-rule size="m" vertical></sp-rule>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>

<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-rule size="l" vertical></sp-rule>
    <sp-action-button quiet label="Zoom in">
        <sp-icon-magnify slot="icon"></sp-icon-magnify>
    </sp-action-button>
</div>