Cards
Standard content blocks with title and body.
Card Title
This is a standard card component used to group related information together. Cards can contain text, images, and actions.
Another Card
Cards have consistent padding, rounded corners, and a subtle shadow that increases on hover to provide visual feedback.
Third Card
Use cards to organize content in a scannable, modular way that works well across different screen sizes.
Cards with header actions
Demonstrates the grid-based header layout (title, optional subtitle, and action buttons aligned left/right).
Active Policies
Current month
↑ 12% from last month
Claims Processed
Current month
↑ 8% from last month
Pending Reviews
Requires attention
↓ 15% from last month
Cards with actions inside
These cards include buttons and links inside the body to validate interactive-card keyboard behavior.
Project Alpha
Manage your project, invite collaborators, and track recent activity.
Report Summary
The weekly health report is available. You can review the PDF or share it with your team.
Quick Actions
Use the controls below to make quick updates.
Clickable card (stretched link)
Bootstrap-like stretched link: text stays unstyled, but the whole card is clickable.
View Details
Opens the details page
This pattern is best when clicking anywhere on the card should navigate to another page.
Analytics Overview
Summary for this week
Get a quick look at traffic and conversion performance.