Contact 4 - Department cards with fading map carousel

Pro

A lead-in introduces three bordered department cards above a carousel that crossfades map slides, each with a summary card and link.

Shadcn Contact 4 block

Component Data

  • ID:contact4
  • Access:pro
  • Created:Oct 9, 2024
  • Type:block

Contact 4 block design & features

Contact4 pairs introductory copy with shadcn/ui Carousel wired to a fade plugin so slides replace one another softly instead of sliding horizontally. Three bordered cards outline Sales, Support, and General paths, each pairing a title, muted description, and text link. The lower region loops through static map images; every slide layers a white summary block with title, supporting line, and another link, positioned over or beneath the map depending on breakpoint.

Borders and rounded corners stay light; carousel navigation buttons anchor toward the lower-right. On narrow screens the summary panel continues below the map with side borders that visually tie the stack together.

The pattern is more elaborate than a single static map because each office or overview state is its own slide with crossfade timing.

The first slide summarizes multiple locations while later slides drill into single cities, so you can show both overview and detail in one block.