e-commerce wishlist favorites saved-items shop wishlist favorites saved heart add-to-cart wishlist page layout saved products grid
Wishlist Base
Fetch pattern JSON:
curl https://webspire.de/patterns/wishlist/base.json base.html
<section
class="ws-wishlist"
style="
--ws-wishlist-bg: oklch(0.98 0.005 75);
--ws-wishlist-text: oklch(0.2 0.02 75);
--ws-wishlist-text-soft: oklch(0.45 0.015 75);
--ws-wishlist-border: oklch(0.85 0.01 75);
--ws-wishlist-accent: oklch(0.55 0.15 150);
--ws-wishlist-action-bg: oklch(0.35 0.02 75);
--ws-wishlist-action-text: oklch(0.98 0.005 75);
"
>
<div class="mx-auto max-w-5xl px-6 py-16 lg:py-24" style="background:var(--ws-wishlist-bg);color:var(--ws-wishlist-text)">
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl" style="color:var(--ws-wishlist-text)">My Wishlist</h1>
<p class="mt-2 text-base" style="color:var(--ws-wishlist-text-soft)">4 items saved</p>
<div class="mt-10 grid gap-6 sm:grid-cols-2">
<!-- Item 1 -->
<article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
<button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
<svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
</button>
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.7 0.1 250), oklch(0.6 0.15 300))" role="img" aria-label="Wireless Headphones"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Wireless Headphones</h3>
<p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$99.00</p>
<button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
</div>
</article>
<!-- Item 2 -->
<article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
<button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
<svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
</button>
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.65 0.12 180), oklch(0.55 0.14 230))" role="img" aria-label="Smart Watch Pro"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Smart Watch Pro</h3>
<p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$249.00</p>
<button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
</div>
</article>
<!-- Item 3 -->
<article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
<button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
<svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
</button>
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.72 0.08 100), oklch(0.62 0.12 150))" role="img" aria-label="Leather Backpack"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Leather Backpack</h3>
<p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$149.00</p>
<button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
</div>
</article>
<!-- Item 4 -->
<article class="group relative rounded-xl overflow-hidden" style="border:1px solid var(--ws-wishlist-border)">
<button type="button" class="absolute right-3 top-3 z-10 rounded-full p-2 transition hover:opacity-70" style="background:var(--ws-wishlist-bg)" aria-label="Remove from wishlist">
<svg class="h-5 w-5" style="color:oklch(0.6 0.2 15)" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>
</button>
<div class="aspect-[4/3]" style="background:linear-gradient(135deg, oklch(0.68 0.1 40), oklch(0.58 0.13 80))" role="img" aria-label="Running Shoes"></div>
<div class="p-5">
<h3 class="text-base font-semibold" style="color:var(--ws-wishlist-text)">Running Shoes</h3>
<p class="mt-1 text-lg font-bold" style="color:var(--ws-wishlist-text)">$129.00</p>
<button type="button" class="mt-3 w-full rounded-lg px-4 py-2.5 text-sm font-semibold transition hover:opacity-90" style="background:var(--ws-wishlist-action-bg);color:var(--ws-wishlist-action-text)">Add to Cart</button>
</div>
</article>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
e-commercewishlistfavoritessaved-itemsshop
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Page title and item count. |
| items | Yes | Grid of wishlist product cards. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns | number | 2 | Number of grid columns on desktop. |
Base variant for the Wishlist family. Use this as the main wishlist/favorites page in an e-commerce flow.