• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Card - Asset preview

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/card@3.0.0-beta.5

Usage notes


A standard cards with a full-sized asset preview.

Variants


Standard
Contribution

Card Title
jpg
Show markup
<div style="width: 208px;">
  <div class="spectrum-Card" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="img/example-card-portrait.jpg" />
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</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>

Migration Guide


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.