Card

Elevated container primitive for grouping related content, actions, and media.

Preview

Lemmo Project

Active

Visual generation canvas

Autonomous UI design system compiler and swappable theme synthesizer.

Anatomy & Primitives

The Card is composed of modular compound parts:

Card: Main elevated wrapper bound to --card and --card-foreground.
CardHeader: Top section for title, badge, and description with standard padding.
CardTitle: Semibold title heading.
CardDescription: Muted subtitle text.
CardContent: Body area for main elements.
CardFooter: Bottom action row for buttons and status indicators.

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from 'lemmoui'

export function MyCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Main content body</p>
      </CardContent>
      <CardFooter>
        <Button variant="default">Confirm</Button>
      </CardFooter>
    </Card>
  )
}