PhaseProgressBar

Shows expedition phase journey on the expedition detail page. 3 variants — shown at desktop and mobile with phase 5 (Conclave) active.

Variant A — Dots + Labels Connected

Small dots with phase names, connected by lines. Amber for completed, gray for upcoming. Current phase has bolder text. Compact, scannable. On mobile, collapses to a segmented bar with text label.

Desktop — 1280px
Announcement
Team
Expedition
Returns
Conclave
Voyage
Chronicle
Mobile — 375px

Phase 5 of 7: Conclave

Variant B — Numbered Step Circles

Numbered circles (like a stepper) with connecting lines. More visual weight than dots. Completed steps filled dark, current step has accent ring, future steps are outlined. Echoes the HowItWorks timeline for visual consistency.

Desktop — 1280px
1
Announce
2
Team
3
Expedition
4
Returns
5
Conclave
6
Voyage
7
Chronicle
Mobile — 375px
1
2
3
4
5
6
7

Phase 5: Conclave

Variant C — Contained Dark Bar

Dark background container with all phases listed inline. Completed phases in white, current in accent, future phases dimmed. Creates a strong visual band that separates header from article content. Matches the StatusElement dark treatment.

Desktop — 1280px
Announcement → Team → Expedition → Returns → Conclave → Voyage → Chronicle
5/7
Mobile — 375px
Conclave 5/7
Edge case — All Phases Complete (Chronicle)

How each variant looks when the expedition is fully complete. Important for archive viewing.

Variant A — Complete

Phase 7 of 7: Chronicle Published

Variant B — Complete
1
2
3
4
5
6
7

Phase 7: Chronicle Published

Variant C — Complete
Chronicle Published 7/7