Document

Cards are a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

 1<x-card form>
 2    <x-card.header title="Log in to your account">Enter your credentials</x-card.header>
 3    <x-card.body gap="4">
 4        <x-input label="Email Address" placeholder="Enter your email address" />
 5        <x-input label="Password" placeholder="Enter your password" type="password">
 6            <x-slot:labelAddon>
 7                <x-button type="link" size="sm">Forgot Password?</x-button>
 8            </x-slot:labelAddon>
 9        </x-input>
10        <x-checkbox label="Remember me" />
11    </x-card.body>
12    <x-card.footer gap="2" flex-column>
13        <x-button type="primary" class="w-100">Log In</x-button>
14        <x-button type="transparent" class="w-100">Create an account</x-button>
15    </x-card.footer>
16</x-card>

Border

Add a border the header or footer by adding the border attribute.

This is a default card. You can add any content here.

 1<x-card>
 2    <x-card.header border title="Default Card" /> 
 3    <x-card.body>
 4        This is a default card. You can add any content here.
 5    </x-card.body>
 6    <x-card.footer border flex gap="2"> 
 7        <x-button type="primary" size="sm">Primary</x-button>
 8        <x-button type="gray" size="sm">Secondary</x-button>
 9    </x-card.footer>
10</x-card>

Header Actions

Add actions to the header by using the actions slot.

This is a default card. You can add any content here.

 1<x-card>
 2    <x-card.header title="Inline Action">
 3        <x-slot:actions>
 4            <x-checkbox size="sm" reverse label="Show details" />
 5        </x-slot:actions>
 6    </x-card.header>
 7    <x-card.body>
 8        This is a default card. You can add any content here.
 9    </x-card.body>
10</x-card>
11 
12<x-card>
13    <x-card.header border title="Dropdown Action">
14        <x-slot:actions>
15            <x-dropdown id="card-dropdown-10482">
16                <x-slot:toggle type="transparent" icon="ellipsis-vertical--micro" size="sm"></x-slot:toggle>
17 
18                <x-button type="transparent" icon="document--outline">Details</x-button>
19                <x-button type="transparent" icon="users--outline">Members</x-button>
20                <x-button type="transparent" icon="check--outline">Tasks</x-button>
21 
22            </x-dropdown>
23        </x-slot:actions>
24    </x-card.header>
25    <x-card.body>
26        This is a default card. You can add any content here.
27    </x-card.body>
28</x-card>