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 sections.

Installation

The Card component is part of Slate UI Kit and is available by default.

Usage
Card Title
Card description goes here.

Card content goes here.

example.blade.php 
<x-slate::card>
    <x-slate::card-header>
        <x-slate::card-title>Card Title</x-slate::card-title>
        <x-slate::card-description>Card description goes here.</x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content>
        <p>Card content goes here.</p>
    </x-slate::card-content>
    <x-slate::card-footer>
        <x-slate::button>Action</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>

Simple Card

A card without header or footer.

Simple card content.

example.blade.php 
<x-slate::card>
    <x-slate::card-content>
        <p>Simple card content.</p>
    </x-slate::card-content>
</x-slate::card>

Card with Header Only
Card Title
Card description.

Card content.

example.blade.php 
<x-slate::card>
    <x-slate::card-header>
        <x-slate::card-title>Card Title</x-slate::card-title>
        <x-slate::card-description>Card description.</x-slate::card-description>
    </x-slate::card-header>
    <x-slate::card-content>
        <p>Card content.</p>
    </x-slate::card-content>
</x-slate::card>

Card content.

example.blade.php 
<x-slate::card>
    <x-slate::card-content>
        <p>Card content.</p>
    </x-slate::card-content>
    <x-slate::card-footer>
        <x-slate::button variant="outline">Cancel</x-slate::button>
        <x-slate::button>Save</x-slate::button>
    </x-slate::card-footer>
</x-slate::card>

Card Variants

Cards can be styled with different variants using the variant prop.

Outlined card.

example.blade.php 
<x-slate::card variant="outlined">
    <x-slate::card-content>
        <p>Outlined card.</p>
    </x-slate::card-content>
</x-slate::card>

API Reference

Card Component
Prop Type Default Description
variant string "default" Card variant. Options: default, outlined
color string null Card color variant

Card Header

Container for card title and description.

Card Title
Prop Type Default Description
as string "h3" HTML element to render. Options: h1, h2, h3, h4, h5, h6

Card Description
Prop Type Default Description
as string "p" HTML element to render. Options: p, span, div

Card Content

Main content area of the card.

Footer section of the card, typically used for actions.

Accessibility

The Card component includes:

  • Proper semantic HTML structure
  • ARIA attributes where appropriate
  • Keyboard navigation support
Last updated .