The Evil Rabbit Jumped over the Fence.
Card Footer
<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>
| Attribute |
Default |
Description |
style |
default |
string
Possible values default, success, info, warning or danger. |
Control the card style by supplying 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
<div class="space-y-2">
<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="default">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="default">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="default">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="default">Cancel</x-btn>
<x-btn size="sm" style="danger">Delete</x-btn>
</x-card.footer>
</x-card>
</div>
For consistency the x-card.title component can be used within the x-card.header component. The x-card.title extends the x-heading component and sets the heading-level to 3 by default. Alternatively it's also possible to simply provide the native HTML headings directly.
<x-card.title>Title</x-card.title>
<x-heading :heading-level="3">Title</x-heading>
<h3>Title</h3>
The x-card.heading component has a dedicated x-slot:actions slot intended for simple call to actions elements.
Website
distortedfusion.com
<x-card>
<x-card.header>
<x-card.title :as-heading="false">Company Details</x-card.title>
<x-slot:action>
<x-btn size="sm">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>
Cards will automatically modify the x-list-group component styling to match the card. You can either use x-list-group components within either the x-card.body or x-card.footer components or directly within the x-card component.
Details the webhook activity.
Last Activity
2 months ago
<x-card>
<x-card.header>
<x-card.title :as-heading="false">Webhook Details</x-card.title>
</x-card.header>
<x-card.body class="space-y-6">
<x-paragraph>Details the webhook activity.</x-paragraph>
<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>
Details the webhook activity.
Last Activity
2 months ago
<x-card>
<x-card.header>
<x-card.title :as-heading="false">Webhook Details</x-card.title>
</x-card.header>
<x-card.body>
<x-paragraph>Details the webhook activity.</x-paragraph>
</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>