Card
Container component for grouping related content
Basic Usage
A simple card with default styling:
Card Title
This is a basic card component with some content inside.
<neura::card>
<neura::heading level="h3" size="md">
Card Title
</neura::heading>
<neura::text>
This is a basic card component.
</neura::text>
</neura::card>Sizes
Cards come in multiple sizes to control their maximum width:
Extra Small (xs)
max-w-xs
Small (sm)
max-w-sm
Medium (md)
max-w-md
Large (lg)
max-w-lg
Extra Large (xl)
max-w-xl
2XL (2xl)
max-w-2xl
Full (full)
max-w-full
<neura::card size="xs">...</neura::card>
<neura::card size="sm">...</neura::card>
<neura::card size="md">...</neura::card>
<neura::card size="lg">...</neura::card>
<neura::card size="xl">...</neura::card>
<neura::card size="2xl">...</neura::card>
<neura::card size="full">...</neura::card>Complex Content
Cards can contain any type of content:
John Doe
Product Designer
Cards are perfect for displaying user profiles, product information, or any grouped content that needs visual separation from surrounding elements.
<neura::card size="lg">
<div class="space-y-4">
<div class="flex items-start gap-4">
<neura::avatar size="lg" />
<div class="flex-1">
<neura::heading level="h3" size="sm">
John Doe
</neura::heading>
<neura::text class="text-sm">
Product Designer
</neura::text>
</div>
</div>
<neura::text>
Cards are perfect for displaying content...
</neura::text>
<div class="flex gap-2">
<neura::button variant="primary" size="sm">
Follow
</neura::button>
<neura::button variant="outline" size="sm">
Message
</neura::button>
</div>
</div>
</neura::card>Grid Layout
Cards work great in grid layouts:
Feature One
Description of the first feature
Feature Two
Description of the second feature
Feature Three
Description of the third feature
<div class="grid md:grid-cols-3 gap-6">
<neura::card>
<neura::icon name="cube" />
<neura::heading>Feature One</neura::heading>
<neura::text>Description...</neura::text>
</neura::card>
<!-- More cards -->
</div>Custom Styling
Override default styles with Tailwind classes:
Info Card
Custom blue themed card
Success Card
Custom green themed card
<neura::card class="bg-blue-50 dark:bg-blue-950 border-blue-200">
<neura::heading class="text-blue-900">
Info Card
</neura::heading>
</neura::card>Cartes Interactives
Créez des cartes cliquables avec des effets au hover:
Documentation
Comprehensive guides and examples
Components
Ready-to-use UI components
Quick Start
Get up and running quickly
<neura::card class="hover:shadow-lg hover:border-neutral-400 transition-all cursor-pointer">
<div class="space-y-3">
<neura::icon name="document-text" />
<neura::heading>Documentation</neura::heading>
<neura::text>Comprehensive guides</neura::text>
</div>
</neura::card>Cards with Badges
Add badges to indicate status or categories:
New Feature Release
Discover the latest features and improvements in this release.
Beta Program
Join our beta program and get early access to new features.
<neura::card>
<div class="flex items-start justify-between">
<neura::heading>Title</neura::heading>
<neura::badge color="green">New</neura::badge>
</div>
<neura::text>Content here</neura::text>
</neura::card>Statistics Cards
Use cards to display metrics and statistics:
Total Users
12,543
12.5%
Revenue
$45,231
8.2%
Active Projects
24
No change
Conversion
3.24%
2.1%
<neura::card>
<div class="space-y-2">
<neura::text class="text-sm">Total Users</neura::text>
<neura::heading level="h2">12,543</neura::heading>
<div class="text-sm text-green-600">
↑ 12.5%
</div>
</div>
</neura::card>Cards with Images
Add images to make your cards more visual:
Beautiful Gradients
Create stunning visual effects with gradient backgrounds
Fresh Colors
Modern color palettes for your design system
Warm Tones
Vibrant and energetic color combinations
<neura::card class="overflow-hidden p-0">
<div class="h-48 bg-linear-to-br from-blue-500 to-purple-600"></div>
<div class="p-6 space-y-3">
<neura::heading>Title</neura::heading>
<neura::text>Description</neura::text>
<neura::button>Action</neura::button>
</div>
</neura::card>Cartes de Liste
Use des cartes pour afficher des listes d'éléments:
Recent Activity
New user registered
2 minutes ago
Payment received
15 minutes ago
New message received
1 hour ago
<neura::card>
<neura::heading>Recent Activity</neura::heading>
<div class="space-y-3">
<div class="flex items-start gap-3">
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
<div>
<neura::text>New user registered</neura::text>
<neura::text class="text-xs">2 minutes ago</neura::text>
</div>
</div>
</div>
</neura::card>Cartes avec Actions Multiples
Ajoutez plusieurs actions pour plus d'interactivité:
Project Alpha
A comprehensive web application for managing team projects and workflows
5 members
Due Dec 31
<neura::card>
<div class="flex justify-between">
<div>
<neura::heading>Project Title</neura::heading>
<neura::text>Description</neura::text>
</div>
<neura::badge>Status</neura::badge>
</div>
<div class="flex gap-2">
<neura::button icon="pencil"></neura::button>
<neura::button>View</neura::button>
</div>
</neura::card>Best Practices
Use des cartes pour regrouper du contenu lié
Les cartes aident à organiser l'information et créent une hiérarchie visuelle claire
Gardez le contenu cohérent
Use la même structure et le même espacement pour les cartes similaires
Évitez les cartes trop chargées
Limitez le contenu pour maintenir la lisibilité et l'impact visuel
Use les grilles pour l'alignement
Les grilles créent un layout propre et professionnel pour plusieurs cartes
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| size | string | full | Maximum width (xs, sm, md, lg, xl, 2xl, full) |