Use cards to group related content into flexible, visually distinct blocks. Cards support headers, bodies, and footers, and can be styled extensively.
The card component does not come with predefined color variants but will reflect custom styling if the variant prop is used along with your own Tailwind utilities or theme classes.
Display related content in a styled container with optional header and footer sections. Cards support theming, sizing, and boolean customisation for borders, shadows, rings, and more.
The card component supports 9 different variants, each with its own colour scheme and styling:
<x-andach-card variant="default">
<x-slot:header>Default Variant</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="dark">
<x-slot:header>Dark Variant</x-slot:header>
<x-slot:body>This is the <strong>dark</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="light">
<x-slot:header>Light Variant</x-slot:header>
<x-slot:body>This is the <strong>light</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="brand">
<x-slot:header>Brand Variant</x-slot:header>
<x-slot:body>This is the <strong>brand</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="primary">
<x-slot:header>Primary Variant</x-slot:header>
<x-slot:body>This is the <strong>primary</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="secondary">
<x-slot:header>Secondary Variant</x-slot:header>
<x-slot:body>This is the <strong>secondary</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="success">
<x-slot:header>Success Variant</x-slot:header>
<x-slot:body>This is the <strong>success</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="warning">
<x-slot:header>Warning Variant</x-slot:header>
<x-slot:body>This is the <strong>warning</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card variant="danger">
<x-slot:header>Danger Variant</x-slot:header>
<x-slot:body>This is the <strong>danger</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>The card component supports three named slots:
| Slot | Description |
|---|---|
header |
Appears at the top of the card. |
body |
The main section of the card, usually containing most of the content. |
footer |
Appears at the bottom, often for actions or summaries. |
In addition to these unique slot options, there are also generic arguments available for all components.
| Attribute Name | Type | Default Value | Description |
|---|---|---|---|
variant |
string | null | Used to apply a specific styling preset or custom theme variant. |
size |
string | 'base' | Controls size of all internal elements (header, body, footer). |
Cards can be adjusted in five different sizes, which affect padding and text size across header, body, and footer:
<x-andach-card size="xs">
<x-slot:header>Extra Small</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card size="sm">
<x-slot:header>Small</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card size="base">
<x-slot:header>Default</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer></x-andach-card>
<x-andach-card size="lg">
<x-slot:header>Large</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card size="xl">
<x-slot:header>Extra Large</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>The following attributes are enabled in the config file and can be toggled using boolean props:
<x-andach-card :border="false">
<x-slot:header>Without Border</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card :divide="false">
<x-slot:header>Without Divide</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card :ring="true">
<x-slot:header>With Ring</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card :rounded="false">
<x-slot:header>Without Rounded</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>
<x-andach-card :shadow="false">
<x-slot:header>With Shadow</x-slot:header>
<x-slot:body>This is the <strong>default</strong> card.</x-slot:body>
<x-slot:footer>Card Footer</x-slot:footer>
</x-andach-card>