shadcn.io is not affiliated with official shadcn/ui
Reverse Split Dot Grid Map Hero Block for Radix UI
A reverse split contact hero on solid rails: an abstract dot map with a pulsing marker per office fills the first half up to a divider, beside a headline, a Shine Button and three offices as ruled rows.
Installation
Overview
A reverse split hero for a contact page, shown here for Tideline, a company with support engineers in three cities. The first half is an abstract map of dots with a marker for each office, each pulsing in turn under its city's name, joined by two faint arcs; it fills its column up to a solid divider that meets the page's top rule at a + mark. Beside it sit a quiet status badge, a two-line headline, a sentence, a Shine Button and an outline Button, then the three offices as ruled rows with their addresses and time zones. The hero opens on the page's top rule between the same side rails as the pricing blocks, so it stacks with them. It's built from Dot Pattern, Guides, Shine Button, Button, Badge and Status, with CSS transitions for the entrance and animate-ping for the markers. For enterprise contact pages, multi-location businesses, global SaaS companies, and any site that needs to show international reach.
FAQ
How do I change the offices and their markers?
Edit OFFICES: each has a city, an address, a timeZone, and the marker's place on the map as x and y, in percent of the map's width and height. The same list draws the markers and the ruled rows beside the map, so an office you add gets both. The two arcs are ARCS, paths in the map's 0 to 100 space: change them with the markers. Keep markers at least 15% apart across, or their city names run into each other on a phone.
Can I swap the dots for a real map?
Yes. The map is one Dot Pattern with the markers inside it, filling the first column of the grid. Put your map component there instead (an embed from your maps provider, or an SVG of the continents), keep it aria-hidden if it's only a picture, and keep a height (h-72, and lg:min-h-[28rem]) so it doesn't collapse when the columns stack. The office rows stay the place where the addresses can be read and copied.
How do I point the buttons at my pages?
Contact support and Book a call are links (href="#"): point them at your contact form and your scheduling page.
The Shine Button and the Button each take asChild with the link inside, so it can be your router's link.
What happens in a right-to-left layout?
The copy and the rows mirror: the text, the pin icons and the buttons start from the right. The map doesn't: it's set to dir="ltr", because geography doesn't flip, so San Francisco stays on the west. The addresses and time zones sit in a bdi, so 245 Harbor Way keeps its number first and (UTC−8) its brackets and sign.
How does a screen reader read the offices?
The map is a picture, hidden from screen readers, and holds nothing that can be focused. The offices are a list of three, each with its city, its address and its time zone as text, and the pin icons are hidden. The headline is the page's one h1.
How does it fit on a phone?
The columns sit side by side from the lg breakpoint. Below it the text comes first, with both buttons and the three offices on the first screen, and the map follows in a 288 px band under a rule with + marks on its corners. The headline steps down from text-5xl to text-4xl, and the buttons wrap onto two lines when they don't fit on one. With reduced motion on, everything is in place from the start and the markers hold still.