Adobe Spectrum Logospectrum-css 2.6.0

Spectrum
4

Accordion

Precursor
CSS Unverified

The default variant of accordion

Header 1
Item 1
Header 2
Item 1
Header 2
Item 1
Header 3
Item 1
Show Markup
<div class="spectrum-Accordion">
  <div class="spectrum-Accordion-item is-open">
    <div class="spectrum-Accordion-itemHeader" tabindex="0">Header 1</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item is-disabled">
    <div class="spectrum-Accordion-itemHeader">Header 2</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item">
    <div class="spectrum-Accordion-itemHeader" tabindex="0">Header 2</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
  <div class="spectrum-Accordion-item">
    <div class="spectrum-Accordion-itemHeader" tabindex="0">Header 3</div>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Accordion-itemIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
    <div class="spectrum-Accordion-itemContent">Item 1</div>
  </div>
</div>

Action Button

Canon
CSS Verified

The default variant of Action Button









Show Markup
<button class="spectrum-ActionButton">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton is-selected">
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

<button class="spectrum-ActionButton" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>


<button class="spectrum-ActionButton is-selected" disabled>
  <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
    <g fill-rule="evenodd">
      <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
      <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
      <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
      <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
      <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
      <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
      <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
      <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
      <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
      <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
      <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
      <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
      <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
    </g>
  </svg>
  <span class="spectrum-ActionButton-label">Button</span>
</button>

Action Button - Quiet

Canon
CSS Verified

An Actionbutton that is quiet





Show Markup
<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-ActionButton-label">Edit</span>
</button>

<br><br>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
</button>

<br><br>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CornerTriangle" />
  </svg>
</button>

Action Menu

Beta Precursor
CSS Unverified

Simply an action button with a Popover. Note that the is-selected class should be applied to the button when the menu is open. Also note the accessibility roles are different for an action menu vs a normal menu.



Show Markup
<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 1</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 2</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 3</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
</button>
<br>

<div class="spectrum-Popover spectrum-Popover--bottom is-open">
  <ul class="spectrum-Menu" role="menu">
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 1</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 2</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 3</span>
    </li>
    <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Action 4</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-More" />
  </svg>
  <span class="spectrum-ActionButton-label">More Actions</span>
</button>

Alert - Closable

Beta Precursor
CSS Unverified

An Alert with a close button in the footer. Combine this strategy with any variant.

Incorrect Payment Information - Error
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Incorrect Payment Information - Error</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
  <div class="spectrum-Alert-footer">
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">Close</button>
  </div>
</div>

Alert - Error

Precursor
CSS Unverified

The error variant of Alert

Error Alert - Oh no
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--error">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Error Alert - Oh no</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Help

Precursor
CSS Unverified

The help variant of Alert

Infomation Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--help">
  <svg class="spectrum-Icon spectrum-UIIcon-HelpMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-HelpMedium" />
  </svg>
  <div class="spectrum-Alert-header">Infomation Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Info

Precursor
CSS Unverified

The info variant of Alert

Infomation Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--info">
  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
  <div class="spectrum-Alert-header">Infomation Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Success

Precursor
CSS Unverified

The success variant of Alert

Successful Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--success">
  <svg class="spectrum-Icon spectrum-UIIcon-SuccessMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-SuccessMedium" />
  </svg>
  <div class="spectrum-Alert-header">Successful Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Alert - Warning

Precursor
CSS Unverified

The warning variant of Alert

Warning Alert Header
This is an alert.
Show Markup
<div class="spectrum-Alert spectrum-Alert--warning">
  <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Alert-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-AlertMedium" />
  </svg>
  <div class="spectrum-Alert-header">Warning Alert Header</div>
  <div class="spectrum-Alert-content">This is an alert.</div>
</div>

Asset List

Beta Precursor
CSS Unverified

A selectable list of Assets, often used inside of Miller Columns.

  • Shantanu.jpg
  • Resource Allocation.csv
  • Frontend Projects
Show Markup
<ul class="spectrum-AssetList">
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" tabindex="-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
    <span class="spectrum-AssetList-itemLabel">Shantanu.jpg</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
  <li class="spectrum-AssetList-item is-selectable" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1">
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="FileCSV">
      <use xlink:href="#spectrum-icon-24-FileCSV"></use>
    </svg>
    <span class="spectrum-AssetList-itemLabel">Resource Allocation.csv</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
  <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
    <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
      <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" checked>
      <span class="spectrum-Checkbox-box">
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
        </svg>
      </span>
    </label>
    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-24-Folder"></use>
    </svg>
    <span class="spectrum-AssetList-itemLabel">Frontend Projects</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
    </svg>
  </li>
</ul>

Avatar

Canon
CSS Verified

The small variant of Avatar

Avatar Disabled Avatar
Show Markup
<img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">

The Spectrum banner 'corner placement'

Most Popular
Includes Illustrator CC
Show Markup
<div style="width: 255px; height: 325px; background-color: #ccc; position: relative;">
  <div class="spectrum-Banner spectrum-Banner--info spectrum-Banner--corner">
    <div class="spectrum-Banner-header">Most Popular</div>
    <div class="spectrum-Banner-content">Includes Illustrator CC</div>
  </div>
</div>

The error variant of Banner

Purchase Soon
Trial expires in 2 days
Show Markup
<div class="spectrum-Banner spectrum-Banner--error">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Trial expires in 2 days</div>
</div>

The info variant of Banner

Most Popular
Includes Illustrator CC
Show Markup
<div class="spectrum-Banner spectrum-Banner--info">
  <div class="spectrum-Banner-header">Most Popular</div>
  <div class="spectrum-Banner-content">Includes Illustrator CC</div>
</div>

The warning variant of Banner

Purchase Soon
Your trial is about to expire
Show Markup
<div class="spectrum-Banner spectrum-Banner--warning">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Your trial is about to expire</div>
</div>

Bar Loader

Canon
CSS Unverified

Large variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Loading
50%
Show Markup
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

Bar Loader - Meter

Beta Precursor
CSS Unverified
Storage Space
50%
Storage Space
80%
Storage Space
90%
Show Markup
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-warning" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">80%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 80%;"></div>
    </div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader is-critical" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Storage Space</div>
    <div class="spectrum-BarLoader-percentage">90%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 90%;"></div>
    </div>
  </div>
</div>

Bar Loader - Over Background

Canon
CSS Unverified

The Large Over Color variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Show Markup
<div style="width: 400px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div>
    <div class="spectrum-BarLoader spectrum-BarLoader--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-BarLoader-label">Loading</div>
      <div class="spectrum-BarLoader-percentage">50%</div>
      <div class="spectrum-BarLoader-track">
        <div class="spectrum-BarLoader-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
</div>

Bar Loader - Over Background Small

Canon
CSS Unverified

The small, over color variant of a Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Show Markup
<div style="width: 400px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div>
    <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--overBackground" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
      <div class="spectrum-BarLoader-label">Loading</div>
      <div class="spectrum-BarLoader-percentage">50%</div>
      <div class="spectrum-BarLoader-track">
        <div class="spectrum-BarLoader-fill" handle="status" style="width: 50%;"></div>
      </div>
    </div>
  </div>
</div>

Bar Loader - Small

Canon
CSS Unverified

The small variant of Bar Loader. A bar loader shows the progression of an operation.

Loading
50%
Loading
50%
Show Markup
<div style="width: 200px; height: 25px; padding-top: 10px;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
    <div class="spectrum-BarLoader-label" hidden=""></div>
  </div>
</div>
<div style="margin: 20px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>
<div style="margin: 50px 0;">
  <div class="spectrum-BarLoader spectrum-BarLoader--small spectrum-BarLoader--sideLabel" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="spectrum-BarLoader-label">Loading</div>
    <div class="spectrum-BarLoader-percentage">50%</div>
    <div class="spectrum-BarLoader-track">
      <div class="spectrum-BarLoader-fill" style="width: 50%;"></div>
    </div>
  </div>
</div>

The default variant of Breadcrumb

Show Markup
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Shoes</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nike</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Mens</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">Summer 2016</a>
    </li>
  </ul>
</nav>

Used for the Title variant of a Breadcrumb

Show Markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--title">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Home</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Playground</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <h1 class="spectrum-Heading--pageTitle">
        <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">Sliders</a>
      </h1>
    </li>
  </ul>
</nav>

Button - CTA

Canon
CSS Verified

Actions that require high visibility

Show Markup
<button class="spectrum-Button spectrum-Button--cta">
  <span class="spectrum-Button-label">Button</span>
</button>
<button class="spectrum-Button spectrum-Button--cta" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Over Background

Canon
CSS Verified

For any button used on top of a background

A Spectrum button that's meant to be placed over a non-standard color. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Show Markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>

Button - Primary

Canon
CSS Verified

For primary user actions



Button Button



Edit Edit
Show Markup
<button class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

<br><br>

<a role="button" href="#" class="spectrum-Button spectrum-Button--primary">
  <span class="spectrum-Button-label">Button</span>
</a>

<a role="button" class="spectrum-Button spectrum-Button--primary is-disabled">
  <span class="spectrum-Button-label">Button</span>
</a>

<br><br>

<button class="spectrum-Button spectrum-Button--primary">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</button>

<button class="spectrum-Button spectrum-Button--primary" disabled>
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</button>

<br><br>

<a class="spectrum-Button spectrum-Button--primary">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

<a class="spectrum-Button spectrum-Button--primary is-disabled">
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
    <use xlink:href="#spectrum-icon-18-Edit" />
  </svg>
  <span class="spectrum-Button-label">Edit</span>
</a>

Button - Quiet Over Background

Canon
CSS Verified

For any quiet button used on top of a background

A Spectrum quiet button that's meant to be placed over a non-standard color. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Show Markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>

Button - Quiet Primary

Canon
CSS Verified

For primary user actions

Show Markup
<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Quiet Secondary

