Placeholders
Mon, June 29, 2026

Placeholders

Enhance user experience with skeleton screens. Placeholders provide a visual layout of the page structure before the remote clinical telemetry or diagnostic files are completely loaded.

Live Simulation Comparison
Loaded state
Dynamic Doctor Profile Card
DR
Dr. Sarah Kim

Pediatric Cardiology Specialist


Responsible for critical inpatient diagnostics and emergency cardiac consult shifts in pediatric ICU ward 3B.

Active Duty View Schedule


Dynamic Clinic Telemetry Cards
Pulse Monitor

72 BPM

ICU Occupancy

84% Capacity

Recent Lab Telemetry
Diabetes Panel #891A Verified
Lipid Screen #110B Awaiting Signature
Placeholders Colors

Style placeholder blocks using default contextual text utilities or custom background color classes.

Default Contextual (Inherits Color)
Primary Placeholder
Success Placeholder
Warning Placeholder
Danger Placeholder
Sizing & Widths

Adjust vertical sizing modifiers like .placeholder-lg, .placeholder-sm, or .placeholder-xs, and horizontal column widths.

Vertical Sizes
Horizontal Widths (col classes & inline styles)
Animations (Glow vs Wave)

Add pulsing animations using .placeholder-glow or clean shimmer transitions using .placeholder-wave to communicate activity.

Glow Animation (.placeholder-glow)
Wave Shimmer (.placeholder-wave)