Inspect a patient record with diagnoses, medications, allergies, visits, notes, care team, documents, and longitudinal history in one clinical view. This example brings Summary and Visits together so patients and care teams can find the next task without losing context.
It includes representative records such as Primary care visit · Sep 4 and Medication updated · Aug 28. Use the screenshot to study the layout, then adapt its components and product states to your own design system.
Detail
Add note
Detail
Default, loading, empty, error, permission, success
Configurable product UI theme
Care team members need to add note while keeping active meds, allergies and exceptions visible. The interface should show what changed and who should act next.
Summary → Visits → Add note → Review outcome
Detail, Summary, Visits, contextual actions, error recovery
Emphasize record status, next action and recent changes. Put secondary history nearby without competing with the primary task.
Pay attention to summary and visits. People need to distinguish Primary care visit · Sep 4 from Medication updated · Aug 28. Keep active meds visible, especially when a record changes owner or status.
Before this screen reaches handoff, verify keyboard focus, empty and permission states, and what happens after someone chooses “Add note”. Make error recovery as clear as the happy path.
Related screen examples to explore next: Lab Results, Care Team Messaging, Prescription Refill.
Design a medical record detail screen inside our existing product. Use our current components, tokens and content language. Include Summary and Visits views, credible records like Primary care visit · Sep 4, and a clear “Add note” action. Use our product permissions and show loading, empty, error and success states. Keep the output editable in Figma.