Canon
CSS Verified

For secondary user actions

Show Markup
<button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Quiet Warning

Canon
CSS Verified

For destructive actions

Show Markup
<button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--warning spectrum-Button--quiet" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Secondary

Canon
CSS Verified

For secondary user actions

Show Markup
<button class="spectrum-Button spectrum-Button--secondary">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--secondary" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button - Warning

Canon
CSS Verified

For actions that are destructive

Show Markup
<button class="spectrum-Button spectrum-Button--warning">
  <span class="spectrum-Button-label">Button</span>
</button>

<button class="spectrum-Button spectrum-Button--warning" disabled>
  <span class="spectrum-Button-label">Button</span>
</button>

Button Group

Canon
CSS Unverified

Group of buttons






Show Markup
<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
    <span class="spectrum-ActionButton-label">Normal</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <span class="spectrum-ActionButton-label">Selected</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <span class="spectrum-ActionButton-label">Disabled</span>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <span class="spectrum-ActionButton-label">Disabled Selected</span>
  </button>
</div>

<br>

<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="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
  <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
      <use xlink:href="#spectrum-icon-18-Delete" />
    </svg>
  </button>
</div>

<br><br>

<div class="spectrum-ButtonGroup">
  <button class="spectrum-Tool">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
      <use xlink:href="#spectrum-icon-18-Brush" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool" disabled>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
      <use xlink:href="#spectrum-icon-18-Select" />
    </svg>
  </button>

  <button class="spectrum-Tool is-selected" disabled>
    <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>

Button Group (vertical)

Beta Precursor
CSS Unverified
Show Markup

<div style="display: flex; justify-content: space-between; width: 400px;">

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
        <use xlink:href="#spectrum-icon-18-Properties" />
      </svg>
      <span class="spectrum-ActionButton-label">Properties</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Info">
        <use xlink:href="#spectrum-icon-18-Info" />
      <span class="spectrum-ActionButton-label">Info</span>
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="ViewAllTags">
        <use xlink:href="#spectrum-icon-18-ViewAllTags" />
      <span class="spectrum-ActionButton-label">Keywords</span>
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

  <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical">
    <button class="spectrum-Tool">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Brush">
        <use xlink:href="#spectrum-icon-18-Brush" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool" disabled>
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
        <use xlink:href="#spectrum-icon-18-Select" />
      </svg>
    </button>

    <button class="spectrum-Tool is-selected" disabled>
      <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>

Calendar

Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date is-today">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Calendar - Disabled

Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth" disabled>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth" disabled>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" aria-readonly="true" aria-disabled="true">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="true" aria-invalid="false" title="Today, Wednesday, August 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled is-today">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-disabled">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Calendar - Focused

Precursor
CSS Unverified

The default Calendar element

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date is-today is-focused">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-focused">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-focused">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
  </div>
</div>

Calendar - Range Selection

Precursor
CSS Unverified

The default Calendar element

A calendar with a range selected. .is-selection-start goes on the first day in the selection, and .is-range-start goes on the first day of each week or month in the middle of a selection (but not the first day of the selection). .is-selection-end goes on the last day of the selection, and .is-range-end goes on the last day of each week or month in the middle of the selection (but not on the last day of the selection).

August 2017
Show Markup
<div class="spectrum-Calendar">
   <div class="spectrum-Calendar-header">
      <div class="spectrum-Calendar-title" role="heading" aria-live="assertive" aria-atomic="true">August 2017</div>
      <button aria-label="Previous" title="Previous" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronLeftLarge" />
        </svg>
      </button>
      <button aria-label="Next" title="Next" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth">
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightLarge" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightLarge" />
        </svg>
      </button>
   </div>
   <div class="spectrum-Calendar-body" role="grid" tabindex="0" aria-readonly="true" aria-disabled="false">
     <table role="presentation" class="spectrum-Calendar-table">
        <thead role="presentation">
           <tr role="row">
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Sunday">Su</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Monday">Mo</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Tuesday">Tu</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Wednesday">We</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Thursday">Th</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Friday">Fr</abbr></th>
              <th role="columnheader" scope="col" class="spectrum-Calendar-tableCell"><abbr class="spectrum-Calendar-dayOfWeek" title="Saturday">Sa</abbr></th>
           </tr>
        </thead>
        <tbody role="presentation">
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, July 30, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, July 31, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 1, 2017"><span role="presentation" class="spectrum-Calendar-date">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Today, Wednesday, August 2, 2017 selected"><span role="presentation" class="spectrum-Calendar-date">2</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 3, 2017"><span role="presentation" class="spectrum-Calendar-date">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 4, 2017"><span role="presentation" class="spectrum-Calendar-date">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 5, 2017"><span role="presentation" class="spectrum-Calendar-date">5</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 6, 2017"><span role="presentation" class="spectrum-Calendar-date">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 7, 2017"><span role="presentation" class="spectrum-Calendar-date">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-selection-start">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection">9</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Thursday, August 10, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection">10</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Friday, August 11, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-today">11</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Saturday, August 12, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-range-end">12</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Sunday, August 13, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-range-start">13</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="true" aria-invalid="false" title="Monday, August 14, 2017"><span role="presentation" class="spectrum-Calendar-date is-selected is-range-selection is-selection-end">14</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 15, 2017"><span role="presentation" class="spectrum-Calendar-date">15</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 16, 2017"><span role="presentation" class="spectrum-Calendar-date">16</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 17, 2017"><span role="presentation" class="spectrum-Calendar-date">17</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 18, 2017"><span role="presentation" class="spectrum-Calendar-date">18</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 19, 2017"><span role="presentation" class="spectrum-Calendar-date">19</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 20, 2017"><span role="presentation" class="spectrum-Calendar-date">20</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 21, 2017"><span role="presentation" class="spectrum-Calendar-date">21</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 22, 2017"><span role="presentation" class="spectrum-Calendar-date">22</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 23, 2017"><span role="presentation" class="spectrum-Calendar-date">23</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 24, 2017"><span role="presentation" class="spectrum-Calendar-date">24</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Friday, August 25, 2017"><span role="presentation" class="spectrum-Calendar-date">25</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Saturday, August 26, 2017"><span role="presentation" class="spectrum-Calendar-date">26</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Sunday, August 27, 2017"><span role="presentation" class="spectrum-Calendar-date">27</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Monday, August 28, 2017"><span role="presentation" class="spectrum-Calendar-date">28</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Tuesday, August 29, 2017"><span role="presentation" class="spectrum-Calendar-date">29</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Wednesday, August 30, 2017"><span role="presentation" class="spectrum-Calendar-date">30</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" tabindex="-1" aria-disabled="false" aria-selected="false" aria-invalid="false" title="Thursday, August 31, 2017"><span role="presentation" class="spectrum-Calendar-date">31</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 1, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">1</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 2, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">2</span></td>
           </tr>
           <tr role="row">
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Sunday, September 3, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">3</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Monday, September 4, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">4</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Tuesday, September 5, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">5</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Wednesday, September 6, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">6</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Thursday, September 7, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">7</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Friday, September 8, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">8</span></td>
              <td role="gridcell" class="spectrum-Calendar-tableCell" aria-disabled="true" aria-selected="false" aria-invalid="false" title="Saturday, September 9, 2017"><span role="presentation" class="spectrum-Calendar-date is-outsideMonth">9</span></td>
           </tr>
        </tbody>
     </table>
   </div>
</div>

Card

Precursor
CSS Unverified

The Default variant of Card

The standard Card component with cover photo and footer.

Card Title
jpg
Show Markup
<div style="width: 208px;">
  <div class="spectrum-Card">
    <div class="spectrum-Card-coverPhoto" style="background-image: url(https://git.corp.adobe.com/pages/govett/photos/photos/DSC06369.jpg)"></div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Card Title</div>
        <div class="spectrum-Card-actionButton">
          <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>
        </div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
    <div class="spectrum-Card-footer">
      Footer
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

A spectrum gallery card for an image

Show Markup
<div style="width: 532px; height: 224px;">
  <div class="spectrum-Card spectrum-Card--gallery">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="https://git.corp.adobe.com/pages/govett/photos/photos/DSC01822-Pano.jpeg" />
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
        <div class="spectrum-Card-subtitle">jpg</div>
        <div class="spectrum-Card-description">10/15/18</div>
        <div class="spectrum-Card-actionButton">
          <div style="display: inline-block;">
            <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-icon-18-More" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, File

Beta Precursor
CSS Unverified

A spectrum Quiet Card for a file asset

FileName
pdf
Show Markup
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <svg viewBox="0 0 128 128" class="spectrum-Asset-file">
          <g>
            <path class="spectrum-Asset-fileBackground" d="M24,126c-5.5,0-10-4.5-10-10V12c0-5.5,4.5-10,10-10h61.5c2.1,0,4.1,0.8,5.6,2.3l20.5,20.4c1.5,1.5,2.4,3.5,2.4,5.7V116c0,5.5-4.5,10-10,10H24z"></path>
            <g>
              <path class="spectrum-Asset-fileOutline" d="M113.1,23.3L92.6,2.9C90.7,1,88.2,0,85.5,0H24c-6.6,0-12,5.4-12,12v104c0,6.6,5.4,12,12,12h80c6.6,0,12-5.4,12-12V30.4C116,27.8,114.9,25.2,113.1,23.3z M90,6l20.1,20H92c-1.1,0-2-0.9-2-2V6z M112,116c0,4.4-3.6,8-8,8H24c-4.4,0-8-3.6-8-8V12c0-4.4,3.6-8,8-8h61.5c0.2,0,0.3,0,0.5,0v20c0,3.3,2.7,6,6,6h20c0,0.1,0,0.3,0,0.4V116z"></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">FileName</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">pdf</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
          <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, Folder

Beta Precursor
CSS Unverified

A spectrum Quiet Card for a folder asset

