contact map split address phone email social full-bleed contact map split address phone email social office directions contact section with map and address split layout contact info with Google Maps office location contact panel
Contact Map Split
Fetch pattern JSON:
curl https://webspire.de/patterns/contact/map-split.json map-split.html
<section class="ws-contact overflow-hidden">
<div class="grid min-h-[500px] lg:grid-cols-2">
<!-- Left: map placeholder -->
<div class="relative min-h-[320px] bg-slate-200 lg:min-h-[500px]">
<!-- Replace this div with an actual Google Maps iframe or map component -->
<div class="absolute inset-0 flex flex-col items-center justify-center gap-3">
<svg class="h-10 w-10 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
</svg>
<p class="text-sm font-medium text-slate-400">Map — replace with Google Maps iframe</p>
</div>
</div>
<!-- Right: contact info panel -->
<div class="bg-[var(--ws-color-surface)] px-8 py-14 lg:px-16">
<h2 class="text-2xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-3xl">Find us here</h2>
<p class="mt-3 text-base leading-relaxed text-[var(--ws-color-text-soft)]">We'd love to meet in person. Stop by our office or reach out through any of the channels below.</p>
<dl class="mt-10 space-y-6">
<!-- Address -->
<div class="flex items-start gap-4">
<dt class="shrink-0 mt-0.5">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--ws-color-bg-secondary)]">
<svg class="h-5 w-5 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
</svg>
</span>
</dt>
<dd>
<p class="text-sm font-semibold text-[var(--ws-color-text)]">Office address</p>
<p class="mt-1 text-sm text-[var(--ws-color-text-soft)]">Hauptstraße 42<br/>10115 Berlin, Germany</p>
<a href="#" class="mt-2 inline-flex items-center gap-1 text-sm font-medium text-[var(--ws-color-accent)] hover:underline">
Get directions
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</dd>
</div>
<!-- Phone -->
<div class="flex items-start gap-4">
<dt class="shrink-0 mt-0.5">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--ws-color-bg-secondary)]">
<svg class="h-5 w-5 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
</svg>
</span>
</dt>
<dd>
<p class="text-sm font-semibold text-[var(--ws-color-text)]">Phone</p>
<a href="tel:+493012345678" class="mt-1 block text-sm text-[var(--ws-color-text-soft)] hover:text-[var(--ws-color-accent)]">+49 30 1234 5678</a>
</dd>
</div>
<!-- Email -->
<div class="flex items-start gap-4">
<dt class="shrink-0 mt-0.5">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--ws-color-bg-secondary)]">
<svg class="h-5 w-5 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
</svg>
</span>
</dt>
<dd>
<p class="text-sm font-semibold text-[var(--ws-color-text)]">Email</p>
<a href="mailto:hello@example.com" class="mt-1 block text-sm text-[var(--ws-color-text-soft)] hover:text-[var(--ws-color-accent)]">hello@example.com</a>
</dd>
</div>
<!-- Office hours -->
<div class="flex items-start gap-4">
<dt class="shrink-0 mt-0.5">
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--ws-color-bg-secondary)]">
<svg class="h-5 w-5 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</span>
</dt>
<dd>
<p class="text-sm font-semibold text-[var(--ws-color-text)]">Office hours</p>
<p class="mt-1 text-sm text-[var(--ws-color-text-soft)]">Monday – Friday: 9:00 – 18:00<br/>Saturday – Sunday: Closed</p>
</dd>
</div>
</dl>
<!-- Social icons -->
<div class="mt-10 flex items-center gap-4">
<p class="text-sm font-semibold text-[var(--ws-color-text-soft)]">Follow us</p>
<a href="#" class="text-[var(--ws-color-text-soft)] transition hover:text-[var(--ws-color-accent)]" aria-label="Twitter / X">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="text-[var(--ws-color-text-soft)] transition hover:text-[var(--ws-color-accent)]" aria-label="LinkedIn">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="#" class="text-[var(--ws-color-text-soft)] transition hover:text-[var(--ws-color-accent)]" aria-label="GitHub">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
contactmapsplitaddressphoneemailsocialfull-bleed
Slots
| Name | Required | Description |
|---|---|---|
| map | Yes | Left column: map placeholder or Google Maps iframe. |
| heading | No | Heading in the contact info panel. |
| address | No | Physical address with Get directions link. |
| phone | No | Phone number. |
| No | Email address. | |
| hours | No | Office hours listing. |
| social | No | Social icon links row. |
Full-bleed two-column section. The left column is a map placeholder (replace with a Google Maps iframe) that fills the full height. The right panel shows an address with “Get directions” link, phone, email, office hours, and social icon links. No outer horizontal padding — the map bleeds edge to edge.