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

<div style="display: flex; flex-direction: row; height: 32px">
  <div class="spectrum-ButtonGroup">
    <button class="spectrum-Tool">
      <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>
  <div class="spectrum-Rule spectrum-Rule--small spectrum-Rule--vertical"></div>
  <div class="spectrum-ButtonGroup">
    <button class="spectrum-Tool">
      <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>
</div>
Show markup

Vertical, Medium#
Verified

<div style="display: flex; flex-direction: row; height: 32px">
  <div class="spectrum-ButtonGroup">
    <button class="spectrum-Tool">
      <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>
  <div class="spectrum-Rule spectrum-Rule--medium spectrum-Rule--vertical"></div>
  <div class="spectrum-ButtonGroup">
    <button class="spectrum-Tool">
      <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>
</div>
Show markup