Back

Card

Cards are containers that group related content and actions. They use a composable pattern with multiple sub-components for flexible layouts.

Basic Examples

Active
Patient Summary
Last updated 2 hours ago

Patient is a 45-year-old male with history of hypertension.

New
Lab Results
Complete blood count

All values within normal range.

Card Grid

12
Medications
Active prescriptions
3
Allergies
Known allergies
5
Conditions
Active diagnoses

Clinical Observation Cards

Interactive cards for displaying clinical measurements and lab results. Click any card to toggle between expanded and collapsed states.

72bpm

10:30 AM

Heart Rate

Normal
132/85mmHg

10:30 AM

Blood Pressure

Trending up last 3 visits

Stage 1 HTN
98.6°F

10:30 AM

Temperature

Normal
98%

10:30 AM

O₂ Saturation

Normal
7.2%

Jan 15

HbA1c

Down from 7.8% in Oct

Normal

Tip: Click any card above to see the collapsed state.

Patient Summary Card

A comprehensive card for displaying patient information at a glance. This is the same component used on the Patients list page.

EJ

Emily Johnson

50y, female • DOB: Jun 22, 1975

Sub-components

PropTypeDefaultDescription
CardReact.ComponentProps<'div'>—Container wrapper with shadow and border
CardHeaderReact.ComponentProps<'div'>—Header section with grid layout for title/action
CardTitleReact.ComponentProps<'div'>—Title element with semibold text
CardDescriptionReact.ComponentProps<'div'>—Muted description text
CardContentReact.ComponentProps<'div'>—Main content area
CardFooterReact.ComponentProps<'div'>—Footer section for actions
CardActionReact.ComponentProps<'div'>—Action button slot in header