Shadcn Contact Block Six

A global offices contact section with city cards for San Francisco, London, and Singapore plus email and worldwide availability cues.

Shadcn Contact Block Six is the office-locator variant in this group. The source defines three demo offices: San Francisco, London, and Singapore, each with a country, address, timezone, and Unsplash image. The left column adds email, worldwide availability, and a Get in touch button.

Those locations and images are placeholders. They make the layout concrete, but production use should replace them with real office data, accessible image choices, and correct time zone labels.

Office Cards

Each office renders inside a shadcn Card with an image header, city and country, address text, and a clock row for timezone. The image uses next/image with fill, object cover, and a hover scale transition.

Responsive Behavior

The main grid switches at @3xl:grid-cols-[1fr_2fr], while the office list uses @md:grid-cols-3. That keeps the intro readable on mobile and turns the office cards into a compact row when space allows.

Customization Notes

Use this contact section when physical presence matters: agencies, enterprise SaaS teams, events, regional sales, or support offices. If your company is remote-only, keep the left column and replace the office cards with region-based contact owners or support hours.

Frequently Asked Questions

Does the block include a map?

No. The source uses image cards, not an embedded map. Add map links or directions only if you have verified destinations.

What should be changed first?

Replace office names, addresses, images, timezone labels, and the #contact-form target.

Related Shadcn UI Blocks

Start from Tailark

Preview Shadcn Contact Block Six