Section Header
The floating card that tells students where they are in the learning path. Tap it to open the subject detail view.
Variants
Status
Four states for the full interaction lifecycle. Default rests at the top of the map. Hover and pressed are handled by the app. You only need to pass disabled when the section is locked.
Usage
Put it at the top of the Home screen, above the path nodes. It always shows the section the student is in right now. Update it every time they move forward.
Tapping the card opens the subject detail view. Tapping the book icon goes straight to the theory content. If both land on the same screen, pass the same handler to onPress and onBookPress.
Do's & Don'ts
Do
- Keep it in sync with the student's real progress. It should always reflect where they are, not where they started.
- Use
disabledwhen the section is locked. The visual makes it clear the student hasn't unlocked it yet. - Give the book icon its own destination. Pass
onBookPressif there's a theory view. Don't make it do the same thing as the card tap.
Don't
- Don't embed it between path nodes. It floats above the map. Positioning it inside the path breaks the visual hierarchy.
- Don't use it outside the Home screen. This component is purpose-built for the learning map. For other contexts, use a different card pattern.
- Don't truncate the title silently. Keep section titles short enough to fit in one line. The card clips overflow but shows nothing when text is cut.
Related: Progress Bar (shows lesson or fossil progress above the card) · Option Card (the answer component inside the lesson the card links to)