Comparison Cards

Fetch pattern JSON: curl https://webspire.de/patterns/comparison/cards.json

cards.html

<section class="ws-comparison bg-[var(--ws-comparison-bg)] py-20">
  <div class="mx-auto max-w-5xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-comparison-text)] sm:text-4xl">Current state vs target state</h2>
      <p class="mt-4 text-lg text-[var(--ws-comparison-text-soft)]">A card-based comparison for directional decisions where one side should feel clearly stronger.</p>
    </div>

    <div class="mt-12 grid gap-6 lg:grid-cols-2">
      <article class="rounded-3xl border border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)] p-8 shadow-sm">
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-text-soft)]">Current</p>
        <h3 class="mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]">Too many parallel priorities</h3>
        <p class="mt-4 text-sm leading-6 text-[var(--ws-comparison-text-soft)]">Everything competes for attention, which makes the whole proposition feel less decisive.</p>
        <ul class="mt-8 space-y-3 text-sm text-[var(--ws-comparison-text-soft)]">
          <li>Mixed messaging across product, design and rollout</li>
          <li>Harder to explain in a short sales conversation</li>
          <li>More moving parts before launch even happens</li>
        </ul>
      </article>

      <article class="rounded-3xl border-2 border-[var(--ws-comparison-highlight)] bg-[var(--ws-comparison-highlight)]/6 p-8 shadow-lg">
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-highlight)]">Target</p>
        <h3 class="mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]">One strong path to ship</h3>
        <p class="mt-4 text-sm leading-6 text-[var(--ws-comparison-text-soft)]">The preferred card gets more weight, so the recommendation is obvious even before reading every bullet.</p>
        <ul class="mt-8 space-y-3 text-sm text-[var(--ws-comparison-text)]">
          <li>Clear hierarchy between must-have and optional scope</li>
          <li>Faster rollout with fewer decision branches</li>
          <li>Better internal alignment around what success means first</li>
        </ul>
        <a href="#" class="mt-8 inline-flex rounded-xl bg-[var(--ws-comparison-highlight)] px-5 py-3 text-sm font-semibold text-white transition hover:opacity-90">Choose this direction</a>
      </article>
    </div>
  </div>
</section>

Details

Family

comparison

Tier

enhanced

Kind

section

Extends

comparison/checklist

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

comparisoncardsside-by-sidedirectionaleditorial

Slots

Name	Required	Description
heading	Yes	Section heading and setup copy.
cards	Yes	Two comparison cards with distinct weight and messaging.

This version reads more editorial and less like pricing. Use it when both sides need some breathing room, but one outcome should still feel more convincing.