Shadcn Secondary Hero Block Twelve

Block Twelve is the card-based companion to the search support hero. It keeps the same Support label and How can we help? headline, but replaces the search field with two action cards: Contact Sales and Help and Support.

The source uses a container-query wrapper with @container, then switches the card group at @xl:grid-cols-2. On smaller containers the cards divide vertically; on larger ones they divide horizontally. That makes the block useful inside constrained page shells, not just full-width landing page routes.

Card Structure

Each card uses a lucide icon, short heading, short paragraph, and outline shadcn Button. The first card uses Mail and Talk to sales; the second uses MessageCircleQuestion and Contact Support. The copy is intentionally plain, which is appropriate for support pages where clarity beats cleverness.

Best Fit

Use this secondary hero for contact, help, or account-support pages where visitors need to choose a path. It can sit on an inner page in a SaaS app, a public support route, or a docs portal that separates commercial questions from technical help.

Related Shadcn UI Blocks

• Secondary Hero Blocks
• Hero Section Blocks

Preview Shadcn Secondary Hero Block Twelve