Attendance
Reusable attendance components — heatmap, legend, sessions, marking rows, rails and comparison bars. They carry no colour or spacing of their own, so the same markup works on student, teacher, staff and report screens.
Attendance Heatmap
.attendance-heatmapA day-per-cell density grid. Each cell is a <span> carrying an intensity class — .l1 to .l4 for present days, .is-absent for an absence, or nothing for a non-school day. Pair it with the legend so the scale is readable. Give the container an aria-label describing the range.
Empty — a period with no records still renders the grid, so the layout never jumps.
Attendance Sessions
.attendance-sessions · .attendance-sessionA day's registers in order. .attendance-session takes .is-done when the register is closed and .is-now for the one in progress. The period number sits in <span class="p">; the trailing status uses the shared .status-chip.
Marking Row
.attendance-mark-rowOne student per row with a present / late / absent toggle. The toggle is a role="group" of buttons using data-mark-set; the active one takes .is-on. Label the group with the student's name so screen readers announce what is being changed.
Janet DanielRoll 35013
Joann MichaelRoll 35014
Kathleen MorenoRoll 35015
Disabled — a locked register keeps the row readable but blocks changes.
Lisa RayRoll 35016 · register closed
Comparison Bars & Percent
.attendance-compare-row · .attendance-percentRate per group, ranked. The row takes a status class — .is-present, .is-late, .is-absent — which tones the fill; the track width is set inline.
.attendance-percent is the inline rate used inside tables and cards. It takes .is-good, .is-warn or .is-bad.
Attendance Rail .attendance-rail
Progress of the marking round itself — how much of the register is complete.
Component reference
| Component | Purpose | Modifiers & states | Notes |
|---|---|---|---|
.attendance-heatmap | Day-per-cell density grid | Cells: .l1–.l4, .is-absent | 15-column grid; give the container an aria-label |
.attendance-heatmap-legend | Intensity scale | Same cell classes | Place directly under the heatmap |
.attendance-sessions / .attendance-session | A day's registers | .is-done, .is-now | Period number in .p; status uses .status-chip |
.attendance-mark-row | Per-student marking row | Toggle: .is-on, disabled | Toggle needs role="group" and a per-student label |
.attendance-compare / -row | Rate comparison bars | .is-present, .is-late, .is-absent | Track width set inline |
.attendance-percent | Inline rate value | .is-good, .is-warn, .is-bad | Use inside tables and cards |
.attendance-rail | Marking-round progress | -done, -bar, -keys | Sits at the foot of a register panel |
.attendance-hero-main / -rate / -title | Headline rate block | — | One per screen, above the register |
Status tone comes from the global semantic colours — present maps to --bs-success, late to --bs-warning, absent to --bs-danger, leave to --bs-info. Combine these components with the workspace system on UI Workspace for the surrounding toolbar, grid and footer.