Laravel Card Component

Free · MIT

Container component for grouping related content with header, body, and footer sections.

A Card built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::card>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

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

See the full API, props and live examples in the Card documentation.

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

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)