UI library · v1.0
Human Premium UI library
The working components of app.humanpremium.ca. Every piece below is live code from components/ui and components/product, rendered on sample data.
App shell
Sidebar with counts, a top bar for the current object, and a content well on paper. The plan meter sits at the bottom of the sidebar so seat use is always visible.
Commercial Property v4.2: what changed for producers
Flood and surface water are excluded, even when wind drives them.
“We will not pay for loss or damage caused by flood, surface water or waves, whether or not driven by wind.”
Sewer backup is covered only with the endorsement shown on the Declarations.
“Sewer backup is covered only where the Sewer Backup Endorsement is shown in the Declarations, to the limit stated there.”
Most clients are already covered for sewer backup.
Actions
One primary action per view. Secondary for alternatives, ghost for toolbars, link for inline moves.
Variants · primary · secondary · ghost · link
Sizes and icons · sm 32 · md 40 · lg 48 · icon 36
Tabs · segmented
Disabled · 45% opacity, no pointer
Forms
Labels sit above fields. Focus turns the border signal green with a soft ring. Helper text is ink 3.
Input · select · textarea · checkbox · switch
Status
Five course states, always shown with a dot so they read in grayscale.
StatusBadge · draft · review · signed · lapsed · archived
Progress · Avatar stack
Citations
The product’s signature element. A citation chip always carries file, page and section. A lesson point shows its quote; a point without one is flagged and cannot publish.
Citation chip
Use alcohol rub on all surfaces until dry, at least 20 seconds.
“Alcohol-based hand rub is applied to all hand surfaces and rubbed until dry, for at least 20 seconds.”
LessonPoint · cited
Rub for 60 seconds before every meal service.
LessonPoint · flagged
Sign-off
The moment a named person takes responsibility. It shows what they are signing, who they are and what happens next.
Signing v1.0
Hand hygiene HH-04 rev 7: annual in-service
3 lessons approved · 4 cited points · 0 flags. Any later edit lapses that lesson’s sign-off.
Anika Rao, RN, MN
Clinical Nurse Educator
Sign-off block
Data
Stat cards lead a dashboard. Tables use mono headers, hairline rows and the version a person was trained on.
Assigned
41
3 groups
Completed
34
83% of assigned
Overdue
4
Reminders sent Oct 14
Avg. score
94%
Pass mark 80%
| Learner | Role | Status | Score | Version |
|---|---|---|---|---|
| JSJ. Santos | PSW | Signed | 100% | v1.0 · Oct 14 |
| KLK. Lindqvist | RPN | Signed | 100% | v1.0 · Oct 14 |
| AMA. Mensah | PSW | Signed | 90% | v1.0 · Oct 15 |
| RDR. Dubois | RN | Signed | 95% | v1.0 · Oct 15 |
Course cards
The library view. Status first, then version, signer and how far the assigned people have got.
Commercial Property v4.2: what changed for producers
Signed by Priya Nair, CIP
Hand hygiene HH-04 rev 7: annual in-service
Signed by Anika Rao, RN, MN
New-producer onboarding: week one
Signed by Not yet signed
Feedback
Alerts sit inline above the content they describe. Accordions hold secondary detail such as version history.
Course published
v1.0 is live for 41 people. Completions will appear in Records.
1 lesson lost its sign-off
§3.2 changed in the new version of HH-04. Anika Rao has been asked to review.
Export ready
SCORM 2004 package, 14.2 MB.