--- title: Cards --- # Cards Cards group related content and actions into contained, scannable blocks. Laravolt v7 uses Preline UI card patterns for consistent spacing, borders, and dark mode support. {% .lead %} ## Basic card ```blade

Card title

Card content goes here. This is a basic card with title and description.

``` ## Card with header and footer ```blade
{{-- Header --}}

Featured

{{-- Body --}}

Product name

Product description and details.

{{-- Footer --}}
View details
``` ## Stats card Display key metrics: ```blade

Total users

72,540

12%
``` ## List card Display items in a card: ```blade

Recent orders

@foreach($orders as $order)

Order #{{ $order->id }}

{{ $order->created_at->diffForHumans() }}

${{ number_format($order->total, 2) }}

{{ $order->status }}
@endforeach
``` ## Card grid Responsive grid of cards: ```blade
@foreach($products as $product)
{{ $product->name }}

{{ $product->name }}

{{ Str::limit($product->description, 100) }}

${{ number_format($product->price, 2) }}

View details
@endforeach
``` ## Interactive card (clickable) Make entire card clickable: ```blade

{{ $project->name }}

{{ $project->description }}

``` ## Card with image overlay ```blade
{{ $post->title }}

{{ $post->title }}

{{ $post->excerpt }}

``` ## Common patterns ### Dashboard stats grid ```blade
{{-- Total revenue --}}

Total revenue

$45,231.89

{{-- Repeat for other stats --}}
``` ### Empty state card ```blade

No orders yet

Start by creating your first order.

Create order
``` ## Verification commands Test card rendering: ```bash # Create a test view with cards # Verify responsive grid (sm:grid-cols-2 lg:grid-cols-3) # Check dark mode (dark:bg-neutral-900 dark:border-neutral-700) # Test hover states on interactive cards # Verify shadow transitions (hover:shadow-md) # Accessibility check # Verify clickable cards use not
# Verify proper heading hierarchy (h3 for card titles) # Check color contrast in dark mode ``` ## What to read next - [Buttons](/ui-components/buttons) — button placement in card footers - [Tables](/ui-foundation/tables) — Suitable table component - [UI foundation](/ui-foundation/overview) — Preline UI component library