• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Asset card

Component status
Contribution
Last releasedDecember 4, 2023
Current version@spectrum-css/assetcard@3.0.3
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

  • Set the --spectrum-assetcard-asset-size custom property to the size you want to display the asset as

Variants

Portrait
Contribution

assetcard example image
Card Title
Image
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title" id="card-title-1">Card Title</div>
    <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
    Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
    <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-1">
      <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>

Landscape
Contribution

assetcard example image in landscape
Card Title
Image
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image in landscape" src="img/example-card-landscape.jpeg" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title" id="card-title-2">Card Title</div>
    <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
    Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
    <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-2">
      <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>

Square
Contribution

assetcard example image
Card Title
Image
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-square.png" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title" id="card-title-3">Card Title</div>
    <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
    Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
    <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-3">
      <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>

Optional content
Contribution

The .spectrum-AssetCard-content and .spectrum-AssetCard-headerContent elements are optional.

assetcard example image
MVI_0123.mp4
39:02
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-square.png" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title" id="card-title-4">MVI_0123.mp4</div>
    <div class="spectrum-AssetCard-headerContent">39:02</div>
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
    <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-4">
      <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>

Highlight Selection
Contribution

assetcard example image
Card Title
Image
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--highlightSelection is-selected" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title">Card Title</div>
    <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
    Image
  </div>
</div>

Checkbox Selection
Contribution

assetcard example image
Card Title
Image
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--checkboxSelection is-selected" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title" id="card-title-5">Card Title</div>
    <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
    Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
    <div class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" aria-labelledby="card-title-5" checked>
      <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>

Ordered Selection
Contribution

assetcard example image
Card Title
Image
1
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--orderedSelection is-selected" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title">Card Title</div>
    <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
    Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
    <div class="spectrum-AssetCard-selectionOrder">1</div>
  </div>
</div>

Drop Target
Contribution

assetcard example image
Card Title
Image
1
Show markup
<div class="spectrum-AssetCard spectrum-AssetCard--highlightSelection is-drop-target" tabindex="0" role="figure">
  <div class="spectrum-AssetCard-assetContainer">
    <img class="spectrum-AssetCard-asset" alt="assetcard example image" src="img/example-card-portrait.jpg" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title">Card Title</div>
    <div class="spectrum-AssetCard-headerContent"></div>
  </div>
  <div class="spectrum-AssetCard-content">
    Image
  </div>
  <div class="spectrum-AssetCard-selectionIndicator">
    <div class="spectrum-AssetCard-selectionOrder">1</div>
  </div>
</div>

Migration Guide

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.