Cards Component
Flexible container components for displaying content in organized sections.
Basic Cards
Simple container cards with consistent padding and styling.
Simple Card
This is a basic card with simple content. Perfect for displaying information in a clean, organized way.
Card with Header
This card has a distinct header section that helps organize content hierarchically.
Card with Footer
This card includes a footer section for actions or additional information.
Footer content goes here
<!-- Simple Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Card Title</h3>
<p class="text-gray-600 dark:text-gray-400">Card content goes here.</p>
</div>
<!-- Card with Header -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Header Title</h3>
</div>
<div class="p-6">
<p class="text-gray-600 dark:text-gray-400">Card content goes here.</p>
</div>
</div>Cards with Images
Cards that incorporate images for visual appeal and better content presentation.
Image Card
A card with an image at the top, perfect for showcasing visual content.
Side Image
Card with image positioned on the side for a horizontal layout.
Overlay Card
Content overlaid on background image with dark overlay for readability.
<!-- Card with Top Image -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<img src="image.jpg" alt="Image" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Card Title</h3>
<p class="text-gray-600 dark:text-gray-400">Card description here.</p>
</div>
</div>Cards with Actions
Cards that include interactive elements like buttons, links, and other actions.
Task Completion
Complete the user interface design for the new dashboard component.
Project Update
Review and update project documentation with the latest requirements.
Completed<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Card Title</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Card description goes here.</p>
<div class="flex items-center justify-between">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
Status
</span>
<div class="flex space-x-2">
<button class="btn-secondary">Edit</button>
<button class="btn-primary">View</button>
</div>
</div>
</div>Project Card Mockups
Specialized cards designed specifically for displaying project information in the task management app.
Website Redesign
Complete overhaul of the company website with modern design principles and improved user experience.
Mobile App Launch
Successfully launched the mobile application with all planned features and positive user feedback.
New CRM Integration
Planning phase for integrating a new CRM system to streamline customer interactions and data.