Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Card

Displays a card with header, content, and footer.

Usage
Login to your account
Enter your email below to login to your account
Sign Up
Forgot your password?
example.blade.php 
<x-slate::card class="w-full max-w-sm">
    <x-slate::card-header>
        <x-slate::card-title>Login to your account</x-slate::card-title>
        <x-slate::card-description>
            Enter your email below to login to your account
        </x-slate::card-description>
        <x-slate::card-action>
            <x-slate::button as="a" href="#" variant="link" size="sm" class="h-auto p-0">
                Sign Up
            </x-slate::button>
        </x-slate::card-action>
    </x-slate::card-header>
    <x-slate::card-content class="grid gap-4">
        <x-slate::field>
            <x-slate::field-label for="card-email">Email</x-slate::field-label>
            <x-slate::input id="card-email" type="email" placeholder="[email protected]" />
        </x-slate::field>
        <x-slate::field>
            <div class="flex items-center justify-between gap-2">
                <x-slate::field-label for="card-password">Password</x-slate::field-label>
                <x-slate::button as="a" href="#" variant="link" size="sm" class="h-auto p-0 font-normal">
                    Forgot your password?
                </x-slate::button>
            </div>
            <x-slate::input id="card-password" type="password" />
        </x-slate::field>
    </x-slate::card-content>
    <x-slate::card-footer class="flex-col gap-2">
        <x-slate::button class="w-full">Login</x-slate::button>
        <x-slate::button class="w-full" variant="outline">Login with Google</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>

Composition
code 
Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Size

Use size="sm" for tighter spacing.

Scheduled reports
Weekly snapshots. No more manual exports.
  • Choose a schedule (daily, or weekly).
  • Send to channels or specific teammates.
  • Include charts, tables, and key metrics.
example.blade.php 
<x-slate::card size="sm" class="w-full max-w-sm">
    <x-slate::card-header>
        <x-slate::card-title>Scheduled reports</x-slate::card-title>
        <x-slate::card-description>
            Weekly snapshots. No more manual exports.
        </x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content>
        <ul class="grid gap-3 text-sm">
            <li class="flex items-center gap-2">
                <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
                Choose a schedule (daily, or weekly).
            </li>
            <li class="flex items-center gap-2">
                <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
                Send to channels or specific teammates.
            </li>
            <li class="flex items-center gap-2">
                <svg class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
                Include charts, tables, and key metrics.
            </li>
        </ul>
    </x-slate::card-content>
    <x-slate::card-footer class="flex-col gap-2">
        <x-slate::button class="w-full rounded-full">Set up scheduled reports</x-slate::button>
        <x-slate::button class="w-full rounded-full" variant="outline">See what's new</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>

Spacing

Override --card-spacing on the root. Defaults to 1.5rem (size="sm" uses 0.75rem).

16px
Tighter inset via CSS variable.

Useful for dense dashboards.

32px
Roomier inset for marketing surfaces.

Matches the largest spacing preset.

example.blade.php 
<div class="flex flex-wrap gap-2">
    <x-slate::button size="sm" variant="outline" disabled>16px</x-slate::button>
    <x-slate::button size="sm" variant="outline" disabled>20px</x-slate::button>
    <x-slate::button size="sm" variant="outline" disabled>24px</x-slate::button>
    <x-slate::button size="sm" variant="outline" disabled>32px</x-slate::button>
</div>

<div class="mt-4 grid gap-4 lg:grid-cols-2">
    <x-slate::card class="[--card-spacing:1rem]">
        <x-slate::card-header>
            <x-slate::card-title>16px</x-slate::card-title>
            <x-slate::card-description>Tighter inset via CSS variable.</x-slate::card-description>
        </x-slate::card-header>
        <x-slate::card-content>
            <p class="text-sm text-muted-foreground">Useful for dense dashboards.</p>
        </x-slate::card-content>
        <x-slate::card-footer>
            <x-slate::button size="sm" class="w-full">Continue</x-slate::button>
        </x-slate::card-footer>
    </x-slate::card>

    <x-slate::card class="[--card-spacing:2rem]">
        <x-slate::card-header>
            <x-slate::card-title>32px</x-slate::card-title>
            <x-slate::card-description>Roomier inset for marketing surfaces.</x-slate::card-description>
        </x-slate::card-header>
        <x-slate::card-content>
            <p class="text-sm text-muted-foreground">Matches the largest spacing preset.</p>
        </x-slate::card-content>
        <x-slate::card-footer>
            <x-slate::button size="sm" class="w-full">Continue</x-slate::button>
        </x-slate::card-footer>
    </x-slate::card>
</div>

Dividers and edge-to-edge content

Add border-b on the header when you want a top divider. Footer already includes a muted bar and top border. Bleed scrollable content with negative margin.

Terms of Service
Review the terms before accepting the agreement.

These terms govern your use of the workspace, including access to shared documents, project files, and collaboration tools.

You are responsible for the content you upload and for ensuring that your team has the appropriate permissions to view or edit it.

We may update features or limits as the service evolves. When those changes materially affect your workflow, we will notify your workspace administrators.

By continuing, you agree to keep your account credentials secure and to follow your organization's acceptable use policies.

example.blade.php 
<x-slate::card class="w-full max-w-lg">
    <x-slate::card-header class="border-b">
        <x-slate::card-title>Terms of Service</x-slate::card-title>
        <x-slate::card-description>
            Review the terms before accepting the agreement.
        </x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content class="-my-[var(--card-spacing)] max-h-40 space-y-4 overflow-y-auto py-[var(--card-spacing)] text-sm">
        <p>
            These terms govern your use of the workspace, including access to shared
            documents, project files, and collaboration tools.
        </p>
        <p>
            You are responsible for the content you upload and for ensuring that your
            team has the appropriate permissions to view or edit it.
        </p>
        <p>
            We may update features or limits as the service evolves. When those changes
            materially affect your workflow, we will notify your workspace administrators.
        </p>
        <p>
            By continuing, you agree to keep your account credentials secure and to
            follow your organization's acceptable use policies.
        </p>
    </x-slate::card-content>
    <x-slate::card-footer class="justify-end gap-2">
        <x-slate::button variant="outline">Decline</x-slate::button>
        <x-slate::button>Accept</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>

API Reference

Card
Prop Type Default Description
size default | sm default Sets --card-spacing to 1.5rem or 0.75rem
as string div Root HTML element

Parts

card-header, card-title, card-description, card-action, card-content, and card-footer all accept as and any HTML attributes (class, id, etc.).

Add border-b on the header when you want a top divider. Footer already includes a muted bar and top border. Bleed content with negative margin.

Last updated .