FolderName
folder
Show Markup
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <svg viewBox="0 0 32 32" class="spectrum-Asset-folder">
          <path class="spectrum-Asset-folderBackground" d="M3,29.5c-1.4,0-2.5-1.1-2.5-2.5V5c0-1.4,1.1-2.5,2.5-2.5h10.1c0.5,0,1,0.2,1.4,0.6l3.1,3.1c0.2,0.2,0.4,0.3,0.7,0.3H29c1.4,0,2.5,1.1,2.5,2.5v18c0,1.4-1.1,2.5-2.5,2.5H3z"></path>
          <path class="spectrum-Asset-folderOutline" d="M29,6H18.3c-0.1,0-0.2,0-0.4-0.2l-3.1-3.1C14.4,2.3,13.8,2,13.1,2H3C1.3,2,0,3.3,0,5v22c0,1.6,1.3,3,3,3h26c1.7,0,3-1.4,3-3V9C32,7.3,30.7,6,29,6z M31,27c0,1.1-0.9,2-2,2H3c-1.1,0-2-0.9-2-2V7h28c1.1,0,2,0.9,2,2V27z"></path>
        </svg>
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">FolderName</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">folder</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, Large Image

Beta Precursor
CSS Unverified

A spectrum Quiet Card for an image

Name
jpg
10/15/18
Show Markup
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="img/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
        <div class="spectrum-Card-actionButton">
          <div style="display: inline-block;">
            <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-icon-18-More" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
        <div class="spectrum-Card-description">10/15/18</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Card - Quiet, Small Image

Precursor
CSS Unverified

The Quiet small variant of Card

A spectrum Quiet Card for an image

Name
jpg
Show Markup
<div style="width: 112px; height: 136px;">
  <div class="spectrum-Card spectrum-Card--quiet spectrum-Card--small">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="img/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-actions">
      <div style="display: inline-block;">
        <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-More" />
          </svg>
        </button>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Checkbox

Canon
CSS Verified

Standard


Show Markup
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<br>
<label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
</label>

Disabled

Show Markup
<label class="spectrum-Checkbox is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-disabled is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Error

Show Markup
<label class="spectrum-Checkbox is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox is-invalid is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Checkbox - Quiet

Canon
CSS Verified

Standard


Show Markup
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<br>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the checkbox which has an unacceptably long label</span>
</label>

Disabled

Show Markup
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" disabled checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-5" disabled>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Error

Show Markup
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid is-indeterminate">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
  <span class="spectrum-Checkbox-box">
    <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-DashSmall" />
    </svg>
  </span>
  <span class="spectrum-Checkbox-label">Checkbox</span>
</label>

Circle Loader

Canon
CSS Unverified

The medium variant of a Circle Loader. A circle loader shows the activity of a system operation.

Show Markup
<div class="spectrum-CircleLoader">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

Circle Loader - Indeterminate

Canon
CSS Unverified

An indeterminate Spectrum Loader of default type (round)

Show Markup
<div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Indeterminate - Over Background

Canon
CSS Unverified

An full-page indeterminate circle loader

Show Markup
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Indeterminate Large

Canon
CSS Unverified

A large, indeterminate circle loader

Show Markup
<div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--large">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Indeterminate Small

Canon
CSS Unverified

A small, indeterminate circle loader

Show Markup
<div class="spectrum-CircleLoader spectrum-CircleLoader--indeterminate spectrum-CircleLoader--small">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>

Circle Loader - Large

Canon
CSS Unverified

Large variant of a circle loader. A circle loader shows the activity of a system operation.

Show Markup
<div class="spectrum-CircleLoader spectrum-CircleLoader--large">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

Circle Loader - Over Background

Canon
CSS Unverified

The medium, over color variant of a Circle Loader. A circle loader shows the activity of a system operation.

A Spectrum loader of default type (round) for using over a background color.

Show Markup
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling.firstElementChild, this.value)"/>

Circle Loader - Over Background - Large

Canon
CSS Unverified

The large, over color variant of a circle loader. A circle loader shows the activity of a system operation.

A Spectrum loader of default type (round) for using over a background color.

Show Markup
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--large spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling.firstElementChild, this.value)"/>

Circle Loader - Over Background - Small

Canon
CSS Unverified

The small, over color variant of a circle loader. A circle loader shows the activity of a system operation.

A Spectrum loader of default type (round) for using over a background color.

Show Markup
<div style="width: 200px; height: 200px; background-color: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;">
  <div class="spectrum-CircleLoader spectrum-CircleLoader--small spectrum-CircleLoader--overBackground">
    <div class="spectrum-CircleLoader-track"></div>
    <div class="spectrum-CircleLoader-fills">
      <div class="spectrum-CircleLoader-fillMask1">
        <div class="spectrum-CircleLoader-fillSubMask1">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
      <div class="spectrum-CircleLoader-fillMask2">
        <div class="spectrum-CircleLoader-fillSubMask2">
          <div class="spectrum-CircleLoader-fill"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling.firstElementChild, this.value)"/>

Circle Loader - Small

Canon
CSS Unverified

The small variant of a circle loader. A circle loader shows the activity of a system operation.

Show Markup
<div class="spectrum-CircleLoader spectrum-CircleLoader--small">
  <div class="spectrum-CircleLoader-track"></div>
  <div class="spectrum-CircleLoader-fills">
    <div class="spectrum-CircleLoader-fillMask1">
      <div class="spectrum-CircleLoader-fillSubMask1">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
    <div class="spectrum-CircleLoader-fillMask2">
      <div class="spectrum-CircleLoader-fillSubMask2">
        <div class="spectrum-CircleLoader-fill"></div>
      </div>
    </div>
  </div>
</div>
<input type="number" min="0" max="100" style="display: block;" onchange="changeLoader(this.previousElementSibling, this.value)"/>

Clear Button

Precursor
CSS Unverified

A button that clears things, medium sized

Used in search and tags.



Show Markup
<button class="spectrum-ClearButton">
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>
<button class="spectrum-ClearButton" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>

<br><br>

<button class="spectrum-ClearButton spectrum-ClearButton--small">
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>
<button class="spectrum-ClearButton spectrum-ClearButton--small" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-CrossSmall" />
  </svg>
</button>

Coach Mark

Canon
CSS Unverified

Coach Mark Indicator

Coach mark with large indicator

Show Markup
<div class="spectrum-CoachMarkIndicator" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--dark" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--light" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

Quiet Coach Mark Indicator

Coach mark with small indicator

Show Markup
<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--dark spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

<div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--light spectrum-CoachMarkIndicator--quiet" style="display: inline-block;">
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
  <div class="spectrum-CoachMarkIndicator-ring"></div>
</div>

Coach Mark Dialog

Zoom in
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
2 of 8
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Zoom in
2 of 8
Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
Show Markup
<div style="position: relative;">
  <div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet" style="position: absolute;">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover" style="position: absolute; margin-left: 34px;">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Okay</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 250px"></div>

<div>
  <div class="spectrum-CoachMarkIndicator spectrum-CoachMarkIndicator--quiet">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

<div>
  <div class="spectrum-CoachMarkIndicator">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>

  <div class="spectrum-CoachMarkPopover">
    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
      <div class="spectrum-CoachMarkPopover-step">2 of 8</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

<div>
  <div class="spectrum-CoachMarkPopover">
    <img src="img/example-ava.jpg" class="spectrum-CoachMarkPopover-image" />

    <div class="spectrum-CoachMarkPopover-header">
      <div class="spectrum-CoachMarkPopover-title">Zoom in</div>
      <div class="spectrum-CoachMarkPopover-step">2 of 8</div>
    </div>
    <div class="spectrum-CoachMarkPopover-content">
      Switch to the zoom tool then click and drag in the canvas to move your camera forward and backward.
    </div>
    <div class="spectrum-CoachMarkPopover-footer">
      <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
        <span>Skip Tour</span>
      </button>
      <button class="spectrum-Button spectrum-Button--primary">
        <span>Next</span>
      </button>
    </div>
  </div>

  <div class="spectrum-CoachMarkIndicator">
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
    <div class="spectrum-CoachMarkIndicator-ring"></div>
  </div>
</div>

<div class="dummy-spacing" style="height: 25px"></div>

Combo Box

Canon
CSS Unverified

The default variant of Combobox

Default

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Invalid

Show Markup
<h4>Default</h4>
<div class="spectrum-InputGroup">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-InputGroup is-open">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-InputGroup-button is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; left: 0; width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-InputGroup is-disabled">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field" disabled>
  <button class="spectrum-FieldButton spectrum-InputGroup-button" aria-haspopup="true" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Invalid</h4>
<div class="spectrum-InputGroup is-invalid">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-InputGroup-field is-invalid">
  <button class="spectrum-FieldButton spectrum-InputGroup-button is-invalid" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

Combo Box - Quiet

Canon
CSS Unverified

The quiet variant of Combobox

Default

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Invalid

Show Markup
<h4>Default</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-open">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-disabled">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" disabled>
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Invalid</h4>
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-invalid">
  <input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button is-invalid" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

Cycle Button

Beta Precursor
CSS Unverified
Show Markup
<button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-CycleButton">
  <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-CycleButton-item is-selected" focusable="false" aria-hidden="true" aria-label="Play">
    <use xlink:href="#spectrum-icon-18-PlayCircle" />
  </svg>
  <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-CycleButton-item" focusable="false" aria-hidden="true" aria-label="Pause">
    <use xlink:href="#spectrum-icon-18-PauseCircle" />
  </svg>
</button>

Date Picker

Beta Precursor
CSS Unverified

A date picker uses the input group component to display a field with a button next to it

