Course card
- UseVerwendung
- One card per training or course in a grid; the whole card opens itEine Karte pro Training oder Kurs in einem Raster; die ganze Karte öffnet es
- FrameRahmen
- Box as a link: surface, 1 px line border, radius 16 px, 16 px padding, hover secondary-100Box als Link: Surface, 1 px Linienrahmen, Radius 16 px, 16 px Innenabstand, Hover secondary-100
- TitleTitel
- 14 px Geist Medium; courses inside a training are numbered (1. Meet the vehicle)14 px Geist Medium; Kurse in einem Training sind nummeriert (1. Meet the vehicle)
- SummaryZusammenfassung
- Optional, 14 px Geist Light, secondary-700Optional, 14 px Geist Light, secondary-700
- Meta linesMeta-Zeilen
- Meta list with 20 px icons: duration, location, lessons or courses, quiz or certificate as “x of y”Meta-Liste mit 20 px Icons: Dauer, Ort, Lektionen oder Kurse, Quiz oder Zertifikat als „x von y“
- ProgressFortschritt
- Small progress bar with the percentage; turns success green once everything is doneKleiner Fortschrittsbalken mit Prozent; wird Success-Grün, sobald alles erledigt ist
- TagsTags
- Finished (light app tag with check), Quiz (light gray) while the quiz is open, certificate warnings in yellow or redFinished (heller App-Tag mit Haken), Quiz (hellgrau), solange das Quiz offen ist, Zertifikatswarnungen in Gelb oder Rot
- LockedGesperrt
- Box disabled: secondary-100, no border, all text secondary-400, Locked tag with lock icon; stays focusable and explains why in a tooltipBox disabled: secondary-100, kein Rahmen, aller Text secondary-400, Locked-Tag mit Schloss-Icon; bleibt fokussierbar und erklärt den Grund im Tooltip
Every stateAlle Zustände
| DefaultStandard | HoverHover | |
|---|---|---|
| CourseKurs | ||
| Training with progressTraining mit Fortschritt | ||
| FinishedAbgeschlossen | ||
| LockedGesperrt | 3. Safety in the driving area
| — |