• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/card@4.0.0-alpha.1
View repository
GitHub
View package
npm

Usage notes

A gallery card for an image.

Variants

Standard
Contribution

Name
jpg
10/15/18
Show markup
<div style="width: 532px; height: 224px;">
  <div class="spectrum-Card spectrum-Card--sizeM spectrum-Card--gallery" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="img/example-card-landscape.jpeg" />
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
        <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">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--sizeM" 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 spectrum-Checkbox--sizeM">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Checkmark100" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Dash100" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>

Migration Guide

Change workflow icon size to medium

Please replace .spectrum-Icon--sizeS with .spectrum-Icon--sizeM.

Use Spectrum Heading for title and Spectrum Detail for subtitle

To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:

  • Add the spectrum-Heading and spectrum-Heading--sizeXS or spectrum-Heading--sizeXXS to the spectrum-Card-title element.
  • Add the spectrum-Detail and spectrum-Detail--sizeS classes to spectrum-Card-subtitle.

No results found

Try another search term.