portal card
the canonical klera dashboard tile. 560px wide, brand-card surface, the same shape every patient card composes — dosage tracker, weight trends, prescription vials, symptoms log.
the body slot is a free region. when no children are passed, renders a blank-state placeholder so the shape is visible and the same component doubles as a real loading state.
header slot accepts actions (right-aligned icon buttons via PortalCardIconButton); footer accepts a primary action (the + log new dose pattern).
import from @klera/ui/components/dashboard/PortalCard
variants
no title, no children. the shape itself: 560×670, brand-card blue, 18px shadow.
weight trends
the minimum semantic state. just a card with a name.
dosage tracker
meta is a small uppercase line — used for timestamps, secondary IDs, etc.
dosage tracker
actions slot — typically two placeholder buttons + one live (chart↔list toggle).
GLP-1 dosage tracker
semaglutide · 0.5 mg
subtext sits between header and body — typically the medication line on a primary card.
weight trends
the "+" leads by default; pass showPlus={false} for non-add actions.
weight trends
gold tint after a successful log. flips back to default on next render.
dosage tracker
GLP-1 dosage tracker
semaglutide · 0.5 mg
what a real patient card looks like end-to-end — title, meta, actions, subtext, body content, footer action.
ozempic
560px tall, slimmer padding. the patient app's vial cards.
next refill
ships dec 14 · arriving by dec 16
215px floor; for single-metric cards or short status tiles.
care team
dr. j. okafor · dr. m. liang
drop the fixed 560px width when the card sits in a column that already constrains width.