Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- lock prerelease versions for Spectrum CSS (#5014) (8aa7734)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- asset: use core tokens (99e76f4)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- update deps graph, update link docs (#3709) (2deb284)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- card: use core tokens (9cccd26)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- add Grid pattern (341f493)
- add likeAnchor API to Card element (5c338fb)
- card: allow for preview or cover-photo (2d2f42b)
- card: correctly apply :focus-visible styling to variants (d7c7539)
- card: create no preview image variant of card instead of no imageless variant at all (7b102b9)
- card: do not transform subheadling text to uppercase (4244390)
- card: include dependencies (18beaf6)
- card: normalize sizing technique to align with future t-shirt size usage (6f05b3b)
- card: removed empty card from documentation/stories (8322894)
- card: stop event propogation on handleselectedchange (0ef95e5)
- dialog: normalize sizing technique to align with future t-shirt size usage (da33797)
- ensure that all paths to user change of selected trigger a change event (2eee81e)
- include "type" in package.json, generate custom-elements.json (1a8d716)
- include default export in the "exports" fields (f32407d)
- include the "types" entry in package.json files (b432f59)
- match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)
- override and clear text-transform: uppercase (dddce4b)
- remove usage where deprecated (387db3b)
- remove standard variant from image getter (97e4713)
- stop merging selectors in a way that alters the cascade (369388f)
- switch to heading/subheading instead of title (d182a0f)
- tests weren't fully updated (22bf3b1)
- these selectors didn't actually change (a5ac275)
- update latest Spectrum CSS beta releases (d8d3acc)
- update side effect listings (8160d3a)
- update to latest spectrum-css packages (a5ca19f)
- use latest @spectrum-css/* versions (c35eb86)
- add screenshot regression testing to CI (8205dfe)
- adopt DNA@7 base Spectrum CSS (e08cafd)
- allow slotted title for card (aaf7157)
- button: use synthetic button instead of native (49e94bc)
- card: update spectrum css input (18b6dae)
- card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)
- delivery dev mode messages in various packages (62370a1)
- include all Dev Mode files in side effects (f70817c)
- leverage "exports" field in package.json (321abd7)
- sets action-menu quiet to false by default, fixes #3040 (8414cab)
- shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
- styles: vend CSS literal versions of the typography system (6406c96)
- update card and tabs to latest spectrum-css (55b8d67)
- update lit-* dependencies, wip (377f3c8)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- use @adobe/spectrum-css@2.15.1 (3918888)
- use latest exports specification (a7ecf4b)
- use "sideEffects" listing in package.json (7271614)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
- Revert "chore: release new versions" (a6d655d)
- renamed title/subtitle attributes and slot.
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- sets action-menu quiet to false by default, fixes #3040 (8414cab)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- update card and tabs to latest spectrum-css (55b8d67)
- match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- include all Dev Mode files in side effects (f70817c)
- delivery dev mode messages in various packages (62370a1)
- card: stop event propogation on handleselectedchange (0ef95e5)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- add Grid pattern (341f493)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- update lit-* dependencies, wip (377f3c8)
Note: Version bump only for package @spectrum-web-components/card
- adopt DNA@7 base Spectrum CSS (e08cafd)
- add likeAnchor API to Card element (5c338fb)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- card: normalize sizing technique to align with future t-shirt size usage (6f05b3b)
- dialog: normalize sizing technique to align with future t-shirt size usage (da33797)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- remove usage where deprecated (387db3b)
Note: Version bump only for package @spectrum-web-components/card
- use latest exports specification (a7ecf4b)
- update to latest spectrum-css packages (a5ca19f)
Note: Version bump only for package @spectrum-web-components/card
- card: create no preview image variant of card instead of no imageless variant at all (7b102b9)
- remove standard variant from image getter (97e4713)
- card: allow for preview or cover-photo (2d2f42b)
- card: removed empty card from documentation/stories (8322894)
- ensure that all paths to user change of selected trigger a change event (2eee81e)
- include the "types" entry in package.json files (b432f59)
- override and clear text-transform: uppercase (dddce4b)
- stop merging selectors in a way that alters the cascade (369388f)
- update latest Spectrum CSS beta releases (d8d3acc)
- card: do not transform subheadling text to uppercase (4244390)
- use latest @spectrum-css/* versions (c35eb86)
- button: use synthetic button instead of native (49e94bc)
- card: update spectrum css input (18b6dae)
- styles: vend CSS literal versions of the typography system (6406c96)
- include the "types" entry in package.json files (b432f59)
- override and clear text-transform: uppercase (dddce4b)
- stop merging selectors in a way that alters the cascade (369388f)
- switch to heading/subheading instead of title (d182a0f)
- tests weren't fully updated (22bf3b1)
- these selectors didn't actually change (a5ac275)
- update latest Spectrum CSS beta releases (d8d3acc)
- card: do not transform subheadling text to uppercase (4244390)
- use latest @spectrum-css/* versions (c35eb86)
- button: use synthetic button instead of native (49e94bc)
- card: update spectrum css input (18b6dae)
- styles: vend CSS literal versions of the typography system (6406c96)
- renamed title/subtitle attributes and slot.
- switch to heading/subheading instead of title (d182a0f)
- tests weren't fully updated (22bf3b1)
- these selectors didn't actually change (a5ac275)
- renamed title/subtitle attributes and slot.
Note: Version bump only for package @spectrum-web-components/card
- card: include dependencies (18beaf6)
- include default export in the "exports" fields (f32407d)
- update side effect listings (8160d3a)
Note: Version bump only for package @spectrum-web-components/card
- card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- leverage "exports" field in package.json (321abd7)
Note: Version bump only for package @spectrum-web-components/card
- card: correctly apply :focus-visible styling to variants (d7c7539)
- use "sideEffects" listing in package.json (7271614)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- allow slotted title for card (aaf7157)
Note: Version bump only for package @spectrum-web-components/card
Note: Version bump only for package @spectrum-web-components/card
- include "type" in package.json, generate custom-elements.json (1a8d716)
- add screenshot regression testing to CI (8205dfe)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- use @adobe/spectrum-css@2.15.1 (3918888)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
Note: Version bump only for package @spectrum-web-components/card
An <sp-card>
represents a rectangular card that contains a variety of text and image layouts. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs.

yarn add @spectrum-web-components/card
Import the side effectful registration of <sp-card>
via:
import '@spectrum-web-components/card/sp-card.js';
When looking to leverage the Card
base class as a type and/or for extension purposes, do so via:
import { Card } from '@spectrum-web-components/card';
<sp-card heading="Card Heading" subheading="JPG Photo">
<img
slot="cover-photo"
src="https://picsum.photos/200/300"
alt="Demo Image"
/>
<div slot="footer">Footer</div>
</sp-card>
<sp-card heading="Card Title" subheading="JPG">
<img slot="preview" src="https://picsum.photos/200/300" alt="Demo Image" />
<div slot="footer">Footer</div>
</sp-card>
By default, the heading for an <sp-card>
is applied via the heading
attribute, which is restricted to string content only. For HTML content, use the heading
slot instead.
<sp-card
subheading="JPG Photo"
style="--spectrum-card-body-header-height: auto;"
>
<h1 slot="heading">Card Heading</h1>
<img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
<div slot="footer">Footer</div>
</sp-card>
An <sp-card>
can be provided with an href
attribute in order for it to act as one large anchor element. When leveraging the href
attribute, the download
, target
and rel
attributes customize the card's linking behavior. Use them as follows:
<sp-card
heading="Card Title"
subheading="JPG"
href="https://opensource.adobe.com/spectrum-web-components"
target="_blank"
>
<img slot="cover-photo" src="https://picsum.photos/200/300" alt="Demo Image" />
</sp-card>
There are multiple card variants to choose from in Spectrum. The variant
attribute controls the main variant of the card.
Normal cards can contain a heading, a subheading, a cover photo, and a footer.
<sp-card heading="Card Heading">
<img alt="" slot="cover-photo" src="https://picsum.photos/200/300" />
<span slot="subheading">JPG photo</span>
<div slot="footer">Footer</div>
</sp-card>
Cards can be supplied an actions
via a names slot.
<sp-card heading="Card Heading" subheading="JPG Photo">
<img
slot="cover-photo"
src="https://picsum.photos/200/300"
alt="Demo Image"
/>
<div slot="footer">Footer</div>
<sp-action-menu
label="More Actions"
slot="actions"
placement="bottom-end"
quiet
>
<sp-menu-item>Deselect</sp-menu-item>
<sp-menu-item>Select Inverse</sp-menu-item>
<sp-menu-item>Feather...</sp-menu-item>
<sp-menu-item>Select and Mask...</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>Save Selection</sp-menu-item>
<sp-menu-item disabled>Make Work Path</sp-menu-item>
</sp-action-menu>
</sp-card>
Cards with no preview image can contain a heading, a subheading, and a footer.
<sp-card heading="Card Title" subheading="No Preview Image">
<div slot="footer">Footer</div>
</sp-card>
Quiet cards can contain a heading, a subheading, a cover photo, a description, and a footer.
<div style="width: 208px; height: 264px">
<sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
<img alt="" slot="preview" src="https://picsum.photos/200/300" />
<div slot="description">10/15/18</div>
<div slot="footer">Footer</div>
</sp-card>
</div>
When leveraging the asset
attribute, a card can be declared as representing a file
:
<div style="width: 208px; height: 264px">
<sp-card
variant="quiet"
heading="Card Heading"
subheading="JPG Photo"
asset="file"
>
<img alt="" slot="preview" src="https://picsum.photos/200/300" />
<div slot="heading">File Name</div>
<div slot="description">10/15/18</div>
<div slot="footer">Footer</div>
</sp-card>
</div>
Or a folder
:
<div style="width: 208px; height: 264px">
<sp-card variant="quiet" subheading="JPG Photo" asset="folder">
<img alt="" slot="preview" src="https://picsum.photos/200/300" />
<div slot="heading">Folder Name</div>
<div slot="description">10/15/18</div>
<div slot="footer">Footer</div>
</sp-card>
</div>
Quiet cards will also accept actions
via a named slot.
<div style="width: 208px; height: 264px">
<sp-card variant="quiet" heading="Card Heading" subheading="JPG Photo">
<img alt="" slot="preview" src="https://picsum.photos/200/300" />
<div slot="description">10/15/18</div>
<sp-action-menu
label="More Actions"
slot="actions"
placement="bottom-end"
quiet
>
<sp-menu-item>Deselect</sp-menu-item>
<sp-menu-item>Select Inverse</sp-menu-item>
<sp-menu-item>Feather...</sp-menu-item>
<sp-menu-item>Select and Mask...</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>Save Selection</sp-menu-item>
<sp-menu-item disabled>Make Work Path</sp-menu-item>
</sp-action-menu>
</sp-card>
</div>
Gallery cards can contain a heading, a subheading, an image preview, a description, and a footer.
<div style="width: 532px; max-width: 100%; height: 224px">
<sp-card variant="gallery" heading="Card Heading" subheading="JPG Photo">
<img alt="" slot="preview" src="https://picsum.photos/532/192" />
<div slot="description">10/15/18</div>
<div slot="footer">Footer</div>
</sp-card>
</div>
size="s"
will delivery the <sp-card>
element at a "small" size. It can be leveraged with a standard card:
<div style="width: 208px; height: 264px">
<sp-card size="s" heading="Card Heading" subheading="JPG Photo">
<img
slot="cover-photo"
alt="Demo Image"
src="https://picsum.photos/110"
/>
<div slot="footer">Footer</div>
</sp-card>
</div>
A horizontal
card:
<div style="color: var(--spectrum-neutral-content-color-default);">
<sp-card size="s" horizontal heading="Card Heading" subheading="JPG Photo">
<sp-icon slot="preview" style="width: 36px; height: 36px;">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 36 36"
aria-hidden="true"
role="img"
fill="currentColor"
>
<path d="M20 2v10h10L20 2z" />
<path
d="M19 14a1 1 0 01-1-1V2H7a1 1 0 00-1 1v30a1 1 0 001 1h22a1 1 0 001-1V14zm7 15.5a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5zm0-4a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5zm0-4a.5.5 0 01-.5.5h-15a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h15a.5.5 0 01.5.5z"
/>
</svg>
</sp-icon>
</sp-card>
</div>
Or a quiet
card:
<div
style="color: var(--spectrum-neutral-content-color-default); width: 110px;"
>
<sp-card
size="s"
heading="Card Heading"
subheading="JPG Photo"
variant="quiet"
>
<img src="https://picsum.photos/110" alt="Demo Image" slot="preview" />
<div slot="footer">Footer</div>
<sp-action-menu
label="More Actions"
slot="actions"
placement="bottom-end"
quiet
>
<sp-menu-item>Deselect</sp-menu-item>
<sp-menu-item>Select Inverse</sp-menu-item>
<sp-menu-item>Feather...</sp-menu-item>
<sp-menu-item>Select and Mask...</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>Save Selection</sp-menu-item>
<sp-menu-item disabled>Make Work Path</sp-menu-item>
</sp-action-menu>
</sp-card>
</div>