Logo
Neura
Back to Home

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

3XL (3xl)

max-w-3xl

4XL (4xl)

max-w-4xl

5XL (5xl)

max-w-5xl

6XL (6xl)

max-w-6xl

7XL (7xl)

max-w-7xl

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="3xl">...</neura::card>
<neura::card size="4xl">...</neura::card>
<neura::card size="5xl">...</neura::card>
<neura::card size="6xl">...</neura::card>
<neura::card size="7xl">...</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>

Variants

Cards come in multiple style variants:

Default

Standard card with border and background

Outline

Thick border with transparent background

Soft

Subtle background with soft appearance

Elevated

Enhanced shadow for depth

Flat

No border, clean appearance

Ghost

Transparent, no border or background 
<neura::card variant="default">...</neura::card>
<neura::card variant="outline">...</neura::card>
<neura::card variant="soft">...</neura::card>
<neura::card variant="elevated">...</neura::card>
<neura::card variant="flat">...</neura::card>
<neura::card variant="ghost">...</neura::card>

Colors

Apply color themes to cards:

Primary

Primary color theme

Success

Success color theme

Danger

Danger color theme

Warning

Warning color theme

Info

Info color theme

Secondary

Secondary color theme 
<neura::card variant="soft" color="primary">...</neura::card>
<neura::card variant="outline" color="success">...</neura::card>
<neura::card variant="default" color="danger">...</neura::card>

Padding

Control the internal spacing of cards:

None

No padding

Extra Small

Minimal padding

Small

Small padding

Normal

Default padding

Medium

Medium padding

Large

Large padding

Extra Large

Extra large padding 
<neura::card padding="none">...</neura::card>
<neura::card padding="xs">...</neura::card>
<neura::card padding="sm">...</neura::card>
<neura::card padding="normal">...</neura::card>
<neura::card padding="md">...</neura::card>
<neura::card padding="lg">...</neura::card>
<neura::card padding="xl">...</neura::card>

Shadows

Control the shadow depth of cards:

None

No shadow

Extra Small

Minimal shadow

Small

Default shadow

Medium

Medium shadow

Large

Large shadow

Extra Large

Extra large shadow

2XL

Maximum shadow

Inner

Inner shadow 
<neura::card shadow="none">...</neura::card>
<neura::card shadow="xs">...</neura::card>
<neura::card shadow="sm">...</neura::card>
<neura::card shadow="md">...</neura::card>
<neura::card shadow="lg">...</neura::card>
<neura::card shadow="xl">...</neura::card>
<neura::card shadow="2xl">...</neura::card>
<neura::card shadow="inner">...</neura::card>

Border Radius

Control the corner rounding of cards:

None

Sharp corners

Small

Small radius

Medium

Medium radius

Large

Default radius

Extra Large

Extra large radius

2XL

Very large radius

3XL

Maximum radius

Full

Fully rounded (pill shape) 
<neura::card rounded="none">...</neura::card>
<neura::card rounded="sm">...</neura::card>
<neura::card rounded="md">...</neura::card>
<neura::card rounded="lg">...</neura::card>
<neura::card rounded="xl">...</neura::card>
<neura::card rounded="2xl">...</neura::card>
<neura::card rounded="3xl">...</neura::card>
<neura::card rounded="full">...</neura::card>

Combining Properties

Combine multiple properties to create custom card styles:

Premium Card

Elevated card with primary color, large padding, extra shadow, and rounded corners

Success Card

Outline variant with success color and enhanced styling

Soft Info Card

Soft variant with info color, extra padding, no shadow, and full radius

Warning Card

Default variant with warning color and compact styling 
<neura::card 
    variant="elevated" 
    color="primary" 
    padding="lg" 
    shadow="xl" 
    rounded="xl">
    ...
</neura::card>

<neura::card 
    variant="outline" 
    color="success" 
    padding="md" 
    shadow="lg" 
    rounded="2xl">
    ...
</neura::card>

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>

Interactive Cards

Create clickable cards with hover effects:

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>

List Cards

Use cards to display lists of items:

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>

Cards with Multiple Actions

Add multiple actions for more interactivity:

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 cards to group related content
Cards help organize information and create clear visual hierarchy
Keep content consistent
Use the same structure and spacing for similar cards
Avoid overcrowded cards
Limit content to maintain readability and visual impact
Use grids for alignment
Grids create a clean and professional layout for multiple cards

Properties

Property Type Default Description
size string full Maximum width (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full)
variant string default Style variant (default, outline, soft, elevated, flat, ghost)
color string|null null Color theme (primary, secondary, success, danger, warning, info)
padding string normal Internal spacing (none, xs, sm, normal, md, lg, xl)
shadow string sm Shadow depth (none, xs, sm, md, lg, xl, 2xl, inner)
rounded string lg Corner radius (none, sm, md, lg, xl, 2xl, 3xl, full)