Card - Gallery

Component status
Beta
Last releasedOctober 8, 2019
Current version@spectrum-css/card@2.0.0

Usage notes#


A gallery card for an image.

Variants#


Standard#
Beta

<div style="width: 532px; height: 224px;">
  <div class="spectrum-Card spectrum-Card--gallery" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="/spectrum-css/static/images/example-card-landscape.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" 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>
Show markup