Contact Section With Split Support Grid

Pro

Split contact section with Book a call and Send us a message as matched columns, plus Discord, docs, and X cards. Follows light and dark.

When to use Contact Section With Split Support Grid

Use this when the page should route people, not collect a five field brief. The top half is two equal columns. Book a call sits on the left with a calendar hash. Send us a message sits on the right with a mailbox. Both buttons share a height, a width, and a baseline so the split does not look like two different pages glued together. Under that sit three cards: Discord, docs, and X. The Discord card keeps the purple so it is the one social destination that reads as a product, not a footer link.

Skip it if those two paths are fake. An empty Book a call hash is a brochure. A Send us a message link that hits a dead inbox is worse than no column. Wire the calendar, the hello@rune.codes mailbox, the Discord invite, and the X handle before you ship. Do not park a form under this band. The whole point is that the next step already has a door.

Block details

Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
230 lines, 8 KB in one file
Install
wensity add contact-section-with-split-support-grid --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, contact, support, cards
Last updated

More contact sections