Gallery
Components
Real, imported production components with fictional data. Open one to switch its variant, size and state, the theme, the language and the text size.
The visit
- §5.10Stage timelineThe whole visit at a glance, with "you are here" as the one glow on the screen.
- §5.11Wait estimate blockAn honest usual range, the "most people" line and what it is based on.
- §5.12Test trackerTests as a process (ordered, collected, in the lab, back), never as results.
- §5.13Care-team rowWho is looking after you, with their role and since when.
- §5.14Request tileStructured requests to the care team, with sent, seen and done tracking.
- §5.8, §6.3Request rowOne sent request in the patient's history, with its status.
- §5.15Task card"Things you can do": one clear instruction and its action.
Status
- §5.9Status pillA state in tone, icon and words, from the domain maps.
- §5.26BadgeCounts and short labels.
- §5.17BannerDepartment load, offline, stale, paused, maintenance and announcements.
- §5.16Code delay noticeWhy care is delayed during a critical event, without alarming anyone.
- AI-03, R-22Machine-translation badgeSays a page is machine translated and offers the original.
- §5.10Live dot"You are here": the single breathing glow.
Actions
Inputs
- §5.3Text field40 px default (36 sm, 48 lg), a crisp focus border and a clear error.
- §5.3, §8.11FormThe forms pattern: labels, help, inline errors and an error summary.
- §10.3TextareaMulti-line text for staff notes and announcements.
- §10.3SelectA full-width select with a matching popup, groups, scrolling and a check.
- §10.3ComboboxA searchable select for long catalogues.
- §10.3Native selectThe browser's select with the field surface.
- §5.3Input groupOne field with icons, units and buttons inside the border.
- §5.5Date of birthYear, month and day in ISO order with a clear hint.
- §5.4Visit-code input8 or 10 Crockford characters in two mono groups.
- §10.3Date range pickerPresets and a custom range for analytics.
- §10.3CalendarThe date grid behind the pickers.
- §10.3SliderA continuous value, for the pain scale where a site prefers it.
Selection
- §5.6CheckboxIndependent choices and consent.
- §5.6Radio groupOne choice from a short list.
- §5.6SwitchAn on/off setting that applies at once.
- §5.22Segmented controlSwitches between views with a sliding thumb.
- §5.29Language selectorEnglish and Français, plus machine-translated languages in their own group.
Feedback and states
- §5.18ToastA transient confirmation on the inverse surface.
- §5.27Empty stateWhat will appear here, and what to do next.
- §5.27Error stateA calm failure with a way forward.
- §5.27SkeletonLoading placeholders shaped like what is coming.
- §5.27Progress and spinnerInline progress for work in the background.
- §5.17AlertAn inline notice inside staff pages.
- §10.3Stepper and progress dotsWhere you are in a multi-step flow.
Overlays
- §5.20DialogShort tasks and confirmations.
- §5.20Alert dialogDestructive confirmation with Cancel first.
- §5.19SheetA side panel for staff detail views.
- §5.19DrawerA bottom sheet with a grabber.
- §10.3PopoverExplanations and small forms anchored to a control.
- §10.3MenuA list of actions from a button.
- §10.3Context menuRow actions on right-click or long-press.
- §5.26TooltipSupplementary names for icons and shortcuts.
- §10.3Hover cardA preview on hover or focus.
- W-S15, §10.3Command paletteJump anywhere and run actions from the keyboard.
Navigation
Data and analytics
- §5.23Data tableThe board, queues and admin lists: sortable, keyboard-driven, virtualised.
- §5.23TableA plain, styled table.
- §5.24Stat tileA key number, its unit and how it compares with usual.
- §5.25Trend chartA measure over time with a crosshair tooltip.
- §5.25Bar chartGrouped or stacked comparisons.
- §5.25HeatmapWeekday by hour intensity.
- §5.25Benchmark barA value against the usual p50–p75 band and the p90 tick.
- §10.3Filter barSearch and filters above admin lists.
- §5.7CardA container with a title and one purpose.
- §5.26AvatarInitials for people on the care team.
Sharing and print
Layout
Developer portal
- developer-portal §6.1Secret revealShows a new client secret, API key or webhook secret exactly once.
- developer-portal §6.2Copy fieldA labelled monospace value with a copy button.
- developer-portal §4.3Environment badgeSandbox, customer test or live, on every portal screen.
- developer-portal §6.2Status chipApp, credential, endpoint and delivery states.
- developer-portal §6.2Problem viewRenders an RFC 9457 problem with its catalogue entry.
- developer-portal §6.2JSON viewerHighlighted, collapsible JSON with copy.
- developer-portal §6.2HL7 viewerER7 with field numbers and the fields minimisation dropped.
- developer-portal §6.2URL filter barThe design-system filter bar bound to URL query parameters.
- developer-portal §8.1Mapping traceWhich source field produced each normalised field.
- developer-portal §7 W-D56Delivery timelineThe attempts of one webhook delivery, newest first.
- developer-portal §7 W-D53JWKS testerChecks a JWKS URL and lists the keys it serves.
- developer-portal §7 W-D53Key pair generatorGenerates an ES384 key pair in the browser.
- developer-portal §7 W-D51Scope pickerPreset cards or a custom set of scopes.
- developer-portal §7 W-D55Event type pickerWhich webhook events an endpoint receives.
- developer-portal §8.1Fault panelSandbox fault injection for the app (outage, latency, errors).
- developer-portal §8.1Code editorCodeMirror 6 with JSON and the ER7 stream language.
- developer-portal §6.2Typed confirmationA destructive confirmation that needs a typed word.