Skip to content

Overview

The Card component is a versatile container that groups related content into a visually distinct section. It supports configurable padding, shadow, hover effects, borders, and a glass morphism style. Cards use named slots for header, body (default), and footer regions.

Use cards for:

  • Dashboard widgets
  • Content previews
  • Settings panels
  • Feature showcases
  • Data summaries

Basic Usage

Card body content goes here.

<x-aura::card>
    <p>Card body content goes here.</p>
</x-aura::card>

Props

Prop Type Default Description
padding string 'md' Internal padding: sm, md, lg
shadow string 'md' Shadow depth: none, sm, md, lg, xl
hover bool false Add hover lift/shadow effect
bordered bool true Show border around the card
glass bool false Apply glass morphism style (translucent background)

Variants/Examples

Monthly Revenue

Revenue summary for the current month

Total revenue: $12,450.00

Growth: +15% from last month

<x-aura::card>
    <x-slot:header>
        <x-aura::card.title>Monthly Revenue</x-aura::card.title>
        <x-aura::card.description>Revenue summary for the current month</x-aura::card.description>
    </x-slot:header>

    <p>Total revenue: $12,450.00</p>
    <p>Growth: +15% from last month</p>

    <x-slot:footer>
        <x-aura::button variant="outline" size="sm">View Report</x-aura::button>
    </x-slot:footer>
</x-aura::card>

Hoverable Cards Grid

Users

1,234

Orders

567

Revenue

$89k

<div class="grid grid-cols-3 gap-4">
    <x-aura::card hover>
        <x-aura::card.title>Users</x-aura::card.title>
        <p class="text-3xl font-bold">1,234</p>
    </x-aura::card>

    <x-aura::card hover>
        <x-aura::card.title>Orders</x-aura::card.title>
        <p class="text-3xl font-bold">567</p>
    </x-aura::card>

    <x-aura::card hover>
        <x-aura::card.title>Revenue</x-aura::card.title>
        <p class="text-3xl font-bold">$89k</p>
    </x-aura::card>
</div>

Glass Morphism Style

Glassmorphism Card

Translucent background with blur effect for modern UI designs.

<x-aura::card glass :bordered="false">
    <x-aura::card.title>Glassmorphism Card</x-aura::card.title>
    <x-aura::card.description>
        Translucent background with blur effect for modern UI designs.
    </x-aura::card.description>
</x-aura::card>

Compact Card (Small Padding)

JD 
<x-aura::card padding="sm" shadow="sm">
    <div class="flex items-center gap-3">
        <x-aura::avatar name="Jane Doe" size="sm" />
        <div>
            <p class="font-medium">Jane Doe</p>
            <p class="text-sm text-gray-500">[email protected]</p>
        </div>
    </div>
</x-aura::card>

No Border, Large Shadow

Featured Article

Deep shadow with no border for a floating card effect.

<x-aura::card :bordered="false" shadow="xl" padding="lg">
    <x-aura::card.title>Featured Article</x-aura::card.title>
    <x-aura::card.description>
        Deep shadow with no border for a floating card effect.
    </x-aura::card.description>
</x-aura::card>

Sub-components

Card Title

Renders a styled <h3> heading.

My Title

<x-aura::card.title>My Title</x-aura::card.title>

Card Description

Renders a styled <p> paragraph for supplementary text.

Some description text.

<x-aura::card.description>Some description text.</x-aura::card.description>

Slots

Slot Description
Default Main body content
header Top section, typically for title and description
footer Bottom section, typically for actions

Accessibility

  • Cards render as <div> elements. For interactive cards (clickable), wrap in an <a> or add role="button" and keyboard handlers.
  • Content structure within cards should use proper heading levels (card.title renders <h3>).
  • Hover effects are visual-only and do not affect keyboard navigation.
  • Glass morphism maintains sufficient text contrast in both light and dark modes.