Masthead
The one element on every screen, carrying the facts that must never be wrong.
Overview
The masthead is the only component present on every screen, which is why what it carries is decided rather than accumulated: the product, the environment, who is signed in and where they are sitting. Every addition dilutes those four.
How these four sit together — the anatomy of a screen, how deep a hierarchy may go, and what has to happen on a route change — is on Navigation.
What the masthead carries
It is the only element on every screen, so it is where the facts that must never be wrong go — and nothing else, because every addition dilutes them.
| Carries | Rule |
|---|---|
| Product name | Always. On a shared workstation running four clinical applications, "which system am I in" is a real question with real consequences. |
| Environment, when it is not production | Training, test or staging, in words, on a filled surface. Never a tint somebody has to notice. A test instance that looks like the live one is how test data reaches a record — see Commissioning. |
| Signed-in identity | Name and role in text. Never an avatar alone, which identifies nobody to a colleague standing behind the chair. |
| Workstation | Which physical machine this is, for shared devices and for Sign in's attribution argument. |
| Degraded-mode statement | When a source system is unreachable or the device is in a reduced mode, the masthead says so persistently — it is the one place a reader cannot navigate away from. |
What does not go in it. Alarms — those have their own region and their own layer, per Elevation. Dismissible notifications, which would make the masthead a place things disappear from. And primary navigation as well as a side panel: navigation lives in one place, because a reader who has to check two places to find a section will check one and conclude it is absent.
What the component enforces, and what it only asks for
Four facts, three of them held by requiring them and one of them impossible to check.
| Rule | Held by | How |
|---|---|---|
| The product is always named | The component | appName is required.Asserted: Masthead: the product and the signed-in identity are both named |
| The environment banner is text | The component | Rendered as words, so “TRAINING — not for clinical use” survives greyscale, a projector and a photocopy. Asserted: Masthead: a non-production environment announces itself in words |
| Identity is readable, not initials | The component | user takes a name and a role and renders both.Asserted: Masthead: the product and the signed-in identity are both named |
| The environment banner borrows no alarm colour | The component | Inverted text on the foreground colour. It was drawn on the advisory alarm surface, and a training instance shows that banner on every screen all day — teaching the colour to mean “not real”. Asserted: Masthead: a non-production banner borrows no alarm colour |
| The environment shown is the environment running | You | environment is a prop. A staging build that forgets to pass it renders as production, which is the failure the banner exists to prevent — wire it from the same source as your API base URL, not by hand. |
| The workstation is identified | You | Not a prop at all. On a machine twelve people share, that is the third of the three facts this page says are needed. |
A rule stated on a component page reads as a rule the component keeps. 3 of these 5 are; 2 are obligations this page was quietly handing to the reader. The banner cannot be styled away. It can be forgotten, and a forgotten environment banner reads as a live system.
Do's and don'ts
Name, role and workstation. On a machine twelve people share, all three are needed.
Initials in a circle. Two initials are not an identity, and the role that determines what can be attributed is nowhere.
AcuteLine TRAINING — not for clinical use S. Whitfield · Registrar
The environment is words on every screen. It survives greyscale and a photocopy, and it cannot be styled into a subtle tint.
AcuteLine S. Whitfield · Registrar
(orange border = training)
A training system distinguished by a border colour. On a washed-out cart display or to a colour-blind reader it is the live record, and a practice order goes to a real pharmacy.
AcuteLine S. Whitfield · Registrar · ED workstation 4
Name, role and workstation. On a machine twelve people share, all three are needed to know whose session this is and where it is happening.
AcuteLine SW
Two initials in a circle. Not an identity, and the role that decides which actions are permitted is not shown at all.
Accessibility
- A
bannerlandmark, once per document, so a screen-reader user can jump to it and away from it. - The environment banner is text, not a colour. “TRAINING — not for clinical use” has to survive greyscale, a projector and a photocopy.
- The signed-in identity is readable, not initials. Two letters in a circle are not an identity, and the role is what decides which actions are available.
Outcomes of use
- Effectiveness — a clinician can tell at a glance which product, which environment and whose session they are in.
- Efficiency — no step is needed to answer “am I in training or in the live record?”
- Satisfaction — confidence on a shared machine. Attributes believed to contribute to an outcome; the outcome is settled by observing real use, not by this page — see Usability & context of use.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1). Which of these the component keeps and which are yours is stated in the guarantees table; a control the component does not keep is one your risk file must show you keep.
- The environment is stated in words on every screen. (the component states it in words; that it is the environment running is you) Mitigates: training data mistaken for the live record, or the reverse.
- Name, role and workstation are all shown. (the component shows them; identifying the workstation is you) Mitigates: an action attributed to whoever last signed in on a machine twelve people share — see Authorship & the record.
Implementation
$ npx shadcn@latest add https://md.notjustany.tech/r/masthead.json<Masthead
appName="AcuteLine"
environment="training" // omitted in production
user={{ name: "S. Whitfield", role: "Registrar" }}
/>Related
- Navigation — how the parts sit together.
- Side navigation · Breadcrumb · View heading
- Patient header — the identity that sits below it.