wedding invitation rsvp event celebration love ceremony wedding invitation rsvp couple ceremony event celebration venue wedding invitation page with RSVP form one-page wedding site with ceremony details
Wedding Invitation Base
Fetch pattern JSON:
curl https://webspire.de/patterns/wedding-invitation/base.json base.html
<div class="ws-wedding-invitation bg-amber-50">
<!-- Hero -->
<section class="px-6 pb-16 pt-24 text-center">
<p class="text-sm uppercase tracking-[0.3em] text-amber-700" style="font-family: serif;">Together with their families</p>
<h1 class="mt-6 text-5xl font-light tracking-tight text-slate-900 sm:text-7xl" style="font-family: serif;">Sarah <span class="text-amber-600">&</span> James</h1>
<p class="mt-4 text-lg text-slate-600" style="font-family: serif;">We're Getting Married</p>
<div class="mx-auto mt-6 h-px w-24 bg-amber-300"></div>
<p class="mt-6 text-base text-amber-700" style="font-family: serif;">Saturday, June 14th, 2026</p>
</section>
<!-- Couple Bios -->
<section class="px-6 py-16">
<div class="mx-auto grid max-w-4xl grid-cols-1 gap-12 sm:grid-cols-2">
<div class="text-center">
<div class="mx-auto flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-rose-200 to-amber-200 dark:from-rose-900/40 dark:to-amber-900/40">
<span class="text-4xl text-rose-600" style="font-family: serif;">S</span>
</div>
<h3 class="mt-4 text-xl font-light text-slate-900" style="font-family: serif;">Sarah Mitchell</h3>
<p class="mx-auto mt-3 max-w-xs text-sm leading-relaxed text-slate-600">A hopeless romantic with a love for sunflowers and Sunday morning coffee. Graphic designer by day, amateur baker by night. She knew he was the one the moment he laughed at her terrible puns.</p>
</div>
<div class="text-center">
<div class="mx-auto flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-amber-200 to-slate-200 dark:from-amber-900/40 dark:to-slate-800">
<span class="text-4xl text-amber-700" style="font-family: serif;">J</span>
</div>
<h3 class="mt-4 text-xl font-light text-slate-900" style="font-family: serif;">James Anderson</h3>
<p class="mx-auto mt-3 max-w-xs text-sm leading-relaxed text-slate-600">An adventurer at heart who believes the best stories begin with “yes.” Software engineer, avid hiker, and the kind of person who remembers your coffee order. He proposed on a trail overlooking the valley at sunset.</p>
</div>
</div>
</section>
<!-- When & Where -->
<section class="bg-white/60 px-6 py-16">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm uppercase tracking-[0.3em] text-amber-700" style="font-family: serif;">When & Where</p>
<h2 class="mt-4 text-3xl font-light text-slate-900" style="font-family: serif;">The Celebration</h2>
<div class="mx-auto mt-4 h-px w-16 bg-amber-300"></div>
<div class="mt-8 space-y-2">
<p class="text-lg font-medium text-slate-900" style="font-family: serif;">Saturday, June 14th, 2026 at 4:00 PM</p>
<p class="text-base text-slate-700" style="font-family: serif;">The Rosewood Estate</p>
<p class="text-sm text-slate-500">1234 Garden Lane, Napa Valley, California</p>
</div>
</div>
</section>
<!-- Timeline / Program -->
<section class="px-6 py-16">
<div class="mx-auto max-w-3xl text-center">
<p class="text-sm uppercase tracking-[0.3em] text-amber-700" style="font-family: serif;">The Day</p>
<h2 class="mt-4 text-3xl font-light text-slate-900" style="font-family: serif;">Our Program</h2>
<div class="mx-auto mt-4 h-px w-16 bg-amber-300"></div>
</div>
<div class="mx-auto mt-10 grid max-w-4xl grid-cols-2 gap-6 sm:grid-cols-4">
<div class="rounded-2xl border border-amber-200 bg-[var(--ws-color-surface)] px-4 py-6 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
<svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
</div>
<p class="mt-3 text-xs font-medium uppercase tracking-wider text-amber-700">4:00 PM</p>
<p class="mt-1 text-sm font-medium text-slate-900" style="font-family: serif;">Ceremony</p>
</div>
<div class="rounded-2xl border border-amber-200 bg-[var(--ws-color-surface)] px-4 py-6 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
<svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<p class="mt-3 text-xs font-medium uppercase tracking-wider text-amber-700">5:00 PM</p>
<p class="mt-1 text-sm font-medium text-slate-900" style="font-family: serif;">Cocktails</p>
</div>
<div class="rounded-2xl border border-amber-200 bg-[var(--ws-color-surface)] px-4 py-6 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
<svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z"/></svg>
</div>
<p class="mt-3 text-xs font-medium uppercase tracking-wider text-amber-700">6:30 PM</p>
<p class="mt-1 text-sm font-medium text-slate-900" style="font-family: serif;">Reception</p>
</div>
<div class="rounded-2xl border border-amber-200 bg-[var(--ws-color-surface)] px-4 py-6 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
<svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/></svg>
</div>
<p class="mt-3 text-xs font-medium uppercase tracking-wider text-amber-700">9:00 PM</p>
<p class="mt-1 text-sm font-medium text-slate-900" style="font-family: serif;">Party</p>
</div>
</div>
</section>
<!-- RSVP -->
<section class="bg-white/60 px-6 py-16">
<div class="mx-auto max-w-lg text-center">
<p class="text-sm uppercase tracking-[0.3em] text-amber-700" style="font-family: serif;">RSVP</p>
<h2 class="mt-4 text-3xl font-light text-slate-900" style="font-family: serif;">Will You Join Us?</h2>
<div class="mx-auto mt-4 h-px w-16 bg-amber-300"></div>
<p class="mt-4 text-sm text-slate-500">Kindly respond by May 15th, 2026</p>
<form class="mt-8 space-y-4 text-left">
<div>
<label for="rsvp-name" class="block text-sm font-medium text-slate-700">Full Name</label>
<input type="text" id="rsvp-name" class="mt-1 block w-full rounded-xl border border-amber-200 bg-[var(--ws-color-surface)] px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20" placeholder="Your full name" />
</div>
<div>
<label for="rsvp-email" class="block text-sm font-medium text-slate-700">Email</label>
<input type="email" id="rsvp-email" class="mt-1 block w-full rounded-xl border border-amber-200 bg-[var(--ws-color-surface)] px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20" placeholder="you@example.com" />
</div>
<fieldset>
<legend class="block text-sm font-medium text-slate-700">Attendance</legend>
<div class="mt-2 flex gap-6">
<label class="flex items-center gap-2 text-sm text-slate-700">
<input type="radio" name="attendance" value="accepts" class="h-4 w-4 border-amber-300 text-amber-600 focus:ring-amber-500" checked />
Joyfully Accepts
</label>
<label class="flex items-center gap-2 text-sm text-slate-700">
<input type="radio" name="attendance" value="declines" class="h-4 w-4 border-amber-300 text-amber-600 focus:ring-amber-500" />
Respectfully Declines
</label>
</div>
</fieldset>
<div>
<label for="rsvp-dietary" class="block text-sm font-medium text-slate-700">Dietary Notes</label>
<textarea id="rsvp-dietary" rows="3" class="mt-1 block w-full rounded-xl border border-amber-200 bg-[var(--ws-color-surface)] px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 focus:border-amber-500 focus:ring-2 focus:ring-amber-500/20" placeholder="Any allergies or dietary preferences..."></textarea>
</div>
<button type="submit" class="w-full rounded-xl bg-amber-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-amber-700">Send RSVP</button>
</form>
</div>
</section>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
weddinginvitationrsvpeventcelebrationloveceremony
Slots
| Name | Required | Description |
|---|---|---|
| hero | Yes | Couple names, wedding date, and tagline. |
| coupleBios | No | Side-by-side couple photo placeholders and short bios. |
| venueDetails | Yes | Date, time, venue name, and address. |
| timeline | No | Horizontal program steps (ceremony, cocktails, reception, party). |
| rsvpForm | Yes | Name, email, attendance radio, dietary textarea, and submit button. |