Best gelato in 500 meters
Gelato break
V1 · Number of options
How many tiles the selector exposes. Fewer = easier glance; more = richer picks.
2 settings: 2 · 3Option counts
A · two
2 tiles side by side
B · three
3 tiles side by side
V2 · Tile subtitle format
What the small text under the tile title carries. The tapped card shows the complementary info — never both in the same slot.
2 formats: distance · directionalSubtitle format · A · distance (time)
tile 1
2 min
tile 2
5 min
tile 3
8 min
Subtitle format · B · directional (anchor)
tile 1
→ Colosseum
tile 2
→ Trevi
tile 3
→ Forum
V3 · Full components · unselected state
V1 × V2 matrix rendered. 2 × 2 = 4 selector variants in their initial unselected state.
2 option counts × 2 subtitle formats = 4 selector variants
2 options · distance
2 options · directional
3 options · distance
3 options · directional
Selected state · card reveals the complementary info
Tap a tile → a Far-style place card surfaces above the selector. It carries whichever info the selector didn't expose. Two demos below, one per subtitle format.
Selector showed 5 min → card shows → Trevi
Selector showed → Trevi → card shows 5 min walk
Best gelato in 500 meters
Gelato break