Reserve packing
Fictional lesson card with a short line of text.
Patterns
Every reusable part of learn and BMS, in each state. Build from these; do not invent a new part. States: rest, hover, focus, disabled, error. Hover and focus are shown by a forced class on this page only.
- Buttons
- Inputs
- Custom dropdown
- Calendar
- Cards, callouts, dropped parts
- Side menu and In this section box
- Reading bar
- End of lesson steps and the read state
- Toasts
- BMS work-queue card
Buttons
Classes: .btn plus .btn-primary, .btn-dark, .btn-ghost; size .btn-sm.
primary, rest
primary, hover
primary, focus
primary, disabled
dark, rest
dark, focus
ghost, rest
ghost, focus
small primary
Inputs
Wrapper .field with a label; text-like inputs are styled by element. Error list: .form-errors.
Custom dropdown
.fk-dd with .fk-dd-toggle, .fk-dd-panel, .fk-dd-list, .fk-dd-opt. Never a native select (ruling 2026-06-01).
closed, placeholder
- Tandem day
- Coaching day
- Group course 3 seats
error
Calendar
Booking month grid: .fk-cal-head, .fk-cal-nav, .fk-cal-title, .fk-cal-grid, .fk-cal-dow, .fk-cal-day with .av (available), .sel (selected), .blocked, .off (outside month). Date picker popup classes: .dp-wrap, .dp-pop, .dp-day, .is-sel.
Cards, callouts, dropped parts
.card (white, line border, token radius and shadow). Callouts: .callout-green, .callout-red.
Card, focus ring
Same card with a visible focus ring.
Saved. Your answers are kept.
Not saved. Try again in a minute.
Dropped, do not use
R-059 (trial): Karlis dropped uppercase labels and pills. Not shown as parts and not to be copied: the status pill (.badge, .pill) and the small uppercase kicker above a heading. The app css still defines them; they are listed here so nobody rebuilds them.
Reading bar
.read-progress with an inner span scaled by script (lesson-progress.js). It is fixed to the bottom of the page; the demo shows it in a frame at 40 percent.
End of lesson steps and the read state
Container .nv-end.nv-c, header .nv-map-head, steps .nv-steps (.is-read, .is-here, .is-next), button .nv-read (aria-pressed true is the green read state), teaser .nv-teaser.
Core skills
Section 2 of 5 · 1 of 4 readGreen read state of the button and the current step:
Core skills
Section 2 of 5 · 2 of 4 readToasts
Learn: .toast (app.css). BMS: .bms-toast and .bms-toast--danger (bms.css).
Saved.
Payment marked as paid.
Could not send the email.
BMS work-queue card
From bms/_inbox_body.html: .bms-widget, .bms-whead, .bms-wct, .bms-qrow, .bms-av, .bms-qbody, .bms-name, .bms-meta, .bms-qact, .bms-wempty.