Component

Card

Container for grouped content — patient summaries, appointment panels, stat widgets.

Preview

Minimal card: content only. Use the next example for a titled card with actions.

Examples

Default

Content only — no header or footer.

Minimal card: content only. Use the next example for a titled card with actions.

With header and footer

Title, description, body, and footer actions.

Card Title

Optional description for the card.

Content area.

Complex

Rich patient-style summary card.

Patient Summary

Last visit: Feb 25, 2026

Blood pressure: 120/80 mmHg

Next check-in in 4 weeks.

AI Prompt

Ready to copy and paste into any AI model.

15 lines

prompt.txt

Build a shadcn/ui Card component for the **Clinic Admin** design system.

**Card styling:**
- Background: white, border 1px solid #C4D0DB, border-radius 14px, overflow hidden

**Sub-components:**
CardHeader (padding 20px 20px 0), CardTitle (Nunito, 16px, weight 700, #353D4A), CardDescription (13px, #657486), CardContent (padding 16px 20px), CardFooter (padding 14px 20px, border-top).

**Design preview to replicate exactly:**
- Default: Card w-[300px], CardContent pt-6, short paragraph explaining content-only usage (text-sm text-muted-foreground)
- With header: CardTitle "Card Title", CardDescription "Optional description for the card.", CardContent "Content area.", CardFooter Button size sm "Action"
- Complex: CardTitle "Patient Summary", CardDescription "Last visit: Feb 25, 2026", CardContent "Blood pressure: 120/80 mmHg" + "Next check-in in 4 weeks.", CardFooter "View Record" (primary sm) + "Edit" (outline sm)
- Fallback: CardTitle "Default Card", CardContent "Card content."

Return as a set of composable React components (Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter) with TypeScript. Base on shadcn/ui Card, use cn() + Tailwind CSS.

Copy once, paste anywhere, keep consistent output.