Rule

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/rule@2.0.0

Variants#


Large#
Verified

Large


Page or Section Titles.

<h2 class="spectrum-Heading--subtitle1">Large</h2>
<hr class="spectrum-Rule spectrum-Rule--large">
<p class="spectrum-Body">Page or Section Titles.</p>
Show markup

Medium#
Verified

Medium


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

<h3 class="spectrum-Heading--subtitle2">Medium</h3>
<hr class="spectrum-Rule spectrum-Rule--medium">
<p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>
Show markup

Small#
Verified

Small


Divide like-elements (tables, tool groups, elements within a panel, etc.)

<h4 class="spectrum-Heading--subtitle3">Small</h4>
<hr class="spectrum-Rule spectrum-Rule--small">
<p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
Show markup

Vertical, Small#
Verified

When a vertical Rule is used inside of a flex container, use align-self: stretch; height: auto on the Rule. ButtonGroup automatically applies these styles to vertical Rules.

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
      <use xlink:href="#spectrum-icon-18-Properties" />
    </svg>
  </button>
  <div class="spectrum-Rule spectrum-Rule--small spectrum-Rule--vertical"></div>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>
</div>
Show markup

Vertical, Medium#
Verified

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
      <use xlink:href="#spectrum-icon-18-Properties" />
    </svg>
  </button>
  <div class="spectrum-Rule spectrum-Rule--medium spectrum-Rule--vertical"></div>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>
</div>
Show markup