Card

The Card component is used to group related content into a container with a consistent style. It provides a flexible layout structure for content organization, typically with a header, content area, and footer.

Usage

<script>
  import { 
    Card, 
    CardHeader, 
    CardTitle, 
    CardDescription, 
    CardContent, 
    CardFooter 
  } from "$lib/components/ui/card";
</script>

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Basic Card

A simple card with header, content, and footer.

Card Title

Card Description

This is the main content area of the card. You can add any content here.

Content Only

A card with just content, without header or footer.

This card has only content without a header or footer.

Custom Layout

Cards can be customized with additional classes.

Custom Header

With a custom background

Custom content spacing

API Reference

Card Components

Component	Description
`Card`	The main container component with rounded corners and a border.
`CardHeader`	The top section of the card, typically containing the title and description.
`CardTitle`	The title component for the card.
`CardDescription`	A description component for the card, usually placed below the title.
`CardContent`	The main content area of the card.
`CardFooter`	The bottom section of the card, typically used for actions.

Component Properties

All card components accept standard HTML attributes and the following:

Property	Type	Default	Description
`class`	`string`	-	Additional CSS classes to add to the component.
`ref`	`HTMLDivElement`	`null`	A reference to the underlying DOM element.

Implementation

The Card components use a composable pattern with simple styling for flexibility:

// Card base styling
'border-border bg-card text-foreground rounded-lg border shadow-sm backdrop-blur-sm transition-colors'

// CardHeader styling
'flex flex-col space-y-1.5 p-5'

// CardTitle styling
'text-2xl font-semibold leading-none tracking-tight'

// CardDescription styling
'text-muted-foreground text-sm'

// CardContent styling
'p-5 pt-0'

// CardFooter styling
'flex items-center p-5 pt-0'