Flexible card components for displaying content in a contained format.
This is a basic card with just a body section.
Card with header and body.
<div class="card">
<div class="card-header">
<h3 class="card-title">Card Title</h3>
</div>
<div class="card-body">Content here</div>
</div>
With a subtitle
This card has a header with title and subtitle, a body section, and a footer with actions.
Using the w-card component with just a title.
Using the w-card component with title and footer props.
<w-card title="Simple Card">
<p>Card content here</p>
</w-card>
<w-card title="With Footer" footer="Footer text">
<p>Card content here</p>
</w-card>
Compact padding for smaller content.
Standard padding for regular content.
More padding for spacious layouts.
<div class="card card-sm">...</div>
<div class="card">...</div>
<div class="card card-lg">...</div>
No border, shadow instead.
No border, subtle background.
Thicker border for emphasis.
<div class="card card-elevated">...</div>
<div class="card card-flat">...</div>
<div class="card card-bordered">...</div>
This card lifts on hover.
Perfect for clickable items.
Great for selection UIs.
<div class="card card-interactive">...</div>
A card with primary color accent.
A card with success color accent.
A card with warning color accent.
A card with danger color accent.
<div class="card card-primary">...</div>
<div class="card card-success">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>
| Class | Description |
|---|---|
card | Base card container |
card-header | Card header section |
card-title | Card title styling |
card-subtitle | Card subtitle styling |
card-body | Card body/content section |
card-footer | Card footer section |
card-image | Image inside card |
card-sm | Small card (less padding) |
card-lg | Large card (more padding) |
card-elevated | Shadow instead of border |
card-flat | No border, subtle background |
card-bordered | Thicker border |
card-interactive | Hover lift effect |
card-horizontal | Horizontal layout |
card-primary | Primary color accent |
card-success | Success color accent |
card-warning | Warning color accent |
card-danger | Danger color accent |
| Prop | Description |
|---|---|
title | Card header title (optional) |
footer | Card footer content (optional) |
size | Size class: card-sm, card-lg |
variant | Style class: card-elevated, card-primary, etc. |