Comparison Checklist

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

checklist.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">
      <p class="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-comparison-highlight)]">Comparison</p>
      <h2 class="mt-4 text-3xl font-bold tracking-tight text-[var(--ws-comparison-text)] sm:text-4xl">What we actually need</h2>
      <p class="mt-4 text-lg text-[var(--ws-comparison-text-soft)]">A simple side-by-side frame for current assumptions versus the stronger target state.</p>
    </div>

    <div class="mt-12 grid overflow-hidden rounded-3xl border border-[var(--ws-comparison-border)] bg-[var(--ws-comparison-bg)] shadow-sm md:grid-cols-2">
      <div class="p-8 md:border-r md:border-[var(--ws-comparison-border)]">
        <div class="max-w-md">
          <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-text-soft)]">Nice to have</p>
          <h3 class="mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]">Looks good on paper</h3>
          <p class="mt-3 text-sm leading-6 text-[var(--ws-comparison-text-soft)]">Useful additions when budget, complexity and rollout speed are secondary concerns.</p>
        </div>
        <ul class="mt-8 space-y-4">
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text-soft)]"><span class="mt-0.5 text-base">+</span><span>Extra polish layers and advanced integrations</span></li>
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text-soft)]"><span class="mt-0.5 text-base">+</span><span>More flexible content controls for edge cases</span></li>
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text-soft)]"><span class="mt-0.5 text-base">+</span><span>Optional storytelling sections for later expansion</span></li>
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text-soft)]"><span class="mt-0.5 text-base">+</span><span>Additional automation once the core workflow is stable</span></li>
        </ul>
      </div>

      <div class="bg-[var(--ws-comparison-highlight)]/5 p-8">
        <div class="max-w-md">
          <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-comparison-highlight)]">What we need</p>
          <h3 class="mt-3 text-2xl font-semibold text-[var(--ws-comparison-text)]">Clear, shippable essentials</h3>
          <p class="mt-3 text-sm leading-6 text-[var(--ws-comparison-text-soft)]">The preferred side gets stronger contrast and clearer priority because it represents the actual decision path.</p>
        </div>
        <ul class="mt-8 space-y-4">
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text)]"><span class="mt-0.5 text-emerald-600">✓</span><span>Fast to understand in one pass</span></li>
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text)]"><span class="mt-0.5 text-emerald-600">✓</span><span>Easy to explain to internal and external stakeholders</span></li>
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text)]"><span class="mt-0.5 text-emerald-600">✓</span><span>Prioritized around rollout speed and clarity</span></li>
          <li class="flex items-start gap-3 text-[var(--ws-comparison-text)]"><span class="mt-0.5 text-emerald-600">✓</span><span>Leaves room for iteration after launch</span></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Details

Family

comparison

Tier

base

Kind

section

Extends

comparison/side-by-side

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

comparisonchecklistside-by-sidebefore-afterrequirements

Slots

Name	Required	Description
heading	Yes	Intro text for the comparison section.
left	Yes	Muted checklist column for the lower-priority or current state.
right	Yes	Emphasized checklist column for the preferred target state.

Use this for requirement framing, before/after messaging, or any editorial comparison that should feel more directional than a pricing table. The left side stays quieter, while the right side reads as the preferred outcome.