Shadcn UI Contact Block
Contact24 displays global office locations in a two-column card grid. Each card has a map preview image at the top with a gradient overlay and text showing the region (uppercase small label) and city name (large bold text). Below the image, the card body shows the full address, phone number, and email, each with a small icon. A full-width outlined button at the bottom opens the location on a map.
Bordered cards with rounded corners and overflow hidden for the images. The map images zoom slightly on card hover. The gradient overlay fades from transparent at top to the background color at bottom, making the city name readable. Contact details use consistent icon sizing and text alignment.
Professional and corporate with a focus on international presence. The map images add visual variety while the consistent card structure keeps things organized. No form included, making this an information-only block. Pair with Contact2 or another form block for a complete contact page.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
button @shadcn | Registry |