Map Preview Card with Address
Display a physical location with this intuitive card featuring a map preview and a clearly formatted address.
This is a fundamental component for any business directory, event page, or contact page. It gives users immediate visual context of a location and provides a clear call-to-action to get directions.
About this Component
This template presents location information in a familiar and easy-to-digest format. A large image at the top is intended for a static map image (which can be generated using services like the Google Maps Static API or Mapbox Static Images API). Below, the address is presented in a correctly formatted and semantic way, followed by a prominent button-style link to get directions.
Features
- Semantic Address: The location's address is wrapped in a native HTML
addresselement, which is semantically correct and good for accessibility and SEO. - Clear Call-to-Action: The "Get Directions" link is styled like a button to make it a clear, unmissable target for users.
- Hover Effect: The map image has a subtle zoom-in effect on hover to provide a pleasant interactive cue.
Code Breakdown
HTML Structure
The card is an article. An a tag makes the map image a clickable link, which could lead to an interactive map service. The content section includes a h3 for the location name and the semantic address tag for the physical address. Note that the browser's default styling for the address tag (usually italic) is overridden by setting font-style: normal in the CSS for a cleaner look.
CSS Styling
The component uses a standard block-flow layout, with padding applied to the content area to provide spacing from the card edges. The map image's hover effect is a simple CSS transform: scale(1.05) that is animated using the transition property on the base image style. The "Get Directions" button is a link styled to look like a button with display: inline-flex to properly align the icon and text.
Code
Here is the complete, self-contained code. To use it, you will need to replace the placeholder map image with a static map image of your own location and update the address and link.