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
Website
<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
Active
Last Activity
<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
Active
Last Activity
<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 |
stringPossible values default, muted, ghost, success, info, warning or danger. |