Github
  1. Blade Components
  5. Card

Card

Display related information in a single unit, optionally providing related actions.

Login to your account

Enter your email below to login to your account

Usage

<x-card>
    <x-card.header>
        <x-card.title>Header</x-card.title>
    </x-card.header>
    <x-card.body>Body</x-card.body>
    <x-card.footer>Footer</x-card.footer>
</x-card>

Style

Control the card style by setting the style attribute.

The Evil Rabbit Jumped over the Fence
The Evil Rabbit Jumped over the Fence
The Evil Rabbit Jumped over the Fence
The Evil Rabbit Jumped over the Fence
The Evil Rabbit Jumped over the Fence
The Evil Rabbit Jumped over the Fence
<div class="flex flex-col gap-y-4">
    <x-card>
        <x-card.header>
            <x-card.title :as-heading="false">The Evil Rabbit Jumped over the Fence</x-card.title>
        </x-card.header>

        <x-card.footer class="justify-end">
            <x-btn size="sm" style="ghost">Cancel</x-btn>
            <x-btn size="sm">Update</x-btn>
        </x-card.footer>
    </x-card>

    <x-card style="ghost">
        <x-card.header>
            <x-card.title :as-heading="false">The Evil Rabbit Jumped over the Fence</x-card.title>
        </x-card.header>

        <x-card.footer class="justify-end">
            <x-btn size="sm" style="ghost">Cancel</x-btn>
            <x-btn size="sm" style="secondary">Update</x-btn>
        </x-card.footer>
    </x-card>

    <x-card style="success">
        <x-card.header>
            <x-card.title :as-heading="false">The Evil Rabbit Jumped over the Fence</x-card.title>
        </x-card.header>

        <x-card.footer class="justify-end">
            <x-btn size="sm" style="ghost">Cancel</x-btn>
            <x-btn size="sm" style="success">Update</x-btn>
        </x-card.footer>
    </x-card>

    <x-card style="info">
        <x-card.header>
            <x-card.title :as-heading="false">The Evil Rabbit Jumped over the Fence</x-card.title>
        </x-card.header>

        <x-card.footer class="justify-end">
            <x-btn size="sm" style="ghost">Cancel</x-btn>
            <x-btn size="sm" style="info">Update</x-btn>
        </x-card.footer>
    </x-card>

    <x-card style="warning">
        <x-card.header>
            <x-card.title :as-heading="false">The Evil Rabbit Jumped over the Fence</x-card.title>
        </x-card.header>

        <x-card.footer class="justify-end">
            <x-btn size="sm" style="ghost">Cancel</x-btn>
            <x-btn size="sm" style="warning">Update</x-btn>
        </x-card.footer>
    </x-card>

    <x-card style="danger">
        <x-card.header>
            <x-card.title :as-heading="false">The Evil Rabbit Jumped over the Fence</x-card.title>
        </x-card.header>

        <x-card.footer class="justify-end">
            <x-btn size="sm" style="ghost">Cancel</x-btn>
            <x-btn size="sm" style="danger">Delete</x-btn>
        </x-card.footer>
    </x-card>
</div>

Card Title

For consistency, the x-card.title component can be used within x-card.header. It extends the x-heading component and sets the heading-level to 3 by default. Alternatively, native HTML headings can be used directly.

<x-card.title>Title</x-card.title>

<x-heading :heading-level="3">Title</x-heading>

<h3>Title</h3>

Actions

The x-card.header component has a dedicated x-slot:action slot intended for simple call-to-action elements.

Company Details

Name

Distorted Fusion

Website

distortedfusion.com
Go to 
<x-card>
    <x-card.header>
        <x-card.title :as-heading="false">Company Details</x-card.title>

        <x-slot:action>
            <x-btn size="sm" style="outline">Update Details</x-btn>
        </x-slot:action>
    </x-card.header>

    <x-list-group>
        <x-list-group.item>
            <x-slot:title>
                Name
            </x-slot:title>
            Distorted Fusion
        </x-list-group.item>
        <x-list-group.item href="https://distortedfusion.com" target="_blank">
            <x-slot:title>
                Website
            </x-slot:title>
            distortedfusion.com
        </x-list-group.item>
    </x-list-group>
</x-card>

List Groups

Cards will automatically modify the x-list-group component styling to match the card. You can use x-list-group components within either the x-card.body or x-card.footer component, or directly within x-card.

Webhook Details

Details the webhook activity.

Status

Last Activity

2 months ago 
<x-card>
    <x-card.header>
        <x-card.title>Webhook Details</x-card.title>
        <x-paragraph size="sm">Details the webhook activity.</x-paragraph>
    </x-card.header>

    <x-card.body>
        <x-list-group>
            <x-list-group.item>
                <x-slot:title>
                    Status
                </x-slot:title>
                <x-badge style="success">Active</x-badge>
            </x-list-group.item>
            <x-list-group.item>
                <x-slot:title>
                    Last Activity
                </x-slot:title>
                2 months ago
            </x-list-group.item>
        </x-list-group>
    </x-card.body>
</x-card>

Webhook Details

Details the webhook activity.

Status

Last Activity

2 months ago 
<x-card>
    <x-card.header>
        <x-card.title>Webhook Details</x-card.title>
        <x-paragraph size="sm">Details the webhook activity.</x-paragraph>
    </x-card.header>

    <x-list-group>
        <x-list-group.item>
            <x-slot:title>
                Status
            </x-slot:title>
            <x-badge style="success">Active</x-badge>
        </x-list-group.item>
        <x-list-group.item>
            <x-slot:title>
                Last Activity
            </x-slot:title>
            2 months ago
        </x-list-group.item>
    </x-list-group>
</x-card>

Component API

x-card

Attribute Default Description
style default string
Possible values default, muted, ghost, success, info, warning or danger.

On This Page
↓ ↑

Select

↵

Open

esc

Close