- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Asset Card
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/assetcard@1.1.38 |
Usage notes
- Set the
--spectrum-assetcard-asset-size
custom property to the size you want to display the asset as
Variants
PortraitContribution

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

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

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 contentContribution
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 SelectionContribution

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 SelectionContribution

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 SelectionContribution

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 TargetContribution

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>