Borderless Grid Form

Contact 20Pro

A contact section with large headline, address and email info, and a borderless underline-style form in a three-column grid layout.

Shadcn UI Contact Block

Contact20 has a two-row structure. The top row contains a bold headline with uppercase subtext on the left, and a three-column info area on the right showing address (with uppercase label) and a large email link. Below, a three-column form grid spans the full width with underline-style inputs for name, email, phone, a service dropdown, and a wide textarea. A ghost button with arrow icon sits at the bottom left.

Minimal styling with no backgrounds or borders on inputs, only bottom underlines. All placeholder text uses uppercase with very muted colors. The select dropdown has borderless styling matching the inputs. Form fields are arranged in a grid that flows across three columns. The email address uses large bold typography.

Editorial and sophisticated with a portfolio or agency aesthetic. The borderless form style creates an open, uncluttered feel. The three-column grid creates visual rhythm. The uppercase labels and muted placeholders feel deliberate and designed. Works best with a minimal overall page design.

Dependencies

PackageType
@hookform/resolversNPM
lucide-reactNPM
reactNPM
react-hook-formNPM
zodNPM
button
@shadcn
Registry
field
@shadcn
Registry
input
@shadcn
Registry
select
@shadcn
Registry
textarea
@shadcn
Registry