Contact 32 - Split contact with full-height image

Pro

A two-column contact layout with tall photography and dark overlay text on one side, plus a form with mail and phone links on the other.

Shadcn Contact 32 block

Component data

ID
contact32
Access
pro
Created
Feb 26, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Contact 32 block design & features

Contact32 is a split contact section built with shadcn/ui. Inside the page container, large screens show a tall rounded image panel with a dark scrim with a small uppercase lead-in and headline near the lower edge; the other column vertically centers a form with title, description, and icon links for email and phone above required fields for first name, last name, email, and message. Submit uses a loading state, inline errors from validation, and a short success banner after send.

The photo side reads as immersive while the form side stays a calm light surface with muted supporting text. Mail and tel links pick up underlines on hover; the primary button spans the field stack and includes a trailing arrow icon.

The layout feels editorial and roomy rather than a shallow band, with moderate complexity from the split framing and direct contact shortcuts next to the form.

The tall image column is hidden on small viewports so the form becomes a single-column flow first.