Show Markup
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-Datepicker" aria-readonly="false" aria-required="false" aria-haspopup="true">
  <input type="text" class="spectrum-Textfield spectrum-InputGroup-field" aria-invalid="false" placeholder="Choose a date" value="">
    <button type="button" class="spectrum-FieldButton spectrum-InputGroup-button">
      <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS">
        <path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z">
        </path>
        <path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z">
        </path>
      </svg>
  </button>
</div>

Date Picker - Quiet

Beta Precursor
CSS Unverified

A date picker uses the input group component to display a field with a button next to it

Show Markup
<div aria-disabled="false" aria-invalid="false" class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker" aria-readonly="false" aria-required="false" aria-haspopup="true">
  <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field" aria-invalid="false" placeholder="Choose a date" value="">
    <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-InputGroup-button">
      <svg viewBox="0 0 36 36" focusable="false" aria-hidden="true" role="img" class="spectrum-Icon spectrum-Icon--sizeS">
        <path d="M33 6h-5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H10V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v3H1a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h32a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zm-1 26H2V8h4v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h14v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V8h4z">
        </path>
        <path d="M6 12h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 18h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM6 24h4v4H6zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4z">
        </path>
      </svg>
  </button>
</div>

Dial

Precursor
CSS Unverified

The Dial Element (Design Precursor). You can dial values with it, sort of like a round slider

A dial for turning it up to 11.



Show Markup
<div class="spectrum-Dial">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>

<br><br>

<div class="spectrum-Dial spectrum-Dial--small">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial spectrum-Dial--small is-disabled">
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" min="0" max="100" value="0">
    </div>
  </div>
</div>

Dial - With label

Beta Precursor
CSS Unverified

A dial for turning it up to 11, now with labels.



54
54
Show Markup
<div class="spectrum-Dial">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <!--<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>-->
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>
<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <!--<div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>-->
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>

<br><br>

<div class="spectrum-Dial">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>

<div class="spectrum-Dial is-disabled">
  <div class="spectrum-Dial-labelContainer">
    <label id="dialLabel" class="spectrum-Dial-label" for="labeledDial">Label</label>
    <div class="spectrum-Dial-value" role="textbox" aria-readonly="true" aria-labelledby="dialLabel">54</div>
  </div>
  <div class="spectrum-Dial-controls">
    <div class="spectrum-Dial-handle" tabindex="0">
      <input type="range" class="spectrum-Dial-input" id="labeledDial" min="0" max="100" value="0">
    </div>
  </div>
</div>

Dialog

Dialog - Alert Confirmation

Canon
CSS Verified

An confirmation alert dialog has specific button styles that should be used.

Enable Smart Filters?

Smart filters are nondestructive and will preserve your original images.
Show Markup
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Configuration Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Enable Smart Filters?</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Smart filters are nondestructive and will preserve your original images.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Enable</button>
  </div>
</div>

Dialog - Alert Information

Canon
CSS Verified

An information alert dialog has specific button styles that should be used.

Connect to WiFi

Please connect to WiFi to sync your projects or go to Settings to change your preferences.
Show Markup
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Information Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Connect to WiFi</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Please connect to WiFi to sync your projects or go to Settings to change your preferences.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Continue</button>
  </div>
</div>

Dialog - Alert Destructive

Canon
CSS Verified

An destructive alert dialog has specific button styles that should be used.

Delete 3 Documents

Are you sure you want to delete the 3 selected documents?
Show Markup
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Destructive Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Delete 3 Documents</h2>
  </div>
  <div class="spectrum-Dialog-content">
    Are you sure you want to delete the 3 selected documents?
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--warning" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Delete</button>
  </div>
</div>

Dialog - Alert Error

Canon
CSS Verified

An error alert dialog has an error icon in the header.

Unable to Share

An error occurred while sharing your project. Please verify the email address and try again.
Show Markup
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open Error Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--error spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Unable to Share</h2>
    <svg class="spectrum-Icon spectrum-UIIcon-AlertMedium spectrum-Dialog-typeIcon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-AlertMedium" />
    </svg>
  </div>
  <div class="spectrum-Dialog-content">
    An error occurred while sharing your project. Please verify the email address and try again.
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">OK</button>
  </div>
</div>

Dialog - Alert 3 buttons

Canon
CSS Verified

An alert dialog can have up to 3 buttons.

Rate This App

If you enjoy our app, would you mind taking a moment to rate it?
Show Markup
<button class="spectrum-Button spectrum-Button--overBackground cssdocs-Overlay-showButton" onclick="openDialog(this.nextElementSibling)">Open 3 Button Dialog</button>

<!-- cssdocs-Dialog class is included for demo purposes only -->
<div class="spectrum-Dialog spectrum-Dialog--alert is-open cssdocs-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Rate This App</h2>
  </div>
  <div class="spectrum-Dialog-content">
    If you enjoy our app, would you mind taking a moment to rate it?
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">No, Thanks</button>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Remind Me Later</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Rate Now</button>
  </div>
</div>

Dialog - Scrolling

Precursor
Unverified

A dialog without .spectrum-Dialog--alert can expand to a larger size to house larger contents.

EULA

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Show Markup
<button class="spectrum-Button spectrum-Button--primary" onclick="openDialog(this.nextElementSibling)">Open Scrolling Dialog</button>

<div class="spectrum-Dialog">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">EULA</h2>
  </div>
  <div class="spectrum-Dialog-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Decline</button>
    <button class="spectrum-Button spectrum-Button--primary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Accept</button>
  </div>
</div>

Dialog - Fullscreen

Precursor
Unverified

The fullscreen variant of Dialog

A fullscreen dialog will automatically fill almost all of the available screen space.

Default Dialog - Fullscreen

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Show Markup
<button variant="primary" class="spectrum-Button spectrum-Button--primary" onclick="openDialog(this.nextElementSibling)">Open Fullscreen Dialog</button>

<div class="spectrum-Dialog spectrum-Dialog--fullscreen">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Default Dialog - Fullscreen</h2>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Save</button>
  </div>
  <div class="spectrum-Dialog-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
  </div>
  <div class="spectrum-Dialog-footer">
    Anything in the footer is sticky and aligned right.
  </div>
</div>

Dialog - Fullscreen Takeover

Precursor
Unverified

The fullscreen takeover variant of Dialog

A fullscreen takeover dialog will fill all of the available screen space.

Fullscreen Takeover

This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
This is a fullscreen takeover dialog.
Show Markup
<button class="spectrum-Button spectrum-Button--primary" onclick="openDialog(this.nextElementSibling, false)">Open Fullscreen Takeover Dialog</button>

<div class="spectrum-Dialog spectrum-Dialog--fullscreenTakeover">
  <div class="spectrum-Dialog-header">
    <h2 class="spectrum-Dialog-title">Fullscreen Takeover</h2>
    <button class="spectrum-Button spectrum-Button--secondary" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Cancel</button>
    <button class="spectrum-Button spectrum-Button--cta" onclick="closeDialog(this.closest('.spectrum-Dialog'))">Save</button>
  </div>
  <div class="spectrum-Dialog-content">
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
    This is a fullscreen takeover dialog.<br>
  </div>
  <div class="spectrum-Dialog-footer">
    Anything in the footer is sticky and aligned right.
  </div>
</div>

Drop Indicator

Precursor
CSS Unverified

The default variant for Dropindicator

A Drop Indicator is used to show the insertion position into a list or table.

Show Markup
<div style="display: flex; align-items: center">
  <div class="spectrum-DropIndicator spectrum-DropIndicator--vertical" style="height: 300px; margin-right: 100px;"></div>
  <div class="spectrum-DropIndicator spectrum-DropIndicator--horizontal" style="width: 300px;"></div>
</div>

The default variant for the Dropdown element

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Show Markup
<h4>Closed</h4>
<div class="spectrum-Dropdown" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>With Thumbnails</h4>
<div class="spectrum-Dropdown is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Closed</h4>
<div class="spectrum-Dropdown is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown is-open is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid is-selected" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown is-invalid is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

The quiet variant of Dropdown

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Show Markup
<h4>Closed</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>With Thumbnails</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Closed</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-invalid is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" disabled aria-haspopup="true">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

Dropzone

Precursor
CSS Unverified

A Drop Zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. For example, a Drop Zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the Drop Zone, which is a more efficient and intuitive action, rather than utilize the standard "Choose File" dialog.

Dropzone (default)

Drag and Drop Your File

Select a File from your computer
or Search Adobe Stock

Show Markup
<div class="spectrum-Dropzone" role="region" tabindex="0" style="width: 300px;">
  <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
    <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
    <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
    <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
  </div>
</div>

Dropzone (dragged)

Drag and Drop Your File

Select a File from your computer
or Search Adobe Stock

Show Markup
<div class="spectrum-Dropzone is-dragged" role="region" tabindex="0" style="width: 300px;">
  <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
    <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
    <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
    <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
  </div>
</div>

Field Group

Beta Precursor
CSS Unverified

A group of fields, usually Radios or Checkboxes.

Show Markup
<div class="spectrum-FieldGroup">
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Dogs</label>
  </div>
</div>
<div class="spectrum-FieldGroup">
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Checkbox</span>
  </label>
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Checkbox</span>
  </label>
</div>

Field Group - Labels Below

Beta Precursor
CSS Unverified

Put the labels below by adding the modifier class to the field itself.

Show Markup
<div class="spectrum-FieldGroup">
  <div class="spectrum-Radio spectrum-Radio--labelBelow">
    <input type="radio" name="rating" class="spectrum-Radio-input" id="radio-2">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-2">1</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--labelBelow">
    <input type="radio" name="rating" class="spectrum-Radio-input" id="radio-3">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-3">2</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--labelBelow">
    <input type="radio" name="rating" class="spectrum-Radio-input" id="radio-4">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-4">3</label>
  </div>
</div>

Field Group - Vertical

Beta Precursor
CSS Unverified

A vertical group of fields.

