@spectrum-web-components/rule

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 no npm install needed!

<script type="module">
  import spectrumWebComponentsRule from 'https://cdn.skypack.dev/@spectrum-web-components/rule';
</script>

README

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

See it on NPM! How big is this package in your project?

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>