Card

A flexible content container with header, body, and footer slots

A card component for grouping related content with header, body, and footer sections. Compose CardHeader, CardTitle, CardDescription, CardContent, and CardFooter as needed.

Card title

This is a short description of the card content.

Here goes the main content of your card.

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card title</CardTitle>
        <CardDescription>
          This is a short description of the card content.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>Here goes the main content of your card.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

View Code

Installation

bash

liminal add card

Usage

Card title

This is a short description of the card content.

Here goes the main content of your card.

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card title</CardTitle>
        <CardDescription>
          This is a short description of the card content.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>Here goes the main content of your card.</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

View Code

Examples

With header and footer

The example above shows the full composition. You can omit CardHeader or CardFooter if you only need content.

Content only

Minimal card with just content.

<Card>
  <CardContent>
    <p>Minimal card with just content.</p>
  </CardContent>
</Card>

View Code

API

Card and its parts accept standard HTML div props. Use these subcomponents to structure content:

Card — Container
CardHeader — Wraps title and description
CardTitle — Heading
CardDescription — Subtitle or caption
CardContent — Main body
CardFooter — Actions or footer content