Show Markup
<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
  <div class="spectrum-Radio">
    <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-fieldgroup-vertical-1">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-fieldgroup-vertical-1">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-fieldgroup-vertical-2">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-fieldgroup-vertical-2">Dogs</label>
  </div>
</div>

<div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input">
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Kibble</span>
  </label>
  <label class="spectrum-Checkbox">
    <input type="checkbox" class="spectrum-Checkbox-input" checked>
    <span class="spectrum-Checkbox-box">
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
      </svg>
    </span>
    <span class="spectrum-Checkbox-label">Bits</span>
  </label>
</div>

Field Label

Canon
CSS Unverified

Field label for use with form inputs.

Show Markup
<label for="lifestory" class="spectrum-FieldLabel">Life Story</label>
<input id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">

<label for="lifestory2" class="spectrum-FieldLabel is-disabled">Life Story</label>
<input id="lifestory2" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield" disabled>

Field Label - Left

Canon
CSS Unverified

A left aligned field label.

Show Markup
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--left" style="width: 72px">Life Story</label>

<textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>

Field Label - Required

Canon
CSS Unverified

Field label for a required field.



Show Markup
<label for="lifestory3" class="spectrum-FieldLabel">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk" />
  </svg>
</label>
<input id="lifestory3" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">

<label for="lifestory4" class="spectrum-FieldLabel">Life Story (Required)</label>
<input id="lifestory4" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield">

<br/>
<br/>

<label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--left">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk" />
  </svg>
</label>
<textarea id="lifestory5" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>


<label for="lifestory6" class="spectrum-FieldLabel is-disabled">Life Story
  <svg class="spectrum-Icon spectrum-UIIcon-Asterisk spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Asterisk" />
  </svg>
</label>
<input id="lifestory6" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield" disabled>

Field Label - Right

Canon
CSS Unverified

A right aligned field label.

Show Markup
<label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--right" style="width: 72px">Life Story</label>

<textarea id="lifestory" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>

Form

Beta Precursor
CSS Unverified

Spectrum Form with Table layout

Show Markup
<form class="spectrum-Form">
  <div class="spectrum-Form-item">
    <label for="fieldLabelExample-lifestory" class="spectrum-Form-itemLabel spectrum-FieldLabel--left">Company Title</label>
    <div class="spectrum-Form-itemField">
      <textarea id="fieldLabelExample-lifestory" placeholder="Enter your life story" name="field" class="spectrum-Textfield spectrum-Textfield--multiline"></textarea>
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-emailaddress">Email Address</label>
    <div class="spectrum-Form-itemField">
      <input class="spectrum-Textfield" aria-invalid="false" type="text" placeholder="Enter your e-mail address" id="fieldLabelExample-emailaddress">
    </div>
  </div>
  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Country</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Dropdown" style="width: 195px;">
        <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
          <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
          <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="spectrum-textinput-instance">Interests</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-5">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-5">Kittens</label>
        </div>
        <div class="spectrum-Radio">
          <input type="radio" name="animals" class="spectrum-Radio-input" id="radio-6">
          <span class="spectrum-Radio-button"></span>
          <label class="spectrum-Radio-label" for="radio-6">Dogs</label>
        </div>
      </div>

      <div class="spectrum-FieldGroup spectrum-FieldGroup--vertical">
        <label class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
          <span class="spectrum-Checkbox-label">Checkbox</span>
        </label>
        <label class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
          <span class="spectrum-Checkbox-label">Checkbox</span>
        </label>
      </div>
    </div>
  </div>

  <div class="spectrum-Form-item">
    <label class="spectrum-Form-itemLabel spectrum-FieldLabel--left" for="fieldLabelExample-stepper">Age</label>
    <div class="spectrum-Form-itemField">
      <div class="spectrum-Stepper">
        <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" id="fieldLabelExample-stepper">
        <span class="spectrum-Stepper-buttons">
          <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
            </svg>
          </button>
          <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
            <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
            </svg>
          </button>
        </span>
      </div>
    </div>
  </div>
</form>

IllustratedMessage

Beta Precursor
CSS Unverified

The IllustratedMessage component, used for status and errors.

Asset 1

Error 404: Page Not Found

This page isn't available. Try checking the URL or visit a different page.

Show Markup
<div class="spectrum-IllustratedMessage">
  <svg class="spectrum-IllustratedMessage-illustration" xmlns="http://www.w3.org/2000/svg" width="200" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="illustrations"><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></g></g></svg>
  <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
  <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description">This page isn't available. Try checking the URL or visit a different page.</p>
</div>

IllustratedMessage - CTA

Beta Precursor
CSS Unverified

The IllustratedMessage component, used for instruction/call to action.

Drag and Drop Your File

Select a File from your computer
or Search Adobe Stock

Show Markup
<div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
  <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
  <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
  <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
</div>

Label

Precursor
CSS Unverified

A label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show Markup
<span class="spectrum-Label spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--fuchsia">Fuchsia Label</span>

Label - Large

Precursor
CSS Unverified

A large label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show Markup
<span class="spectrum-Label spectrum-Label--large spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--large spectrum-Label--fuchsia">Fuchsia Label</span>

Label - Small

Precursor
CSS Unverified

A small label.

Grey Label Red Label Orange Label Yellow Label Seafoam Label Green Label Blue Label Fuchsia Label
Show Markup
<span class="spectrum-Label spectrum-Label--small spectrum-Label--grey">Grey Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--red">Red Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--orange">Orange Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--yellow">Yellow Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--seafoam">Seafoam Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--green">Green Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--blue">Blue Label</span>
<span class="spectrum-Label spectrum-Label--small spectrum-Label--fuchsia">Fuchsia Label</span>

Label - Special

Precursor
CSS Unverified

A special label.

Active Inactive
Show Markup
<span class="spectrum-Label spectrum-Label--active">Active</span>
<span class="spectrum-Label spectrum-Label--inactive">Inactive</span>

The default variant of link

<a href="#" class="spectrum-Link">Link using spectrum-Link</a>

The quiet variant of link

<p> This uses <a href="#" class="spectrum-Link spectrum-Link--quiet">spectrum-Link--quiet</a>.</p>

The variant of Link to use when the link is over a background

Hello, this is my spectrum-Link--overBackground. This is just filler text, but if you keep reading maybe something good will happen.

Show Markup
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body" style="color: rgb(255, 255, 255);">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--overBackground"> spectrum-Link--overBackground</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

This uses is-disabled.

<p>This uses <a class="spectrum-Link is-disabled">is-disabled</a>.</p>
<p> This uses <a href="#" class="spectrum-Link spectrum-Link--subtle">spectrum-Link--subtle</a>.</p>

Logic Button

Precursor
CSS Unverified

A button that toggles between and/or when clicked.

Logic Button (AND)

The AND variant of a Logic Button

Show Markup
<button class="spectrum-LogicButton spectrum-LogicButton--and">And</button>
<button class="spectrum-LogicButton spectrum-LogicButton--and" disabled>And</button>

Logic Button (OR)

The OR variant of a Logic Button

Show Markup
<button class="spectrum-LogicButton spectrum-LogicButton--or">Or</button>
<button class="spectrum-LogicButton spectrum-LogicButton--or" disabled>Or</button>

The default variant of the Select List element. Selectable list of options, typically used in flyouts

    • Financial District
    • South of Market
    • North Beach
    • City Center
    • Jack London Square
    • My best friend's mom's house in the burbs just off Silverado street
Show Markup
<div style="display: flex; align-items: flex-start; justify-content: space-around;">

  <div class="spectrum-Popover is-open" style="position: relative">
    <ul class="spectrum-Menu" role="menu">
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Deselect</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select Inverse</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Feather...</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Save Selection</span>
      </li>
      <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">Make Work Path</span>
      </li>
    </ul>
  </div>

  <div class="spectrum-Popover is-open" style="position: relative">
    <ul class="spectrum-Menu" role="menu">
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">Section Heading</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Action 1</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Action 2</span>
          </li>
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Action 3</span>
          </li>
        </ul>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
          <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
              <use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
            </svg>
            <span class="spectrum-Menu-itemLabel">Save</span>
          </li>
          <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="DataDownload">
              <use xlink:href="#spectrum-icon-18-DataDownload"></use>
            </svg>
            <span class="spectrum-Menu-itemLabel">Download</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="spectrum-Popover is-open" style="position: relative; width: 200px">
    <ul class="spectrum-Menu" role="listbox">
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-sf" aria-hidden="true">San Francisco</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-sf">
          <li class="spectrum-Menu-item" role="option" aria-selected="true" tabindex="0">
            <span class="spectrum-Menu-itemLabel">Financial District</span>
          </li>
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">South of Market</span>
          </li>
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">North Beach</span>
          </li>
        </ul>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li role="presentation">
        <span class="spectrum-Menu-sectionHeading" id="menu-heading-oak" aria-hidden="true">Oakland</span>
        <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-oak">
          <li class="spectrum-Menu-item" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">City Center</span>
          </li>
          <li class="spectrum-Menu-item is-disabled" role="option">
            <span class="spectrum-Menu-itemLabel">Jack London Square</span>
          </li>
          <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
            <span class="spectrum-Menu-itemLabel">My best friend's mom's house in the burbs just off Silverado street</span>
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
            </svg>
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>

The default variant of the Select List element. Selectable list of options, typically used in flyouts

Show Markup
<div style="position: relative; height: 260px;">

  <div class="spectrum-Popover is-open" style="top: 0; left: 0">
    <ul class="spectrum-Menu" role="menu">
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Deselect</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select Inverse</span>
      </li>
      <li class="spectrum-Menu-item is-open" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Feather...</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Menu-chevron" focusable="false" aria-hidden="true" aria-label="Next">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Save Selection</span>
      </li>
    </ul>
  </div>

  <div class="spectrum-Popover spectrum-Popover--right is-open" style="top: 64px; left: 115px">
    <ul class="spectrum-Menu" role="menu">
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Deselect</span>
      </li>
      <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Select and Mask...</span>
      </li>
    </ul>
  </div>

