Contact 22 block design & features
Contact22 is a two-column contact section built with Shadcn UI for several physical locations. The left column stacks selectable rows that each show an office name and street-level address. The right column holds a live map panel, a compact card with address, phone, and email, and a short form for name, email, and message.
The active row picks up primary color while inactive rows stay quiet with a light hover. The map view tracks the highlighted address. The info card lines up small glyphs with text links. The form surfaces field-level feedback after submission attempts.
Map-forward and utilitarian: keeping the list, map, and card in sync makes the mental model obvious. Row chrome reads as light buttons rather than heavy cards. This is a moderately elaborate block because it needs consistent location data and enough rows to feel realistic.
Narrow layouts stack the pieces vertically. A long office list can scroll inside the left column while the map remains reachable.