<wa-card>

Cards group related content and actions inside a bordered container. Use them to present products, articles, user profiles, or any self-contained unit of information.

Category

Layout

Built with

Lit

Library

Web Awesome

Author

Web Awesome

Package

@awesome.me/webawesome

Component size

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

Library size

8.2 kB JS (shared by every Web Awesome component, loaded once per page)

Popular

5 out of 5

Downloads

364,100/week · jsDelivr 33,855,650 hits/month (whole @awesome.me/webawesome package)

GitHub stars

1,348

Latest stable version

3.14.0

Last published

Sep 24, 2026

Component last changed

Dec 16, 2025 (in 3.1.0)

License

MIT

Status

stable

• Documentation
• Demo
• Source code

Attributes

• appearance
• with-header
• with-media
• with-footer
• with-header-actions
• with-footer-actions
• orientation
• dir
• lang
• did-ssr

Slots

• header
• footer
• media
• actions
• header-actions
• footer-actions

CSS Parts

• media
• header
• body
• footer
• actions