</div>

Miller Columns

Precursor
CSS Unverified

Miller Columns (Branches Selectable)

The default element for creating Miller Column views

Miller columns that allow both files and folders to be selected.

  • File 1
  • File 2
  • File 3
  • File 1
  • File 2
  • File 3
Show Markup
<div class="spectrum-MillerColumns">
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

Miller Columns (Files Selectable)

The default element for creating Miller Column views

Miller columns that only allow files to be selected.

  • File 1
  • File 2
  • File 3
  • File 1
  • File 2
  • File 3
Show Markup
<div class="spectrum-MillerColumns">
  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-navigated is-branch" tabindex="0">
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span></span>

        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>

  <div class="spectrum-MillerColumns-item">
    <ul class="spectrum-AssetList">
      <li class="spectrum-AssetList-item is-branch" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 1</span>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item" tabindex="0">
        <span class="spectrum-AssetList-itemLabel">File 2</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
      <li class="spectrum-AssetList-item is-selected" tabindex="0">
        <img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
        <span class="spectrum-AssetList-itemLabel">File 3</span>
        <label class="spectrum-Checkbox spectrum-AssetList-itemSelector">
          <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
        <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

Page

The outer page container. A parent tag should only have the .spectrum class if using a standalone CSS file. If using multistops, a parent tag should have both the .spectrum class and the corresponding colorstop variant class, i.e. .spectrum--light. Finally, if scaling to large with the diff strategy, a parent tag should have the .spectrum--large class.

Text here!


Text here!








Show Markup
Text here!<br>
<br><br>
<div class="spectrum--large spectrum">
  Text here!<br>
</div>
<br><br>

<button class="spectrum-Button spectrum-Button--cta">Button</button>
<br><br>
<div class="spectrum--large">
  <button class="spectrum-Button spectrum-Button--cta">Button</button>
</div>
<br><br>

<div class="spectrum-Dropdown" style="width: 220px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<br><br>

<div class="spectrum--large">
  <div class="spectrum-Dropdown" style="width: 220px;">
    <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
</div>

Pagination - Button Style CTA

Beta Precursor
CSS Unverified

A Spectrum 'button style call-to-action' pagination

Show Markup
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Button Style Primary

Beta Precursor
CSS Unverified

A Spectrum 'button style primary' pagination

Show Markup
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Button Style Secondary

Beta Precursor
CSS Unverified

A Spectrum 'button style secondary' pagination

Show Markup
<nav class="spectrum-SplitButton spectrum-SplitButton--left">
  <a href="#" class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <a href="#" class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">
    <span class="spectrum-Button-label">Next</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Explicit

Precursor
CSS Unverified

A Spectrum 'explicit' pagination

Show Markup
<nav class="spectrum-Pagination spectrum-Pagination--explicit">
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Pagination-prevButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronLeftMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronLeftMedium"></use>
    </svg>
  </a>
  <input type="text" name="field" value="2" class="spectrum-Textfield spectrum-Pagination-input">
  <span class="spectrum-Body--secondary spectrum-Pagination-counter">of 89 pages</span>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Pagination-nextButton">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium" focusable="false" aria-hidden="true" aria-label="ChevronLeft">
      <use xlink:href="#spectrum-css-icon-ChevronRightMedium"></use>
    </svg>
  </a>
</nav>

Pagination - Page

Precursor
CSS Unverified

A Spectrum 'listing' pagination

Show Markup
<nav class="spectrum-Pagination spectrum-Pagination--listing">
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Pagination-prevButton"><span class="spectrum-Button-label">Prev</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">1</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet is-selected"><span class="spectrum-ActionButton-label">2</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">3</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">4</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">5</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">6</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">...</span></a>
  <a href="#" class="spectrum-ActionButton spectrum-ActionButton--quiet"><span class="spectrum-ActionButton-label">24</span></a>
  <a href="#" class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet spectrum-Pagination-nextButton"><span class="spectrum-Button-label">Next</span></a>
</nav>

Popover

Canon
CSS Unverified

The default variant of Popover

  • Ballard
  • Fremont
  • Greenwood
  • United States of America
Show Markup

<div class="spectrum-Popover is-open">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

Popover - Dialog style

Beta Precursor
CSS Unverified

Spectrum Popovers are implemented using the Dialog's inner elements.

Popover Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Very Very Very Very Long Popover Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Success Popover
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Very Long Error Message With Much Text
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah
Show Markup
<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--bottom is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Popover Title</div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 215px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--right is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Very Very Very Very Long Popover Title</div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 215px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--top spectrum-Dialog--success is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Success Popover</div>
    <div class="spectrum-Dialog-typeIcon"></div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
      <span>Cancel</span>
    </button>
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
      <span>Save</span>
    </button>
  </div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 290px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--right spectrum-Dialog--error is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Very Long Error Message With Much Text</div>
    <div class="spectrum-Dialog-typeIcon"></div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
      <span>Cancel</span>
    </button>
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
      <span>Save</span>
    </button>
  </div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 290px"></div>

Quick Actions

Canon
CSS Verified

Quickactions element

Note that the .spectrum-QuickActions-overlay class should be placed on the container where the Quick Actions are displayed, and the .spectrum-QuickActions--textOnly class should be applied when the buttons have text only.

Show Markup
<div class="spectrum-QuickActions-overlay" style="padding: 40px;">

  <div class="spectrum-QuickActions is-open">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
        <use xlink:href="#spectrum-icon-18-Edit" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Copy">
        <use xlink:href="#spectrum-icon-18-Copy" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
        <use xlink:href="#spectrum-icon-18-Delete" />
      </svg>
    </button>
  </div>

</div>

<div class="spectrum-QuickActions-overlay" style="padding: 40px;">

  <div class="spectrum-QuickActions spectrum-QuickActions--textOnly is-open">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Edit</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Copy</span>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
      <span class="spectrum-ActionButton-label">Delete</span>
    </button>
  </div>

</div>

Radio

Canon
CSS Verified

Radio Button (Default)

The default variant for radio button

Show Markup
<form>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0-disabled" disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1-disabled" checked disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<div class="spectrum-Radio">
  <input type="radio" name="longname" class="spectrum-Radio-input" id="radio-3">
  <span class="spectrum-Radio-button"></span>
  <label class="spectrum-Radio-label" for="radio-3">Radio with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the radio which has an unacceptably long label</label>
</div>

Radio Button (Quiet)

The quiet variant for radio button

Show Markup
<form>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0-disabled" disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--quiet">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1-disabled" checked disabled>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<form>
  <div class="spectrum-Radio spectrum-Radio--quiet is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-0">
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-0">Kittens</label>
  </div>
  <div class="spectrum-Radio spectrum-Radio--quiet is-invalid">
    <input type="radio" name="pets" class="spectrum-Radio-input" id="radio-1" checked>
    <span class="spectrum-Radio-button"></span>
    <label class="spectrum-Radio-label" for="radio-1">Puppies</label>
  </div>
</form>
<div class="spectrum-Radio spectrum-Radio--quiet">
  <input type="radio" name="longname-quiet" class="spectrum-Radio-input" id="radio-4">
  <span class="spectrum-Radio-button"></span>
  <label class="spectrum-Radio-label" for="radio-4">Radio with an extrordinarily long label please don't do this but if you did it should truncate text when it gets longer than the container which contains the radio which has an unacceptably long label</label>
</div>

Rating

Precursor
CSS Unverified

The Rating element.

Show Markup
<div class="spectrum-Rating">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="0" aria-label="Rating">
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
</div>

Rating - Active

Precursor
CSS Unverified

The active state of the Rating element.

Show Markup
<div class="spectrum-Rating">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="3" aria-label="Rating - Active">
  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
</div>

Rating - Disabled

Precursor
CSS Unverified

The disabled state of the Rating element.

Show Markup
<div class="spectrum-Rating is-disabled">
  <input class="spectrum-Rating-input" type="range" min="0" max="5" value="1" aria-label="Rating - Disabled" disabled>
  <span class="spectrum-Rating-icon is-selected">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
  <span class="spectrum-Rating-icon">
    <svg class="spectrum-Icon spectrum-UIIcon-Star spectrum-Rating-starActive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-Star" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-StarOutline spectrum-Rating-starInactive" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-StarOutline" />
    </svg>
  </span>
</div>

Rule

Canon
CSS Verified

Rule (Large)

The large variant of Rule. A Rule separates information

Large


Page or Section Titles.

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

Rule (Medium)

The medium variant of Rule. A Rule separates information

Medium


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

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

Rule (Small)

A Rule separates information

Small


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

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

The default variant of a search field

Show Markup
<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Search-input">
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Search-input" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

Search - Quiet

Precursor
CSS Unverified

The quiet variant of the search element

The quiet searchy, cleary field.

Show Markup
<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Search-input">
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossMedium" />
    </svg>
  </button>
</form>

<form class="spectrum-Search">
  <input type="search" placeholder="Search" name="search" value="" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Search-input" disabled>
  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-Magnifier" />
  </svg>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossMedium focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossMedium" />
    </svg>
  </button>
</form>

Search Within

Precursor
CSS Unverified

The default Search Within element

Override the width of the component where necessary.

Default

Open

  • All
  • Campaigns
  • Audiences
  • Tags

Default (Changed Selection)

Disabled

Show Markup
<h4>Default</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Dropdown">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield">
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<h4>Open</h4>
<form class="spectrum-SearchWithin" style="margin-bottom: 180px;">
  <div class="spectrum-Dropdown is-open">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield">
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>

  <div class="spectrum-Popover is-open" style="position: absolute; top: 38px; left: 0;">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">All</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Campaigns</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Audiences</span>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Tags</span>
      </li>
    </ul>
  </div>
</form>

