Location-Based Event Hero Template
Help your attendees find their way with a hero section that clearly showcases your event's venue and location.
This layout pairs essential address details and a "Get Directions" call-to-action with a visual map, making it easy for attendees to plan their trip.
About the Location-Based Hero
For any in-person event, the location is a critical piece of information. This hero section is designed to present that information clearly and professionally. By combining the venue's name and address with a map visual, you provide both the necessary logistical details and a helpful visual aid. It's an essential component for any physical conference, meetup, or workshop landing page.
Features
- Location-Focused Information: Presents the venue name, address, and a map preview in a clean format.
- Clear Call-to-Action: Includes a prominent "Get Directions" button for user convenience.
- Two-Column Layout: A balanced layout separates textual information from the visual map on desktop screens.
- Static Map Image: Uses a placeholder image for the map, which can be easily replaced.
Code Breakdown
The component is split into CSS for your site's head and HTML for the body.
The layout of the .location-hero-container div is controlled by CSS Grid. We set its display to grid. On larger screens, grid-template-columns: 1fr 1fr creates the two-column structure. On mobile, it naturally falls back to a single column, which stacks the content on top of the map.
The textual information is structured with semantic h1 and p tags. The "Get Directions" link is an a tag styled to look like a button, and it includes an inline SVG icon for better visual communication. The map itself is a simple img element. Simply replace the placeholder image src and the href of the directions link with your actual information.