Card

A flexible container component for displaying content.

Installation

npx wdc add card

Examples

Basic Card

Displays a header, content, and footer.

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Form Layout

Using card to group form inputs and actions.

Login

Enter your email below to login to your account.

Password

Simple Card

Simple Card with header, body, and footer.

Simple Card

With a subheader

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Simple Card

With a subheader

You can insert images or custom content into the header slot. This card also has a footer with actions.

Task Completed

You have successfully finished the task.

Image Card

A card with an image in the header and footer actions.

Image Card

Dashboard Stats

Example of using cards for high-level metrics.

Total Revenue

$45,231.89

+20.1% from last month

Subscriptions

+2350

+180.1% from last month

Active Now

+573

+201 since last hour

check_circle

SEO & Accessibility

Structure: Using wdc-card-title renders an <h3> by default, which creates a logical document structure for screen readers.
Landmark: If a card represents a major standalone widget (like a pricing tier or a dashboard widget), consider adding role="region" or aria-labelledby pointing to the title ID.
Contrast: The text-muted-foreground on the description ensures readability while establishing visual hierarchy without failing contrast ratios.