<h4>Default (Changed Selection)</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Dropdown">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="true">
      <span class="spectrum-Dropdown-label">Campaigns</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield">
  <button type="reset" class="spectrum-ClearButton">
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

<h4>Disabled</h4>
<form class="spectrum-SearchWithin">
  <div class="spectrum-Dropdown is-disabled">
    <button type="button" class="spectrum-FieldButton spectrum-Dropdown-trigger" disabled aria-haspopup="true">
      <span class="spectrum-Dropdown-label">All</span>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
      </svg>
    </button>
  </div>
  <input type="text" placeholder="Search" class="spectrum-Textfield" value="Term" disabled>
  <button type="reset" class="spectrum-ClearButton" disabled>
    <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-CrossSmall" />
    </svg>
  </button>
</form>

SideNav

Canon
CSS Verified

Side navigation provides access to information and features for a user

Show Markup
<nav>
  <ul class="spectrum-SideNav">
    <li class="spectrum-SideNav-item is-selected">
      <a href="#" class="spectrum-SideNav-itemLink" aria-current="page">Section Title 1</a>
    </li>
    <li class="spectrum-SideNav-item is-disabled">
      <a class="spectrum-SideNav-itemLink">Section Title 2</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 3</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 4</a>
    </li>
  </ul>
</nav>

SideNav - Heading

Canon
CSS Verified

Side navigation provides access to information and features for a user

Show Markup
<nav>
  <ul class="spectrum-SideNav">
    <li class="spectrum-SideNav-item is-selected">
      <!-- aria-current denotes current "page" or "location" -->
      <a href="#" class="spectrum-SideNav-itemLink" aria-current="page">Section 1</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section 2</a>
    </li>
    <li class="spectrum-SideNav-item">
      <h2 class="spectrum-SideNav-heading" id="nav-heading-category-1">Category 1</h2>
      <ul class="spectrum-SideNav" aria-labelledby="nav-heading-category-1">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 3</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 4</a>
        </li>
      </ul>
    </li>
    <li class="spectrum-SideNav-item">
      <h2 class="spectrum-SideNav-heading" id="nav-heading-category-2">Category 2</h2>
      <ul class="spectrum-SideNav" aria-labelledby="nav-heading-category-2">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 5</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 6</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section 7</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

SideNav - Multilevel

Canon
CSS Verified

Side navigation provides access to information and features for a user

Show Markup
<nav>
  <ul class="spectrum-SideNav spectrum-SideNav--multiLevel">
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 1</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 2</a>
      <ul class="spectrum-SideNav">
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section  Title 1</a>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section  Title 2</a>
          <ul class="spectrum-SideNav">
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">Section Title 1</a>
            </li>
            <li class="spectrum-SideNav-item">
              <a href="#" class="spectrum-SideNav-itemLink">Section Title 2</a>
            </li>
          </ul>
        </li>
        <li class="spectrum-SideNav-item">
          <a href="#" class="spectrum-SideNav-itemLink">Section Title 3</a>
        </li>
      </ul>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 4</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 5</a>
    </li>
    <li class="spectrum-SideNav-item">
      <a href="#" class="spectrum-SideNav-itemLink">Section Title 6</a>
    </li>
  </ul>
</nav>

Slider

Canon
CSS Unverified

The default Slider. A slider is a tool for selecting a value within a range.

Show Markup
<div class="spectrum-Slider">
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Color

Beta Precursor
CSS Unverified

Spectrum Color slider

#2680eb
#2680eb
#2680eb
Show Markup
<div class="spectrum-Slider spectrum-Slider--color">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-0" for="spectrum-Slider--color-input-0">Color</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-0">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgb(38, 128, 235), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-0">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--color">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-1" for="spectrum-Slider--color-input-1">Color (showing alpha)</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-1">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-1">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--color is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-2" for="spectrum-Slider--color-input-2">Color</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-2">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" disabled id="spectrum-Slider--color-input-2">
    </div>
  </div>
</div>

Slider - Filled

Beta Precursor
CSS Unverified

With fill.

14
14
Show Markup
<div class="spectrum-Slider spectrum-Slider--filled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-6" for="spectrum-Slider-input-6">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-6">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-6">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-7" for="spectrum-Slider-input-7">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-7">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-7">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Ramp

Precursor
CSS Unverified

The ramped variant of Slider

14
14
Show Markup
<div class="spectrum-Slider spectrum-Slider--ramp">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-10" for="spectrum-Slider-input-10">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-10">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-ramp">
      <svg viewBox="0 0 240 16" preserveAspectRatio="none" aria-hidden="true" focusable="false">
        <path d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"></path>
      </svg>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-10">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--ramp is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-11" for="spectrum-Slider-input-11">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-11">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-ramp">
      <svg viewBox="0 0 240 16" preserveAspectRatio="none" aria-hidden="true" focusable="false">
        <path d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"></path>
      </svg>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-11" disabled>
    </div>
  </div>
</div>

Slider - Range

Precursor
CSS Unverified

The Range variant of Slider

A range slider with two handles.

Show Markup
<div class="spectrum-Slider spectrum-Slider--range" role="group" aria-labelledby="spectrum-Slider-label-4">
  <div class="spectrum-Slider-labelContainer" role="presentation">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-4" for="spectrum-Slider-input-4-0">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-4">14 - 48</div>
  </div>
  <div class="spectrum-Slider-controls" role="presentation">
    <div class="spectrum-Slider-track" style="width: 20%;"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" id="spectrum-Slider-input-4-0" aria-labelledby="spectrum-Slider-label-4 spectrum-Slider-input-4-0">
    </div>
    <div class="spectrum-Slider-track" style="left: 20%; right: 40%;"></div>
    <div class="spectrum-Slider-handle" style="left: 60%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" id="spectrum-Slider-input-4-1" aria-labelledby="spectrum-Slider-label-4 spectrum-Slider-input-4-1">
    </div>
    <div class="spectrum-Slider-track" style="width: 40%;"></div>
  </div>
</fieldset>
<div class="spectrum-Slider spectrum-Slider--range is-disabled" role="group" aria-labelledby="spectrum-Slider-label-5">
  <div class="spectrum-Slider-labelContainer" role="presentation">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-5" for="spectrum-Slider-input-5-0">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-5">14 - 48</div>
  </div>
  <div class="spectrum-Slider-controls" role="presentation">
    <div class="spectrum-Slider-track" style="width: 20%;"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" disabled id="spectrum-Slider-input-5-0" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-0">
    </div>
    <div class="spectrum-Slider-track" style="left: 20%; right: 40%;"></div>
    <div class="spectrum-Slider-handle" style="left: 60%;" role="presentation">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" disabled id="spectrum-Slider-input-5-1" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-1">
    </div>
    <div class="spectrum-Slider-track" style="width: 40%;"></div>
  </div>
</div>

Slider - Tick

Precursor
CSS Unverified

The Tick variant of Slider

Spectrum tick slider

14
14
Show Markup
<div class="spectrum-Slider spectrum-Slider--tick">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-14" for="spectrum-Slider-input-14">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-14">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--tick is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-15" for="spectrum-Slider-input-15">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-15">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
      <div class="spectrum-Slider-tick"></div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-15">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Tick with Labels

Beta Precursor
CSS Unverified

Spectrum tick slider with labels

14
0
20
40
60
80
100
14
0
20
40
60
80
100
Show Markup
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-12" for="spectrum-Slider-input-12">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">0</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">20</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">40</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">60</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">80</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">100</div>
      </div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-13" for="spectrum-Slider-input-13">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-ticks">
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">0</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">20</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">40</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">60</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">80</div>
      </div>
      <div class="spectrum-Slider-tick">
        <div class="spectrum-Slider-tickLabel">100</div>
      </div>
    </div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-13">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - Video Player

Precursor
CSS Unverified

The player variant of Slider

Displays a buffer for video players.

3:48
3:48
Show Markup
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-16" for="spectrum-Slider-input-16">My Video</label>
    <div class="spectrum-Slider-value">3:48</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-buffer" style="width: 20%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-labelledby="spectrum-Slider-label-16"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;">
      <input type="range" class="spectrum-Slider-input" aria-valuetext="3:48" value="228" min="0" max="760" id="spectrum-Slider-input-16">
    </div>
    <div class="spectrum-Slider-buffer" style="left: 20%; width: 30%;"></div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-17" for="spectrum-Slider-input-17">My Video</label>
    <div class="spectrum-Slider-value">3:48</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-buffer" style="width: 20%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-labelledby="spectrum-Slider-label-16"></div>
    <div class="spectrum-Slider-handle" tabindex="0" style="left: 20%;">
      <input type="range" class="spectrum-Slider-input" aria-valuetext="3:48" value="228" min="0" max="760" disabled id="spectrum-Slider-input-17">
    </div>
    <div class="spectrum-Slider-buffer" style="left: 20%; right: 50%;"></div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Slider - With Label

Beta Precursor
CSS Unverified
14
14
Show Markup
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-8">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-9" for="spectrum-Slider-input-9">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-9">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-9">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

SplitButton - CTA

Precursor
CSS Unverified

A CTA split button.

Show Markup
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--cta spectrum-SplitButton-action">Split Button</button>
</div>

SplitButton - Primary

Precursor
CSS Unverified

A primary split button.

Show Markup
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--primary spectrum-SplitButton-action">Split Button</button>
</div>

SplitButton - Secondary

Precursor
CSS Unverified

A secondary split button.

Show Markup
<div class="spectrum-SplitButton">
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">Split Button</button>
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<div class="spectrum-SplitButton spectrum-SplitButton--left">
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-trigger">
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-SplitButton-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <button class="spectrum-Button spectrum-Button--secondary spectrum-SplitButton-action">Split Button</button>
</div>

SplitView - Horizontal

Beta Precursor
CSS Unverified

Horizontal SplitView

