cards promo split sale discount pricing adobe ai product two-column offer promo sale split two cards strikethrough pricing discount product adobe two promotional cards side by side sale pricing card with strikethrough and image Adobe-style product promo split cards
Cards Promo Split
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/promo-split.json promo-split.html
<div class="ws-cards mx-auto max-w-5xl px-6 py-10">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<!-- Promo card A — light, pricing callout -->
<div class="relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-7 shadow-sm">
<!-- Eyebrow label -->
<p class="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-[var(--ws-color-text-muted)]">Adobe Creative Cloud</p>
<!-- Headline -->
<h3 class="text-xl font-bold leading-snug text-[var(--ws-cards-text)]">
50 % Rabatt auf Creative Cloud Pro.
</h3>
<!-- Body -->
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-cards-text-soft)]">
Gestalte Content nach deinen Vorstellungen. In den ersten drei Monaten.
</p>
<!-- Pricing -->
<div class="mt-4 flex items-baseline gap-2">
<span class="text-sm text-[var(--ws-color-text-muted)] line-through">77,99 €</span>
<span class="text-2xl font-black text-[var(--ws-cards-text)]">38,98 €</span>
<span class="text-sm text-[var(--ws-color-text-muted)]">/Monat</span>
</div>
<!-- CTA -->
<div class="mt-5">
<a href="#" class="inline-flex rounded-full border border-[var(--ws-cards-border)] bg-transparent px-5 py-2 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:bg-[var(--ws-color-surface-alt)]">
Jetzt sparen
</a>
</div>
<!-- Decorative product imagery area -->
<div class="mt-6 -mx-7 -mb-7 h-36 overflow-hidden bg-gradient-to-br from-amber-50 to-orange-100 flex items-end justify-center">
<!-- Stacked colored card shapes representing design outputs -->
<div class="relative mb-0 flex translate-y-4 items-end gap-2 px-6">
<div class="h-20 w-16 rotate-[-8deg] rounded-xl bg-gradient-to-br from-orange-400 to-yellow-300 shadow-lg"></div>
<div class="h-24 w-20 rounded-xl bg-gradient-to-br from-violet-500 to-indigo-500 shadow-lg"></div>
<div class="h-18 w-16 rotate-[6deg] rounded-xl bg-gradient-to-br from-sky-400 to-teal-400 shadow-lg"></div>
</div>
</div>
</div>
<!-- Promo card B — dark, AI product -->
<div class="relative flex flex-col overflow-hidden rounded-2xl bg-[var(--ws-cards-bg)] border border-[var(--ws-cards-border)] p-7">
<!-- Eyebrow label -->
<p class="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-[var(--ws-cards-text-muted)]">Adobe Firefly</p>
<!-- Headline -->
<h3 class="text-xl font-bold leading-snug text-[var(--ws-cards-text)]">
Spare 50 % und generiere ohne Limit — bis zum 22. April.
</h3>
<!-- Body -->
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-cards-text-soft)]">
Generiere Images mit ausgewählten Modellen und spare 50 % auf beliebte Firefly-Abos.
</p>
<!-- CTA -->
<div class="mt-5">
<a href="#" class="inline-flex rounded-full border border-[var(--ws-cards-border)] bg-transparent px-5 py-2 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:bg-[var(--ws-color-surface-alt)]">
Mehr erfahren
</a>
</div>
<!-- AI image collage area -->
<div class="mt-6 -mx-7 -mb-7 h-36 overflow-hidden">
<div class="grid h-full grid-cols-3 grid-rows-2 gap-1 p-1">
<div class="rounded-md bg-gradient-to-br from-pink-500 to-rose-600 row-span-2 col-span-1"></div>
<div class="rounded-md bg-gradient-to-br from-violet-500 to-indigo-600"></div>
<div class="rounded-md bg-gradient-to-br from-amber-400 to-orange-500"></div>
<div class="rounded-md bg-gradient-to-br from-teal-400 to-emerald-500"></div>
<div class="rounded-md bg-gradient-to-br from-sky-400 to-blue-600"></div>
</div>
</div>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardspromosplitsalediscountpricingadobeaiproducttwo-columnoffer
Slots
| Name | Required | Description |
|---|---|---|
| card-a | Yes | Light card with eyebrow, headline, pricing (old + new), CTA, and decorative imagery area. |
| card-b | Yes | Dark card with eyebrow, headline, body, CTA, and image mosaic area. |
Dual promo card pair. Light card shows a time-limited sale with strikethrough pricing; dark card showcases an AI/product feature with an image mosaic. Designed to sit directly below a hero or announcement bar.