Card
Cards are flexible content containers with multiple variants and supporting elements. They're perfect for grouping related information and actions.
Basic Usage
The most basic card uses the .card class with a .card-body container.
Card Title
Some example content for the card body. This text demonstrates how content flows within the card container.
<div class="card">
<div class="card-body">
<h3 class="card-title">Card Title</h3>
<p class="card-text">Some example content for the card body.</p>
</div>
</div>Card with Actions
Cards can include action buttons in a dedicated actions area.
Project Update
Your project has been successfully updated with the latest changes. Review the modifications and deploy when ready.
<div class="card">
<div class="card-body">
<h3 class="card-title">Project Update</h3>
<p class="card-text">Your project has been updated.</p>
<div class="card-actions">
<button class="btn btn-primary btn-sm">Deploy</button>
<button class="btn btn-ghost btn-sm">Review</button>
</div>
</div>
</div>Card with Image
Cards can include images at the top, perfect for product cards or article previews.
Beautiful Landscape
A stunning view of nature captured in this beautiful landscape photograph.
<div class="card">
<figure class="card-image">
<img src="image.jpg" alt="Card image" />
</figure>
<div class="card-body">
<h3 class="card-title">Beautiful Landscape</h3>
<p class="card-text">A stunning view of nature.</p>
<div class="card-actions">
<button class="btn btn-primary btn-sm">View Full Size</button>
<button class="btn btn-ghost btn-sm">Share</button>
</div>
</div>
</div>Card Variants
Bordered Cards
Add a visible border for better definition.
Bordered Card
This card has a visible border for better visual separation from the background.
<div class="card card-bordered">
<div class="card-body">
<h3 class="card-title">Bordered Card</h3>
<p class="card-text">This card has a visible border.</p>
</div>
</div>Compact Cards
Compact cards have reduced padding for tighter layouts.
Compact Card
This card uses less padding for a more compact appearance.
<div class="card card-compact">
<div class="card-body">
<h3 class="card-title">Compact Card</h3>
<p class="card-text">Reduced padding for tighter layouts.</p>
</div>
</div>Elevated Cards
Cards with shadow elevation for a lifted appearance.
Elevated Card
This card appears elevated with a prominent shadow effect.
<div class="card card-elevated">
<div class="card-body">
<h3 class="card-title">Elevated Card</h3>
<p class="card-text">Appears elevated with shadow.</p>
</div>
</div>Interactive Cards
Cards can be made clickable for navigation or selection.
Analytics
View detailed analytics and reports for your projects.
Settings
Configure your account settings and preferences.
<div class="card card-hover cursor-pointer" onclick="handleCardClick()">
<div class="card-body">
<h4 class="card-title">Analytics</h4>
<p class="card-text">View detailed analytics and reports.</p>
<div class="badge badge-primary">Pro</div>
</div>
</div>Card Layouts
Horizontal Cards
Cards can be laid out horizontally with side-by-side image and content.
Premium Watch
A stylish and sophisticated timepiece with modern design elements and premium materials.
<div class="card card-horizontal">
<figure class="card-image">
<img src="product.jpg" alt="Product" />
</figure>
<div class="card-body">
<h3 class="card-title">Product Name</h3>
<p class="card-text">Product description here.</p>
<div class="card-actions">
<button class="btn btn-primary btn-sm">Add to Cart</button>
</div>
</div>
</div>Card Grid
Multiple cards arranged in a responsive grid layout.
Feature 1
Description of the first feature.
Feature 2
Description of the second feature.
Feature 3
Description of the third feature.
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Feature 1</h4>
<p class="card-text">Description here.</p>
</div>
</div>
<!-- More cards... -->
</div>TypeScript Usage
import { Card } from 'sageui';
// Create a card instance
const card = new Card({
title: 'My Card',
variant: 'bordered',
image: 'image.jpg',
children: 'Card content goes here.',
actions: [
{ text: 'Primary Action', variant: 'primary' },
{ text: 'Secondary Action', variant: 'ghost' }
]
});
// Mount to DOM
card.mount('#card-container');CSS Classes Reference
| Class | Description |
|---|---|
.card | Base card container |
.card-body | Main content area of the card |
.card-title | Card title styling |
.card-text | Card body text styling |
.card-actions | Container for action buttons |
.card-image | Container for card images |
.card-bordered | Adds visible border to card |
.card-compact | Reduces padding for compact layout |
.card-elevated | Adds shadow elevation effect |
.card-hover | Adds hover effects for interactive cards |
.card-horizontal | Horizontal layout with side-by-side content |
Accessibility
SageUI cards are designed with accessibility in mind:
- Semantic HTML: Proper heading hierarchy and semantic elements
- Keyboard Navigation: Interactive cards support keyboard interaction
- Screen Reader Support: Proper labeling and descriptions
- Focus Management: Clear focus indicators for interactive elements
- Image Alt Text: Proper alternative text for images
Best Practices
- Use proper heading hierarchy (
h2,h3, etc.) for card titles - Provide meaningful alt text for images
- Ensure sufficient color contrast
- Make interactive cards keyboard accessible
<!-- Good: Accessible card with proper semantics -->
<article class="card" tabindex="0" role="button" aria-label="View analytics dashboard">
<div class="card-body">
<h3 class="card-title">Analytics Dashboard</h3>
<p class="card-text">View comprehensive analytics for your projects.</p>
<div class="card-actions">
<button class="btn btn-primary">Open Dashboard</button>
</div>
</div>
</article>
<!-- Good: Card with image and proper alt text -->
<div class="card">
<figure class="card-image">
<img src="product.jpg" alt="Eco-friendly water bottle in sage green color" />
</figure>
<div class="card-body">
<h3 class="card-title">Eco Water Bottle</h3>
<p class="card-text">Sustainable and stylish hydration solution.</p>
</div>
</div>Examples
Product Card
Product Name
$99.99
Brief product description highlighting key features.
<div class="card card-bordered" style="max-width: 300px;">
<figure class="card-image">
<img src="product.jpg" alt="Product name" class="w-full h-48 object-cover" />
</figure>
<div class="card-body">
<h3 class="card-title">Product Name</h3>
<p class="card-text text-gray-600">$99.99</p>
<p class="card-text">Brief product description highlighting key features.</p>
<div class="flex items-center justify-between mt-4">
<div class="rating">
<span class="text-yellow-400">★★★★★</span>
<span class="text-sm text-gray-500">(24)</span>
</div>
<div class="card-actions">
<button class="btn btn-primary btn-sm">Add to Cart</button>
</div>
</div>
</div>
</div>Notification Card
John Doe commented on your post
"Great insights! I'd love to hear more about your implementation approach."
<div class="card card-bordered">
<div class="card-body">
<div class="flex items-start">
<div class="avatar mr-3">
<div class="avatar-image w-10 h-10">
<img src="avatar.jpg" alt="User avatar" />
</div>
</div>
<div class="flex-1">
<h4 class="card-title text-base">John Doe commented on your post</h4>
<p class="card-text text-sm text-gray-600">
"Great insights! I'd love to hear more about your implementation approach."
</p>
<div class="flex items-center mt-2 text-xs text-gray-500">
<span>2 hours ago</span>
<span class="mx-2">•</span>
<button class="text-600 hover:underline">Reply</button>
</div>
</div>
</div>
</div>
</div>