Left
Right
Show Markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 304px">Left</div>
  <div class="spectrum-SplitView-splitter"></div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Horizontal Collapsed Left

Beta Precursor
CSS Unverified

Horizontally collapsed SplitView

Left
Right
Show Markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 0">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-start">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Horizontal Collapsed Right

Beta Precursor
CSS Unverified

Horizontally collapsed SplitView

Left
Right
Show Markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="flex: 1">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-end">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="width: 0">Right</div>
</div>

SplitView - Horizontally Resizable

Beta Precursor
CSS Unverified

Horizontally resizable SplitView with gripper

Left
Right
Show Markup
<div class="spectrum-SplitView spectrum-SplitView--horizontal" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="width: 304px">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Vertical Collapsed Bottom

Beta Precursor
CSS Unverified

Vertically collapsed SplitView

Left
Right
Show Markup
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="flex: 1">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-end">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="height: 0">Right</div>
</div>

SplitView - Vertical Collapsed Top

Beta Precursor
CSS Unverified

Vertically collapsed SplitView

Left
Right
Show Markup
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="height: 0">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable is-collapsed-start">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

SplitView - Vertically Resizable

Beta Precursor
CSS Unverified

Vertically resizable SplitView with gripper

Left
Right
Show Markup
<div class="spectrum-SplitView spectrum-SplitView--vertical" style="height: 200px">
  <div class="spectrum-SplitView-pane" style="height: 50px">Left</div>
  <div class="spectrum-SplitView-splitter is-draggable">
    <div class="spectrum-SplitView-gripper"></div>
  </div>
  <div class="spectrum-SplitView-pane" style="flex: 1">Right</div>
</div>

Status Light - Label Colors

Canon
CSS Verified

The default variant of Statuslight

Celery Status
Yellow Status
Fuchsia Status
Indigo Status
Seafoam Status
Chartreuse Status
Magenta Status
Purple Status
Show Markup
<div class="spectrum-StatusLight spectrum-StatusLight--celery">Celery Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--yellow">Yellow Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--fuchsia">Fuchsia Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--indigo">Indigo Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--seafoam">Seafoam Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--chartreuse">Chartreuse Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--magenta">Magenta Status</div>
<div class="spectrum-StatusLight spectrum-StatusLight--purple">Purple Status</div>

Status Light - Semantic

Status Light (Neutral)

Canon
CSS Verified

The neutral semantic variant of Status Light

Paused
<div class="spectrum-StatusLight spectrum-StatusLight--neutral">Paused</div>

Status Light (Active)

Deprecated

Use the info variant instead

The active variant of Status Light

Active
<div class="spectrum-StatusLight spectrum-StatusLight--active">Active</div>

Status Light (Info)

Canon
CSS Verified

The informative semantic variant of Status Light

Active
<div class="spectrum-StatusLight spectrum-StatusLight--info">Active</div>

Status Light (Positive)

Canon
CSS Verified

The positive semantic variant of Status Light

Approved
<div class="spectrum-StatusLight spectrum-StatusLight--positive">Approved</div>

Status Light (Notice)

Canon
CSS Verified

The notice semantic variant of Status Light

Needs Approval
<div class="spectrum-StatusLight spectrum-StatusLight--notice">Needs Approval</div>

Status Light (Negative)

Canon
CSS Verified

The negative semantic variant of Status Light

Rejected
<div class="spectrum-StatusLight spectrum-StatusLight--negative">Rejected</div>

Status Light (disabled)

Canon
CSS Verified

The default variant of Statuslight

The disabled state of Status Light.

Disabled
<div class="spectrum-StatusLight is-disabled">Disabled</div>

Steplist

Precursor
CSS Unverified

A basic steplist.

Show Markup
<div class="spectrum-Steplist spectrum-Steplist--small">
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item">
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

Steplist - With Label

Precursor
CSS Unverified

A steplist with labels

Step 1
Step 2
Step 3
Step 4
Show Markup
<div class="spectrum-Steplist">
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-label">Step 1</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-complete">
    <span class="spectrum-Steplist-label">Step 2</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item is-selected">
    <span class="spectrum-Steplist-label">Step 3</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
  <div class="spectrum-Steplist-item">
    <span class="spectrum-Steplist-label">Step 4</span>
    <span class="spectrum-Steplist-markerContainer">
      <span class="spectrum-Steplist-marker"></span>
    </span>
    <span class="spectrum-Steplist-segment"></span>
  </div>
</div>

Steplist - With Tooltip

Precursor
CSS Unverified

A steplist with tooltips

Step 1
Step 2
Step 3
Step 4
Show Markup
<div class="spectrum-Steplist">
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 1</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 2</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 3</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
  <div class="spectrum-Steplist-item u-tooltip-showOnHover">
    <div class="spectrum-Steplist-markerContainer">
      <div class="spectrum-Tooltip spectrum-Tooltip--top">
        <span class="spectrum-Tooltip-label">Step 4</span>
        <span class="spectrum-Tooltip-tip"></span>
      </div>
      <div class="spectrum-Steplist-marker">
      </div>
    </div>

    <span class="spectrum-Steplist-segment">
    </span>
  </div>
</div>

Stepper

Deprecated

Note that you must manually apply the .is-focused class, and that the .is-focused styles below don't look correct unless your cursor is actually in the stepper input field.

Show Markup
<div class="spectrum-Stepper">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper is-focused">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper is-invalid">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper">
  <input type="number" class="spectrum-Textfield spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" disabled>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

Stepper - Quiet

Deprecated

The quiet variant of the Stepper.

Show Markup
<div class="spectrum-Stepper spectrum-Stepper--quiet">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper spectrum-Stepper--quiet is-focused">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper spectrum-Stepper--quiet is-invalid">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5">
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

<div class="spectrum-Stepper spectrum-Stepper--quiet">
  <input type="number" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-Stepper-input" placeholder="Enter a number" min="-2" max="2" step="0.5" disabled>
  <span class="spectrum-Stepper-buttons">
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepUp" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronUpSmall spectrum-Stepper-stepUpIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronUpSmall" />
      </svg>
    </button>
    <button class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Stepper-stepDown" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownSmall spectrum-Stepper-stepDownIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronDownSmall" />
      </svg>
    </button>
  </span>
</div>

Switch - A/B toggle

Canon
CSS Verified

The a/b toggle variant of the switch.


Show Markup
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-ab-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab-0">Toggle A</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-ab-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-ab-1">Toggle B</label>
</div>

<br>

<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle A</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--ab">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle B</label>
</div>

Switch - On/Off

Canon
CSS Verified

The on/off variant of the Switch.


Show Markup
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-1">Toggle On</label>
</div>

<br>

<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle On</label>
</div>

Switch - On/Off - Quiet

Canon
CSS Verified

The quiet variant of the Switch.


Show Markup
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-0">
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-1" checked>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-1">Toggle On</label>
</div>

<br>

<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-0" disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-0">Toggle Off</label>
</div>
<div class="spectrum-ToggleSwitch spectrum-ToggleSwitch--quiet">
  <input type="checkbox" class="spectrum-ToggleSwitch-input" id="toggle-onoff-disabled-1" checked disabled>
  <span class="spectrum-ToggleSwitch-switch"></span>
  <label class="spectrum-ToggleSwitch-label" for="toggle-onoff-disabled-1">Toggle On</label>
</div>

Table

Canon
CSS Unverified

The default variant for Table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Column Dividers

Canon
CSS Unverified

The standard table with column dividers

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable"" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Divs

Canon
CSS Unverified

The standard table with divs

Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Divs Quiet

Canon
CSS Unverified

The default variant for Table

The standard table with divs

Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Dropzone

Tables that accept dropped content.

Table - Body Dropzone

Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body is-drop-target" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Body Dropzone (quiet)

Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body is-drop-target" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Row Dropzone (quiet)

Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row is-drop-target" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Row Dropzone (quiet)

Beta Precursor
CSS Unverified
Column Title
Column Title
Column Title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show Markup
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row is-drop-target" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>

Table - Multi-Select

Canon
CSS Unverified

The standard multi-select table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Alpha
      </td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Bravo
      </td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Charlie
      </td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Delta
      </td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Echo
      </td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Quiet

Canon
CSS Unverified

The quiet table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup
<table class="spectrum-Table spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="descending">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Table - Quiet Multi-Select

Canon
CSS Unverified

The quiet multi-select table

Column Title Column Title Column Title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show Markup
<table class="spectrum-Table spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Alpha
      </td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Bravo
      </td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Charlie
      </td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Delta
      </td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell">
        Row Item Echo
      </td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Tabs

Basic tabs

Canon
CSS Verified

Standard Tabs

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Tabs with icons

Canon
CSS Unverified

The Icon variant of Tabs

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>

Tabs - Compact

Deprecated

Compact tabs should never be used without the quiet variation. Please use Quiet Compact Tabs instead.

Compact tabs

Compact Tabs, should only be used as quiet

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Compact tabs with icons and text

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>

Compact tabs with icons

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 17px; left: 0px;"></div>
</div>

Tabs - Quiet

Canon
CSS Verified

Tabs (Quiet)

Quiet Tabs

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Quiet tabs with icons

The Quiet Icon variant of Tabs

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Folder" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
      <use xlink:href="#spectrum-icon-18-Filter" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
      <use xlink:href="#spectrum-icon-18-Comment" />
    </svg>
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 55px; left: 0px;"></div>
</div>

Tabs - Quiet Compact

Tabs (Quiet Compact)

Canon
CSS Verified

Compact Tabs, available as quiet only

Show Markup
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
  <div class="spectrum-Tabs-item is-selected" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 1</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 2</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 3</label>
  </div>
  <div class="spectrum-Tabs-item" tabindex="0">
    <label class="spectrum-Tabs-itemLabel">Tab 4</label>
  </div>
  <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

Quiet compact tabs with icons and text

Beta Precursor
CSS Unverified