wc-card

<wc-card>

Content container with image, heading, body, footer, and action slots.

A flexible card component for displaying grouped content.

Variants

Default, featured, and compact card styles.

Variants

Default Card

Standard card for general content display.

Featured Card

Highlighted card for important content.

Compact Card

Condensed layout for dense UIs.

Elevations

Flat, raised, and floating shadow depths.

Elevations

Flat

No shadow — blends into the surface.

Raised

Subtle shadow for visual separation.

Floating

Prominent shadow for emphasis.

Full Slot Usage

All available slots: image, heading, body, footer, and actions.

Full Slot Usage

Image Slot

Card Title

This is the default body slot with descriptive content for the card.

Published Feb 2026

ActionCancel

Interactive Card

Card with href becomes clickable.

Interactive Card

Clickable Card

This card has an href attribute — click anywhere to navigate.

API Reference

Properties

3

Attribute	Type	Default	Description
variant	'default' | 'featured' | 'compact'	'default'	Visual style variant of the card.
elevation	'flat' | 'raised' | 'floating'	'flat'	Elevation (shadow depth) of the card.
href	string | undefined	—	Optional URL. When set, the card becomes interactive (clickable) and navigates to this URL on click.

Events

1

Name	Type	Description
wc-card-click	CustomEvent	Dispatched when an interactive card (with href) is clicked.

Slots

5

Name	Description
image	Optional image or media content at the top of the card.
heading	The card heading/title content.
(default)	Default slot for the card body content.
footer	Optional footer content below the body.
actions	Optional action buttons, rendered with a top border separator.

CSS Custom Properties

6

Property	Description
--wc-card-bg	Card background color.
--wc-card-color	Card text color.
--wc-card-border-color	Card border color.
--wc-card-border-radius	Card border radius.
--wc-card-padding	Internal padding for card sections.
--wc-card-gap	Gap between card sections.

CSS Parts

6

Part	Description
card	The outer card container element.
image	The image slot container.
heading	The heading slot container.
body	The body slot container.
footer	The footer slot container.
actions	The actions slot container.