Every shared component rendered against two unrelated fixture sets. Switch the accent by visiting this page from the workspace or learner experience.
Label, value, optional trend with direction, optional note.
Set A — estate totals, mixed trend directions
Learners enrolled
10,412
Certificates issued
1,847
Awaiting review
2
Set B — single academy, no trend, long labels
Milk collection centres covered
37
Average completion
74%
Each state has its own hue and its own treatment — dashed outline, tint, drawn outline, solid fill — so they stay apart in greyscale. An unmapped value falls back rather than breaking.
Set A — content lifecycle
Set B — enrolment states and an unmapped value
Accent while in progress, completed gold at 100%.
Set A — labelled, with meta line
1 of 13 lessons · started yesterday
13 of 18 lessons · due 28 Sep 2026
Finished 14 Aug 2026 · certificate issued
Set B — unlabelled, compact, cohort averages
Kinigi collection centre
Butaro field officers
Elevated roles carry a shield and a basalt fill; scope and a remove control are optional.
Set A — elevated and standard, with scope
Set B — assignment editor, removable, no scope
Generated thumbnail keyed to the platform's discipline. Pass a progress value and the footer becomes a progress bar; leave it out and it shows the instructor and length.
Set A — staff context: instructor and length in the footer
Gemura · Dairy and livestock
Temperature logging, lactometer checks and rejection protocols for centre operators handling evening and morning intake.
BuchaPro · Livestock traceability
Link animal, owner, transporter and slaughter batch so a carcass can be traced back to the farm of origin within a day.
Set B — learner context: the same component shows progress instead
FeedGrid
Balance maize bran, cotton seed cake, brewers grain and mineral premix against a target crude protein without overspending.
20 lessons · 5h 55m
BuchaPro
Apply and register ear tags correctly, handle replacements for lost tags, and keep the herd register matching what is standing in the kraal.
14 lessons · 3h 25m
Columns and rows are props. Cell types (person, status, role, progress) are declared on the column, so no page reimplements a cell. Pagination is a slot-in component.
Set A — six columns, person and status cells, single page
| Academy | Discipline | Academy owner | Learners | Status |
|---|---|---|---|---|
| OroraFarm | Farm management | Aline Mukamana | 4,218 | Active |
| Gemura | Dairy and livestock | Jean-Baptiste Habimana | 2,967 | Active |
| BuchaPro | Livestock traceability | Claudine Uwimana | 1,341 | Active |
| FeedGrid | Feed and nutrition | Emmanuel Nshimiyimana | 1,886 | Active |
| Ubworozi | Poultry systems | Marie-Claire Uwase | 412 | Inactive |
| Ishyiga | Apiculture | Patrick Habineza | 0 | Inactive |
Set B — different columns, progress and role cells, page 2 of 4
| Learner | District | Progress | Enrolment |
|---|---|---|---|
| Célestin Ndayisaba | Musanze |
45%
|
Active |
| Béatrice Uwamahoro | Rwamagana |
100%
|
Completed |
| Sylvestre Rwigema | Kayonza |
12%
|
Archived |
| Théoneste Bagabo | Ngoma |
31%
|
Active |
Set C — no rows, so the table falls back to its empty state
Enrol a cohort from the learner register and they will show up here with their progress.
Copy is supplied by the page, in the voice of whoever is reading it — staff get the scheduling instruction, learners get an encouragement and a next step.
Field officers book onto clinics up to two weeks ahead. Schedule one and it will appear here with its registration link.
Finish the last five lessons of Mastitis Detection and Milk Hygiene and your certificate will be issued here the same day.
Breadcrumb, title, optional subtitle, and a slot for one primary action plus secondaries. The header at the top of this page is the same component with a three-level breadcrumb.
Eleven courses across dairy hygiene, collection-centre practice and herd fertility.
One shell for confirm, create and edit flows. Opened by dispatching
open-modal with the dialog's name;
closes on the overlay, the close control or Escape. This is the one place motion is used.
Mineral Supplementation for Lactating Cows
74 learners are part-way through. Archiving hides the course from the catalogue but lets those cohorts finish and still receive certificates.
They will be able to draft and submit courses for review
The same shell, a different job: a wider panel, a form in the body, and two footer actions. Nothing about the dialog is specific to either case.
Built because the nine above needed them, and reused by pages directly.
Four variants, three sizes
Three surface treatments by function
Plain — editorial content and forms.
Quiet — secondary asides and placeholders.
