Cards Components
Card Collections
Complete card layouts and collection patterns built with your component library.
Product Cards Grid
E-commerce style product cards with images, pricing, and actions.
In Stock
4.8
Wireless Headphones
Premium noise-canceling headphones with superior sound quality.
$299
Low Stock
4.6
Smart Watch
Advanced fitness tracking with health monitoring features.
$399
Out of Stock
4.9
Laptop Stand
Ergonomic aluminum laptop stand for better posture.
$89
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<c-card class="overflow-hidden">
<img src="product-image.jpg" alt="Product" class="w-full h-48 object-cover">
<div class="p-4">
<div class="flex items-center justify-between mb-2">
<c-badge variant="success" size="sm">In Stock</c-badge>
<div class="flex items-center space-x-1">
<c-icon name="star" size="16" class="text-yellow-500 fill-current" />
<span class="text-sm">4.8</span>
</div>
</div>
<h3 class="font-semibold mb-2">Wireless Headphones</h3>
<p class="text-sm text-base-content/60 mb-3">Premium noise-canceling headphones.</p>
<div class="flex items-center justify-between">
<div class="text-xl font-bold">$299</div>
<c-button variant="primary" size="sm">Add to Cart</c-button>
</div>
</div>
</c-card>
</div>Preview
In Stock
4.8
Wireless Headphones
Premium noise-canceling headphones with superior sound quality.
$299
Code
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<c-card class="overflow-hidden">
<img src="product-image.jpg" alt="Product" class="w-full h-48 object-cover">
<div class="p-4">
<div class="flex items-center justify-between mb-2">
<c-badge variant="success" size="sm">In Stock</c-badge>
<div class="flex items-center space-x-1">
<c-icon name="star" size="16" class="text-yellow-500 fill-current" />
<span class="text-sm">4.8</span>
</div>
</div>
<h3 class="font-semibold mb-2">Wireless Headphones</h3>
<p class="text-sm text-base-content/60 mb-3">Premium noise-canceling headphones.</p>
<div class="flex items-center justify-between">
<div class="text-xl font-bold">$299</div>
<c-button variant="primary" size="sm">Add to Cart</c-button>
</div>
</div>
</c-card>
</div>Team Member Cards
Professional team member showcase with social links and roles.
John Doe
Senior Developer
Sarah Chen
UI/UX Designer
Mike Johnson
Product Manager
Emma Wilson
DevOps Engineer
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<c-card class="text-center p-6">
<c-avatar
src="profile-image.jpg"
size="xl"
class="mx-auto mb-4"
/>
<h3 class="font-semibold mb-1">John Doe</h3>
<p class="text-sm text-base-content/60 mb-4">Senior Developer</p>
<div class="flex justify-center space-x-3 mb-4">
<c-button variant="ghost" size="sm">
<c-icon name="github" size="16" />
</c-button>
<c-button variant="ghost" size="sm">
<c-icon name="linkedin" size="16" />
</c-button>
</div>
<c-button variant="outline" size="sm" class="w-full">
View Profile
</c-button>
</c-card>
</div>Preview
John Doe
Senior Developer
Code
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<c-card class="text-center p-6">
<c-avatar
src="profile-image.jpg"
size="xl"
class="mx-auto mb-4"
/>
<h3 class="font-semibold mb-1">John Doe</h3>
<p class="text-sm text-base-content/60 mb-4">Senior Developer</p>
<div class="flex justify-center space-x-3 mb-4">
<c-button variant="ghost" size="sm">
<c-icon name="github" size="16" />
</c-button>
<c-button variant="ghost" size="sm">
<c-icon name="linkedin" size="16" />
</c-button>
</div>
<c-button variant="outline" size="sm" class="w-full">
View Profile
</c-button>
</c-card>
</div>Feature Cards
Feature highlight cards with icons and descriptions.
Lightning Fast
Built for speed with optimized performance and minimal loading times.
Secure & Reliable
Enterprise-grade security with 99.9% uptime guarantee.
Team Collaboration
Work together seamlessly with real-time collaboration tools.
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<c-card class="p-6 text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
<c-icon name="zap" size="32" class="text-primary" />
</div>
<h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
<p class="text-base-content/60 mb-4">Built for speed with optimized performance.</p>
<c-button variant="outline" size="sm">Learn More</c-button>
</c-card>
</div>Preview
Lightning Fast
Built for speed with optimized performance and minimal loading times.
Secure & Reliable
Enterprise-grade security with 99.9% uptime guarantee.
Team Collaboration
Work together seamlessly with real-time collaboration tools.
Code
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<c-card class="p-6 text-center">
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
<c-icon name="zap" size="32" class="text-primary" />
</div>
<h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
<p class="text-base-content/60 mb-4">Built for speed with optimized performance.</p>
<c-button variant="outline" size="sm">Learn More</c-button>
</c-card>
</div>Pricing Cards
Pricing plan cards with features and call-to-action buttons.
Starter
$9/month
- Up to 5 projects
- 10GB storage
- Email support
- Priority support
Most Popular
Pro
$29/month
- Unlimited projects
- 100GB storage
- Priority support
- Advanced analytics
Enterprise
$99/month
- Everything in Pro
- Unlimited storage
- 24/7 phone support
- Custom integrations
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<c-card class="p-6 text-center">
<h3 class="text-xl font-semibold mb-2">Starter</h3>
<div class="text-3xl font-bold mb-4">$9<span class="text-base font-normal text-base-content/60">/month</span></div>
<ul class="space-y-3 mb-6 text-sm">
<li class="flex items-center">
<c-icon name="check" size="16" class="text-success mr-2" />
Up to 5 projects
</li>
<li class="flex items-center">
<c-icon name="check" size="16" class="text-success mr-2" />
10GB storage
</li>
</ul>
<c-button variant="outline" class="w-full">Get Started</c-button>
</c-card>
</div>Preview
Starter
$9/month
- Up to 5 projects
- 10GB storage
- Email support
- Priority support
Most Popular
Pro
$29/month
- Unlimited projects
- 100GB storage
- Priority support
- Advanced analytics
Enterprise
$99/month
- Everything in Pro
- Unlimited storage
- 24/7 phone support
- Custom integrations
Code
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<c-card class="p-6 text-center">
<h3 class="text-xl font-semibold mb-2">Starter</h3>
<div class="text-3xl font-bold mb-4">$9<span class="text-base font-normal text-base-content/60">/month</span></div>
<ul class="space-y-3 mb-6 text-sm">
<li class="flex items-center">
<c-icon name="check" size="16" class="text-success mr-2" />
Up to 5 projects
</li>
<li class="flex items-center">
<c-icon name="check" size="16" class="text-success mr-2" />
10GB storage
</li>
</ul>
<c-button variant="outline" class="w-full">Get Started</c-button>
</c-card>
</div>