Card

Installation

npx bambiui add card

The CLI copies the Card source into your project. Installed files are self-contained.

Import the token file once from your global stylesheet:

@import "./styles/bambi.css";

Then import the component:

React

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/ui/card';

Svelte

<script>
  import Card from './components/ui/Card.svelte';
</script>

Vue

<script setup>
import Card from './components/ui/Card.vue';
</script>

Astro

---
import Card from './components/ui/Card.astro';
---

API Styles

Use props-driven Card props for common layouts. Use the compound API when you need custom structure or full control. Both styles render the same bambi-card-* structure.

Props-driven Usage

React

<Card
title="Account settings"
description="Manage your account preferences."
footer={<Button>Save</Button>}
>
Your content goes here.
</Card>

Svelte

{#snippet footer()}
<button>Save</button>
{/snippet}

<Card
title="Account settings"
description="Manage your account preferences."
{footer}
>
Your content goes here.
</Card>

Vue

<Card
title="Account settings"
description="Manage your account preferences."
>
Your content goes here.
<template #footer>
  <button>Save</button>
</template>
</Card>

Astro

<Card
title="Account settings"
description="Manage your account preferences."
>
Your content goes here.
<button slot="footer">Save</button>
</Card>

Compound Usage

Use compound pieces for advanced layouts, custom headings, or non-standard section order.

React

<Card>
<CardHeader>
  <CardTitle>Account settings</CardTitle>
  <CardDescription>Manage your account preferences.</CardDescription>
</CardHeader>
<CardContent>
  <p>Your content goes here.</p>
</CardContent>
<CardFooter>
  <Button>Save</Button>
</CardFooter>
</Card>

Svelte

<Card>
<div class="bambi-card-header">
  <h3 class="bambi-card-title">Account settings</h3>
  <p class="bambi-card-description">Manage your account preferences.</p>
</div>
<div class="bambi-card-content">Your content goes here.</div>
<div class="bambi-card-footer"><button>Save</button></div>
</Card>

Vue

<Card>
<div class="bambi-card-header">
  <h3 class="bambi-card-title">Account settings</h3>
  <p class="bambi-card-description">Manage your account preferences.</p>
</div>
<div class="bambi-card-content">Your content goes here.</div>
<div class="bambi-card-footer"><button>Save</button></div>
</Card>

Astro

<Card>
<div class="bambi-card-header">
  <h3 class="bambi-card-title">Account settings</h3>
  <p class="bambi-card-description">Manage your account preferences.</p>
</div>
<div class="bambi-card-content">Your content goes here.</div>
<div class="bambi-card-footer"><button>Save</button></div>
</Card>

Variants

React

<Card variant="default">Default</Card>
<Card variant="outline">Outline</Card>
<Card variant="ghost">Ghost</Card>
<Card variant="elevated">Elevated</Card>

Svelte

<Card variant="default">Default</Card>
<Card variant="outline">Outline</Card>
<Card variant="ghost">Ghost</Card>
<Card variant="elevated">Elevated</Card>

Vue

<Card variant="default">Default</Card>
<Card variant="outline">Outline</Card>
<Card variant="ghost">Ghost</Card>
<Card variant="elevated">Elevated</Card>

Astro

<Card variant="default">Default</Card>
<Card variant="outline">Outline</Card>
<Card variant="ghost">Ghost</Card>
<Card variant="elevated">Elevated</Card>

Sizes

React

<Card size="sm">Small padding</Card>
<Card size="md">Medium padding (default)</Card>
<Card size="lg">Large padding</Card>

Svelte

<Card size="sm">Small</Card>
<Card size="md">Medium</Card>
<Card size="lg">Large</Card>

Vue

<Card size="sm">Small</Card>
<Card size="md">Medium</Card>
<Card size="lg">Large</Card>

Astro

<Card size="sm">Small</Card>
<Card size="md">Medium</Card>
<Card size="lg">Large</Card>

Interactive Card

Use interactive (or CardLink in React) for clickable cards. Always prefer real link or button semantics.

React

{/* Renders as <a> with full keyboard and focus support */}
<CardLink href="/projects/1">
<CardHeader>
  <CardTitle>Project Alpha</CardTitle>
  <CardDescription>View project details</CardDescription>
</CardHeader>
</CardLink>

{/* Renders as <div data-interactive> */}
<Card interactive onClick={() => navigate('/projects/1')}>
<CardContent>Clickable card</CardContent>
</Card>

Svelte

<a class="bambi-card" data-variant="default" data-size="md" data-interactive href="/projects/1">
<div class="bambi-card-header">
  <h3 class="bambi-card-title">Project Alpha</h3>
  <p class="bambi-card-description">View project details</p>
</div>
</a>

Vue

<a class="bambi-card" data-variant="default" data-size="md" data-interactive href="/projects/1">
<div class="bambi-card-header">
  <h3 class="bambi-card-title">Project Alpha</h3>
  <p class="bambi-card-description">View project details</p>
</div>
</a>

Astro

<a class="bambi-card" data-variant="default" data-size="md" data-interactive href="/projects/1">
<div class="bambi-card-header">
  <h3 class="bambi-card-title">Project Alpha</h3>
  <p class="bambi-card-description">View project details</p>
</div>
</a>

CSS Classes

The following CSS classes are available for structuring card content in any framework:

Class	Element
bambi-card	Root card container
bambi-card-header	Header section
bambi-card-title	Title text
bambi-card-description	Description text
bambi-card-content	Main content area
bambi-card-footer	Footer action area

API Reference

Prop	Type	Default	Description
variant	'default' | 'outline' | 'ghost' | 'elevated'	'default'	Visual card style
size	'sm' | 'md' | 'lg'	'md'	Section padding density
interactive	boolean	false	Adds interactive card affordances
title	framework text/node prop	—	Convenience title rendered as bambi-card-title
description	framework text/node prop	—	Convenience description rendered as bambi-card-description
header	React node / Svelte snippet / Vue or Astro slot	—	Custom convenience header content
footer	React node / Svelte snippet / Vue or Astro slot	—	Footer content rendered as bambi-card-footer
actions	React node / Svelte snippet / Vue or Astro slot	—	Alternate footer/action content

Accessibility

• Use CardLink or a real anchor/button for navigable or actionable cards.
• Props-driven sections render the same semantic classes as the compound API.
• Choose the heading level in compound React usage with CardTitle as="h2" when the page hierarchy requires it.

API Reference

Card / <Card>

Prop	Type	Default	Description
variant	'default' | 'outline' | 'ghost' | 'elevated'	'default'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Padding density
interactive	boolean	false	Adds hover/focus styles; use real <a> for navigation

React also exports CardLink (renders <a>), CardHeader, CardTitle, CardDescription, CardContent, and CardFooter as helper components. All forward HTML attributes.

Accessibility

• Plain layout cards use no ARIA roles — they are correctly treated as generic containers.
• When the card is interactive, use CardLink (React) or an <a> element for navigation, or a <button> for actions. This ensures keyboard access and correct screen-reader announcements.
• CardTitle renders as <h3> by default in React; pass as="h2" etc. to match document outline. In Svelte/Vue/Astro use the appropriate heading element directly.
• Visible focus ring is applied via :focus-visible on interactive cards.