sp-card

Examples API

Attributes and Properties #

Property Attribute Type Default Description
asset asset 'file' | 'folder' | undefined
dir dir 'ltr' | 'rtl' 'ltr'
download download string | undefined
focused focused boolean false
heading heading string ''
horizontal horizontal boolean false
href href string | undefined
label label string | undefined
rel rel string | undefined
selected selected boolean false
size size ElementSize
subheading subheading string ''
target target '_blank' | '_parent' | '_self' | '_top' | undefined
toggles toggles boolean false
variant variant 'standard' | 'gallery' | 'quiet' 'standard'

Slots #

Name Description
actions an `sp-action-menu` element outlining actions to take on the represened object
cover-photo This is the cover photo for Default and Quiet Cards
description A description of the card
footer Footer text
heading HTML content to be listed as the heading
preview This is the preview image for Gallery Cards
subheading HTML content to be listed as the subheading

Events #

Name Type Description
change Event Announces a change in the `selected` property of a card
click Event

CSS Custom Properties #

Name Default
--spectrum-alias-highlight-selected undefined
--spectrum-card-m-actions-margin var(--spectrum-global-dimension-size-125)
--spectrum-card-m-background-color var(--spectrum-global-color-gray-50)
--spectrum-card-m-body-content-margin-top var(--spectrum-global-dimension-size-75)
--spectrum-card-m-body-content-min-height var(--spectrum-global-dimension-size-175)
--spectrum-card-m-body-header-height var(--spectrum-global-dimension-size-225)
--spectrum-card-m-body-padding-bottom var(--spectrum-global-dimension-size-250)
--spectrum-card-m-body-padding-left var(--spectrum-global-dimension-size-300)
--spectrum-card-m-body-padding-right var(--spectrum-global-dimension-size-300)
--spectrum-card-m-body-padding-top var(--spectrum-global-dimension-size-250)
--spectrum-card-m-border-color var(--spectrum-global-color-gray-200)
--spectrum-card-m-border-color-hover var(--spectrum-global-color-gray-400)
--spectrum-card-m-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-card-m-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-card-m-border-size var(--spectrum-alias-border-size-thin)
--spectrum-card-m-checkbox-margin var(--spectrum-global-dimension-size-200)
--spectrum-card-m-coverphoto-background-color var(--spectrum-global-color-gray-200)
--spectrum-card-m-coverphoto-border-bottom-size var(--spectrum-alias-border-size-thin)
--spectrum-card-m-coverphoto-border-color var(--spectrum-global-color-gray-200)
--spectrum-card-m-coverphoto-height var(--spectrum-global-dimension-size-1700)
--spectrum-card-m-description-text-color var(--spectrum-global-color-gray-700)
--spectrum-card-m-footer-border-top-size var(--spectrum-global-dimension-size-10)
--spectrum-card-m-footer-padding-top var(--spectrum-global-dimension-size-175)
--spectrum-card-m-min-width var(--spectrum-global-dimension-size-2500)
--spectrum-card-m-quiet-body-header-height var(--spectrum-global-dimension-size-225)
--spectrum-card-m-quiet-body-header-margin-top var(--spectrum-global-dimension-size-175)
--spectrum-card-m-quiet-border-color-selected var(--spectrum-global-color-blue-500)
--spectrum-card-m-quiet-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-card-m-quiet-border-size var(--spectrum-alias-border-size-thin)
--spectrum-card-m-quiet-min-height var(--spectrum-global-dimension-size-1700)
--spectrum-card-m-quiet-min-width var(--spectrum-global-dimension-size-2500)
--spectrum-card-m-quiet-preview-background-color var(--spectrum-global-color-gray-200)
--spectrum-card-m-quiet-preview-background-color-hover var(--spectrum-global-color-gray-300)
--spectrum-card-m-quiet-preview-padding var(--spectrum-global-dimension-size-250)
--spectrum-card-m-quiet-subtitle-text-color var(--spectrum-global-color-gray-700)
--spectrum-card-m-quiet-title-text-color var(--spectrum-global-color-gray-800)
--spectrum-card-m-subtitle-padding-right var(--spectrum-global-dimension-size-100)
--spectrum-card-m-subtitle-text-size var(--spectrum-global-dimension-font-size-50)
--spectrum-card-m-title-padding-right var(--spectrum-global-dimension-size-100)
--spectrum-card-s-actions-margin var(--spectrum-global-dimension-size-125)
--spectrum-card-s-body-content-margin-top var(--spectrum-global-dimension-size-75)
--spectrum-card-s-body-content-min-height var(--spectrum-global-dimension-size-175)
--spectrum-card-s-body-header-height var(--spectrum-global-dimension-size-150)
--spectrum-card-s-body-padding-bottom var(--spectrum-global-dimension-size-250)
--spectrum-card-s-body-padding-left var(--spectrum-global-dimension-size-300)
--spectrum-card-s-body-padding-right var(--spectrum-global-dimension-size-300)
--spectrum-card-s-body-padding-top var(--spectrum-global-dimension-size-250)
--spectrum-card-s-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-card-s-border-size var(--spectrum-alias-border-size-thin)
--spectrum-card-s-checkbox-margin var(--spectrum-global-dimension-size-125)
--spectrum-card-s-coverphoto-border-bottom-size var(--spectrum-alias-border-size-thin)
--spectrum-card-s-coverphoto-height var(--spectrum-global-dimension-size-1700)
--spectrum-card-s-footer-border-top-size var(--spectrum-global-dimension-size-10)
--spectrum-card-s-footer-padding-top var(--spectrum-global-dimension-size-175)
--spectrum-card-s-min-width var(--spectrum-global-dimension-size-1250)
--spectrum-card-s-quiet-body-header-height var(--spectrum-global-dimension-size-150)
--spectrum-card-s-quiet-body-header-margin-top var(--spectrum-global-dimension-size-175)
--spectrum-card-s-quiet-border-radius var(--spectrum-alias-border-radius-regular)
--spectrum-card-s-quiet-border-size var(--spectrum-alias-border-size-thin)
--spectrum-card-s-quiet-min-height var(--spectrum-global-dimension-size-900)
--spectrum-card-s-quiet-min-width var(--spectrum-global-dimension-size-1200)
--spectrum-card-s-quiet-preview-padding var(--spectrum-global-dimension-size-150)
--spectrum-card-s-subtitle-padding-right var(--spectrum-global-dimension-size-100)
--spectrum-card-s-subtitle-text-size var(--spectrum-global-dimension-font-size-50)
--spectrum-card-s-title-padding-right var(--spectrum-global-dimension-size-100)
--spectrum-quickactions-height var(--spectrum-global-dimension-size-500)

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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 slot="actions" placement="bottom-end">
        <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 slot="actions" placement="bottom-end">
            <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-body-text-color, var(--spectrum-alias-text-color));"
>
    <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-body-text-color, var(--spectrum-alias-text-color)); 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 slot="actions" placement="bottom-end">
            <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>