Card
Displays a card with header, content, and footer.
Basic Card
A simple card with header, content, and footer.
Card Title
Card Description
Card Content
Card Footer
Notifications Card
A card showing notifications with interactive elements.
Notifications
You have 3 unread messages.
Push Notifications
Send notifications to device.
Your call has been confirmed.
1 hour ago
You have a new message!
1 hour ago
Your subscription is expiring soon!
2 hours ago
Form Card
A card containing a form with inputs and actions.
Create project
Deploy your new project in one-click.
Card with Action
A card with an action button in the header.
Team Settings
Manage your team settings and preferences.
Team members: 12
Active projects: 8
Storage used: 2.4 GB
Interactive Card
A card with Datastar interactivity for dynamic content.
Interactive Post
This card demonstrates Datastar reactivity.
This is a sample post that you can interact with using the buttons below.
Component Variations
Different combinations of card components.
Content Only
Header Only
This is a card with a header and a description.
Header + Content
This is a card with a header and content.
Content
Footer Only
Header + Footer
This is a card with a header and a footer.
Footer
Complete Card
This card has all components.
Content
Footer