Map Preview Card With Address

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-map {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Map Preview Card Styles === */
.map-card {
    --map-card-radius: 12px;
    --map-card-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--map-card-radius);
    box-shadow: var(--map-card-shadow);
    max-width: 400px;
    width: 100%;
    overflow: hidden;
}

.map-card-image-link {
    display: block;
}
.map-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.map-card-image-link:hover .map-card-image {
    transform: scale(1.05);
}

.map-card-content {
    padding: 1.5rem;
}

.map-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.map-card-address {
    font-style: normal;
    line-height: 1.6;
    color: #374151;
    margin: 0 0 1.25rem;
}

.map-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #1f2937;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.map-card-cta:hover {
    background-color: #374151;
}
.map-card-cta svg {
    width: 18px;
    height: 18px;
}
</style>

<div class="demo-container-map">
    <article class="map-card">
        <a href="#" target="_blank" class="map-card-image-link">
             
            <img src="https://placehold.co/800x440/e0e7ff/6366f1/png?text=Map+Here" alt="A map showing the location of the Kyoto Art Museum." class="map-card-image">
        </a>
        <div class="map-card-content">
            <h3 class="map-card-title">Kyoto Art Museum</h3>
            <address class="map-card-address">
                64 Tanida-cho, Shishigatani<br>
                Sakyo-ku, Kyoto, 606-8431<br>
                Japan
            </address>
            <a href="#" target="_blank" class="map-card-cta">
                <svg fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M502.61 233.32L278.68 9.39c-12.52-12.52-32.83-12.52-45.36 0L9.39 233.32c-12.52 12.53-12.52 32.83 0 45.36l223.93 223.93c12.52 12.53 32.83 12.53 45.36 0l223.93-223.93c12.52-12.53 12.52-32.83 0-45.36zm-100.98 12.56l-84.21 77.73c-5.12 4.73-13.43 1.1-13.43-5.88V264h-96v64c0 4.42-3.58 8-8 8h-32c-4.42 0-8-3.58-8-8v-80c0-17.67 14.33-32 32-32h112v-53.73c0-6.97 8.3-10.61 13.43-5.88l84.21 77.73c3.43 3.17 3.43 8.59 0 11.76z"></path></svg>
                Get Directions
            </a>
        </div>
    </article>
</div>