Skip to main content

Card

Card

Container component for grouping related content

Tags: component layout container

View Demo

Cards are containers that group related content and actions together.

Import​

<script>
  import {
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
    CardFooter,
  } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description text</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Card Props​

Prop Type Default Description
variant 'default' | 'featured' | 'highlight' | 'warning' 'default' Card style variant
borderColor 'default' | 'primary' | 'muted' 'default' Border color (ignored for highlight/warning)
interactive boolean false Enables hover shadow effect
class string - Additional CSS classes

Sub-Components​

CardHeader​

Container for title and description. Applies consistent padding and spacing.

CardTitle​

The main heading of the card. Renders as an <h3> with bold styling.

CardDescription​

Secondary text below the title. Uses muted foreground color.

CardContent​

Main content area of the card. Applies horizontal and bottom padding.

CardFooter​

Footer section for actions. Uses flex layout with gap spacing.

Variants​

Default​

Standard card with 1px border:

<Card variant="default">
  <CardContent>Default card</CardContent>
</Card>

Emphasized card with 2px border:

<Card variant="featured">
  <CardContent>Featured card with thicker border</CardContent>
</Card>

Highlight​

Positive/info callout with teal border:

<Card variant="highlight">
  <CardContent>Highlight card for important info</CardContent>
</Card>

Warning​

Alert card with red border:

<Card variant="warning">
  <CardContent>Warning card for alerts</CardContent>
</Card>

Interactive Cards​

Enable hover effect for clickable cards:

<Card interactive onclick={() => navigate('/details')}>
  <CardContent>
    <p>Hover for shadow effect</p>
  </CardContent>
</Card>

Border Colors​

Customize border color (for default and featured variants):

<Card borderColor="primary">
  <CardContent>Primary border</CardContent>
</Card>

<Card borderColor="muted">
  <CardContent>Muted border</CardContent>
</Card>

Examples​

Profile Card​

<Card class="max-w-sm">
  <CardHeader>
    <div class="flex items-center gap-4">
      <Avatar>
        <AvatarImage src="/avatar.jpg" alt="User" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <div>
        <CardTitle>Jane Doe</CardTitle>
        <CardDescription>Product Designer</CardDescription>
      </div>
    </div>
  </CardHeader>
  <CardContent>
    <p class="text-sm">Building beautiful interfaces at Acme Corp.</p>
  </CardContent>
  <CardFooter class="gap-2">
    <Button variant="outline" size="sm">Message</Button>
    <Button size="sm">Follow</Button>
  </CardFooter>
</Card>

Pricing Card​

<Card variant="featured" class="max-w-sm text-center">
  <CardHeader>
    <CardTitle>Pro Plan</CardTitle>
    <CardDescription>For growing teams</CardDescription>
  </CardHeader>
  <CardContent>
    <div class="text-4xl font-bold">$29</div>
    <p class="text-muted-foreground">/month</p>
    <ul class="mt-4 space-y-2 text-left">
      <li>Unlimited projects</li>
      <li>Priority support</li>
      <li>Advanced analytics</li>
    </ul>
  </CardContent>
  <CardFooter>
    <Button class="w-full">Get Started</Button>
  </CardFooter>
</Card>

Stats Card​

<Card>
  <CardHeader class="flex-row items-center justify-between pb-2">
    <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
    <svg class="h-4 w-4 text-muted-foreground"><!-- icon --></svg>
  </CardHeader>
  <CardContent>
    <div class="text-2xl font-bold">$45,231.89</div>
    <p class="text-xs text-muted-foreground">+20.1% from last month</p>
  </CardContent>
</Card>

Card Grid​

<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
  {#each items as item}
    <Card interactive>
      <CardHeader>
        <CardTitle>{item.title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{item.description}</p>
      </CardContent>
    </Card>
  {/each}
</div>

Simple Content Card​

<Card>
  <CardContent class="pt-6">
    <p>Simple card with just content, no header or footer.</p>
  </CardContent>
</Card>

Accessibility​

  • Cards use semantic HTML structure
  • Interactive cards should have appropriate onclick handlers
  • Card titles use heading elements for document outline
  • Color contrast meets WCAG requirements
  • Alert - For messages and notifications
  • Dialog - For modal content
On this page