shadcn.io is not affiliated with official shadcn/ui
Reverse Split Dot Grid Map Hero Block for React
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.
Each button renders the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
Split Map Canvas Hero
Diagrams and mapsA split hero beside a wide map canvas that runs flush to the end rail: eight pulsing office pins and routes between them, with a closing band of three stats.
- Pro
Counter Stats Hero
Stats and live dataA compact, start-aligned hero for an email API on solid rails: a headline, a Shine Button and an outline button, then four counters in separate cells whose hairlines overshoot their corners.
- Pro
Split Panel Comparison Hero
Features and tablesA split hero for a status-page product: the headline and two calls to action beside a comparison table against a self-hosted page, in a hairline frame.
- Pro
Centered Countdown Timer Hero
Signup and waitlistA compact centred launch hero on solid rails with a live countdown as a full-width band of four cells and an email form whose Shine Button shows its loading and success states.
- Pro
Split Feature Flags Hero
Product windowsA split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.
- Pro
Split Architecture Diagram Hero
Diagrams and mapsA reverse split hero for an infrastructure platform: a service topology on a tinted canvas flush with the start rail, six icon nodes, a travelling request and an inspector, beside a headline, a Shine Button and three ticks.