Card
Use cards to group related information in a container
Theme
<sa-card class="relative mx-auto w-full max-w-sm pt-0">
<div class="absolute inset-0 z-30 aspect-video"></div>
<img
src="https://images.unsplash.com/photo-1563492065599-3520f775eeed?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2274"
alt="Photo by cartayen on Unsplash"
title="Photo by cartayen on Unsplash"
class="relative z-20 aspect-video w-full object-cover"
/>
<sa-card-header>
<sa-card-title>Bangkok, Thailand</sa-card-title>
<sa-card-description>
Bangkok is an exhilarating metropolis where ancient, gilded temples stand in vibrant contrast to modern
skyscrapers, world-class street food, and electrifying nightlife.
</sa-card-description>
</sa-card-header>
<sa-card-footer>
<sa-button variant="ButtonVariant.Outline" class="w-full">
<sa-icon name="bookmark"/>
Bookmark
</sa-button>
</sa-card-footer>
</sa-card>Usage
Use cards to group related content and actions inside a bordered container.
<sa-card>
<sa-card-header>
<sa-card-title>...</sa-card-title>
<sa-card-description>...</sa-card-description>
</sa-card-header>
<sa-card-content>
...
</sa-card-content>
<sa-card-footer>...</sa-card-footer>
</sa-card>Examples
Default size
The default size gives the header, content and footer their standard padding.
Theme
<sa-card class="mx-auto w-full max-w-sm">
<sa-card-header>
<sa-card-title>Marrakech City Break</sa-card-title>
<sa-card-description>
Four nights, departing 12 March
</sa-card-description>
</sa-card-header>
<sa-card-content>
<p>
Includes return flights from Amsterdam, a riad in the medina with
breakfast, and a guided walking tour on the first morning.
</p>
</sa-card-content>
<sa-card-footer>
<sa-button variant="ButtonVariant.Outline" class="w-full">
View Itinerary
</sa-button>
</sa-card-footer>
</sa-card>Small size
Use size="CardSize.Small" for tighter padding and smaller text, useful in dense layouts.
Theme
<sa-card size="CardSize.Small" class="mx-auto w-full max-w-sm">
<sa-card-header>
<sa-card-title>Airport Transfer</sa-card-title>
<sa-card-description>
Private car, arrival day
</sa-card-description>
</sa-card-header>
<sa-card-content>
<p>
A driver meets you in the arrivals hall and takes you straight to
your riad. The journey takes around 25 minutes.
</p>
</sa-card-content>
<sa-card-footer>
<sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small" class="w-full">
Change Pickup Time
</sa-button>
</sa-card-footer>
</sa-card>Header with border
Add border-b to <sa-card-header> to separate the header from the content.
Theme
<sa-card class="mx-auto w-full max-w-sm">
<sa-card-header class="border-b">
<sa-card-title>Header with Border</sa-card-title>
<sa-card-description>
This is a card with a header that has a bottom border.
</sa-card-description>
</sa-card-header>
<sa-card-content>
<p>
The header has a border-b class applied, creating a visual
separation between the header and content sections.
</p>
</sa-card-content>
</sa-card>Footer with border
Add border-t to <sa-card-footer> to separate the footer from the content.
Theme
<sa-card class="mx-auto w-full max-w-sm">
<sa-card-content>
<p>
The footer has a border-t class applied, creating a visual
separation between the content and footer sections.
</p>
</sa-card-content>
<sa-card-footer class="border-t">
<sa-button variant="ButtonVariant.Outline" class="w-full">
Footer with Border
</sa-button>
</sa-card-footer>
</sa-card>Image
Place an <img> as the first child and remove the top padding with pt-0 for an edge-to-edge image.
Theme
<sa-card class="relative mx-auto w-full max-w-sm pt-0">
<div class="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color"></div>
<img
src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Photo by mymind on Unsplash"
title="Photo by mymind on Unsplash"
class="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
/>
<sa-card-header>
<sa-card-title>Cappadocia, Türkiye</sa-card-title>
<sa-card-description>
Hot-air balloons drift over the fairy chimneys at sunrise in one of the
world's most surreal landscapes.
</sa-card-description>
</sa-card-header>
<sa-card-footer>
<sa-button class="w-full">
<sa-icon name="plus"/>
Add to Wishlist
</sa-button>
</sa-card-footer>
</sa-card>Forms
Cards compose with Field and Button to build complete forms.
Theme
<sa-card class="mx-auto w-full max-w-sm">
<sa-card-header>
<sa-card-title>Sign in to Voyager Travel</sa-card-title>
<sa-card-description>
Enter your email below to sign in to your account
</sa-card-description>
</sa-card-header>
<sa-card-content>
<form>
<sa-field-group>
<sa-field>
<sa-field-label for="email">Email</sa-field-label>
<sa-input id="email" type="email" placeholder="ibn.battuta@rihlah.travel" required/>
</sa-field>
<sa-field>
<div class="flex items-center">
<sa-field-label for="password">Password</sa-field-label>
<a href="#" class="ml-auto inline-block underline-offset-4 hover:underline">
Forgot your password?
</a>
</div>
<sa-input id="password" type="password" required/>
</sa-field>
</sa-field-group>
</form>
</sa-card-content>
<sa-card-footer class="flex-col gap-2">
<sa-button type="submit" class="w-full">
Sign in
</sa-button>
<sa-button variant="ButtonVariant.Outline" class="w-full">
Sign in with Google
</sa-button>
<div class="mt-4 text-center">
Don't have an account? <a href="#" class="underline underline-offset-4">
Sign up
</a>
</div>
</sa-card-footer>
</sa-card>Card actions
Use <sa-card-action> in the header for an action such as a dropdown menu, and put any content in the footer.
Theme
<sa-card class="mx-auto w-full max-w-sm">
<sa-card-header>
<sa-card-title>Trip Notes</sa-card-title>
<sa-card-description>
Notes from the planning call with the Okonkwo family.
</sa-card-description>
<sa-card-action>
<sa-dropdown-menu>
<sa-dropdown-menu-trigger variant="ButtonVariant.Ghost" size="ButtonSize.Icon">
<sa-icon name="ellipsis" class="text-muted-foreground"/>
<span class="sr-only">More options</span>
</sa-dropdown-menu-trigger>
<sa-dropdown-menu-content class="w-44">
<sa-dropdown-menu-item>
<sa-icon name="captions"/>
Transcribe call
</sa-dropdown-menu-item>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-item>
<sa-icon name="copy"/>
Copy notes
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="share"/>
Share with client
</sa-dropdown-menu-item>
<sa-dropdown-menu-item>
<sa-icon name="download"/>
Export as PDF
</sa-dropdown-menu-item>
<sa-dropdown-menu-separator/>
<sa-dropdown-menu-item variant="DropdownMenuItemVariant.Destructive">
<sa-icon name="trash-2"/>
Delete
</sa-dropdown-menu-item>
</sa-dropdown-menu-content>
</sa-dropdown-menu>
</sa-card-action>
</sa-card-header>
<sa-card-content>
<p>
The family would like a two-week Japan itinerary in April, timed
for cherry blossom season.
</p>
<ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
<li>Fly into Tokyo, out of Osaka</li>
<li>Three nights in a Kyoto ryokan</li>
<li>Rail passes for all four travellers</li>
<li>Budget: 12,000 EUR</li>
<li>Follow-up call scheduled for next Tuesday</li>
</ol>
</sa-card-content>
<sa-card-footer>
<sa-avatar-group>
<sa-avatar src="/avatars/avatar-3.jpg" />
<sa-avatar src="/avatars/avatar-2.jpg" />
<sa-avatar src="/avatars/avatar-1.jpg" />
<sa-avatar-group-count>+8</sa-avatar-group-count>
</sa-avatar-group>
</sa-card-footer>
</sa-card>API Reference
<sa-card>
Renders a <div> element.
Prop
Type
<sa-card-header>
Renders a <div> element grouping the title, description, and optional action.
<sa-card-title>
Renders a <div> element containing the title.
<sa-card-description>
Renders a <div> element containing the description.
<sa-card-action>
Renders a <div> element positioned in the top-right corner of the header, for actions such as buttons.
<sa-card-content>
Renders a <div> element containing the main content.
<sa-card-footer>
Renders a <div> element containing the footer content.