- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Card - gallery
Component status | Contribution |
---|---|
Current version | @spectrum-css/card@9.1.1 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/card@10.0.0-s2-foundations.19 |
Released | October 4, 2024 |
Usage notes
A gallery card for an image.
Variants
StandardContribution
Name
jpg
10/15/18
Show markup
<div style="width: 532px; height: 224px;">
<div class="spectrum-Card spectrum-Card--gallery" tabindex="0" role="figure" style="width: 532px;">
<div class="spectrum-Card-preview">
<div class="spectrum-Asset">
<img class="spectrum-Asset-image" src="img/example-card-landscape.jpeg" />
</div>
</div>
<hr class="spectrum-Divider spectrum-Divider--sizeS spectrum-Card-divider">
<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
andspectrum-Heading--sizeXS
orspectrum-Heading--sizeXXS
to thespectrum-Card-title
element. - Add the
spectrum-Detail
andspectrum-Detail--sizeS
classes tospectrum-Card-subtitle
.
Small Card deprecated
Card only has one size moving forward and the minimum width has been updated to allow for smaller card widths if needed. There is no longer a need for the spectrum-Card--sizeM
class on this component.