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

Asset Card

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/assetcard@1.1.38
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

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" 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-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <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>

Landscape
Contribution

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" src="img/example-card-landscape.jpeg" />
    <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-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <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>

Square
Contribution

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" src="img/example-card-square.png" />
    <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-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <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>

Optional content
Contribution

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

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" src="img/example-card-square.png" />
    <div class="spectrum-AssetCard-selectionOverlay"></div>
  </div>
  <div class="spectrum-AssetCard-header">
    <div class="spectrum-AssetCard-title">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="">
      <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

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" 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

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" 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-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-AssetCard-checkbox">
      <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" 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

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" 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

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" 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>