sp-card
NPM
0.42.2
Spectrum
View guidelines
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
asset
asset
'file' | 'folder' | undefined
download
download
string | undefined
focused
focused
boolean
false
heading
heading
string
''
horizontal
horizontal
boolean
false
href
href
string | undefined
label
label
string | undefined
referrerpolicy
referrerpolicy
| 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined
rel
rel
string | undefined
subheading
subheading
string
''
target
target
'_blank' | '_parent' | '_self' | '_top' | undefined
toggles
toggles
boolean
false
value
value
string
''
variant
variant
'standard' | 'gallery' | 'quiet'
'standard'
Slots #
actions
cover-photo
description
footer
heading
preview
subheading
Events #
change
Event
Announces a change in the `selected` property of a card
click
Event
Description #
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.
Usage #
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';
Example #
<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>
Heading #
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>
Linking #
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>
Variants #
There are multiple card variants to choose from in Spectrum. The variant
attribute controls the main variant of the card.
Normal #
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>
Actions #
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>
No Preview Image #
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 #
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 #
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 #
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>