<sp-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.

Category

Layout

Built with

No library

Library

Spectrum Web Components

Author

Adobe

Package

@spectrum-web-components/card

Component size

19.1 kB JS (minified + gzipped, JS includes dependencies beyond the library)

Library size

7.5 kB JS (shared by every Spectrum Web Components component, loaded once per page)

Popular

2 out of 5

Downloads

21,944/week · jsDelivr 5,436 hits/month (whole @spectrum-web-components/card package)

Latest stable version

1.12.4

Last published

Sep 29, 2026

Component last changed

May 12, 2026 (in 1.12.0)

License

Apache-2.0

• Documentation
• Source code

• Documentation
• Source code

Attributes

• asset
• variant
• selected
• heading
• horizontal
• focused
• toggles
• value
• subheading

Slots

• preview
• cover-photo
• heading
• subheading
• description
• actions
• footer

Events

• click
• change