Card
Displays a card with header, content, and footer.
Default
Simple card with content.
html
Card Title
Card description goes here.
Card content with some details about this item that needs to be displayed to the user.
<div class="vt-card">
<div class="vt-card-header">
<h3 class="vt-text-lg vt-font-semibold">Card Title</h3>
<p class="vt-text-sm vt-text-mains-quaternary vt-mt-1.5">Card description.</p>
</div>
<div class="vt-card-body">
<p class="vt-text-sm">Card content...</p>
</div>
</div>With Header & Footer
Card with distinct sections.
Create project
Deploy your new project in one-click.
Select
Stats Cards
Cards for displaying metrics.
Total Revenue
$45,231.89
+20.1% from last month
Subscriptions
+2,350
+180.1% from last month
Active Now
+573
+201 since last hour
Interactive
Hoverable clickable cards.
Desktop
macOS, Windows, Linux
Mobile
iOS, Android
Notification Card
Card as a notification list.
Notifications
You have 3 unread messages.
Your call has been confirmed.
1 hour ago
You have a new message!
2 hours ago
Your subscription is expiring soon!
5 hours ago
API Reference
All utility classes available for the Card component.
| Class | Type | Description |
|---|---|---|
vt-card |
Base | Card container with border, rounded corners, and surface background |
vt-card-header |
Base | Card header section with padding |
vt-card-body |
Base | Card content/body section with padding |
vt-p-6 |
Layout | Standard padding for card content areas |
vt-max-w-sm |
Size | Constrains card width for form-style layouts |
vt-max-w-md |
Size | Medium constrained width for wider cards |
vt-rounded-2xl |
Base | Large border radius on the card container |
vt-border vt-border-border-default |
Base | Default border styling |
vt-bg-surfaces-surface |
Base | Surface background color |
vt-hover:border-info-primary |
Modifier | Blue border on hover for interactive cards |
vt-cursor-pointer |
Modifier | Pointer cursor for clickable cards |
vt-space-y-4 |
Layout | Vertical spacing between card body elements |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Semantics | Use article element for standalone content cards |
| Heading | Card titles should use appropriate heading level for document structure |
| Interactive | If entire card is clickable, use a single link/button — avoid nested interactives |
| Images | Card images need alt text; decorative images use alt="" |