WFP logoDesign System
Components

Card

View on shadcn/ui

A container for displaying content in a structured format.

Login to your account
Enter your email below to login to your account
Forgot your password?

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/card.json

Usage

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
<Card>
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <p>Card footer</p>
  </CardFooter>
</Card>

On this page

InstallationUsage