Pages Medium

Insurance — Plan Comparison

A reassuring insurance plan comparison page with three pricing tiers as cards, a most-popular highlight, coverage limits, deductibles and benefit checkmarks, a monthly versus annual billing toggle that recalculates prices, and a full feature-by-feature comparison table below.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --blue: #2563eb;
  --blue-d: #1d4ed8;
  --blue-50: #eef4ff;
  --green: #15a06b;
  --green-soft: #e6f6ee;
  --ink: #0f1a2b;
  --muted: #5a6b82;
  --bg: #f3f7fc;
  --white: #ffffff;
  --line: #e2eaf4;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(15, 26, 43, 0.04), 0 12px 30px rgba(15, 26, 43, 0.07);
  --shadow-pop: 0 4px 10px rgba(37, 99, 235, 0.16), 0 24px 50px rgba(37, 99, 235, 0.18);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 20px 72px;
}

/* ---------- Hero ---------- */
.hero { text-align: center; margin-bottom: 40px; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-50);
  padding: 6px 14px;
  border-radius: 999px;
}

.hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 18px 0 12px;
}

.lead {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
}

/* ---------- Billing toggle ---------- */
.billing {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.billing__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.billing__label.is-active { color: var(--ink); }

.billing__save {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

.toggle {
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: #cbd6e6;
  cursor: pointer;
  transition: background 0.2s ease;
  flex: none;
}
.toggle[aria-checked="true"] { background: var(--blue); }
.toggle:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }

.toggle__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(15, 26, 43, 0.3);
  transition: transform 0.2s ease;
}
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(22px); }

/* ---------- Plans ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 56px;
}

.plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.plan--popular {
  border: 2px solid var(--blue);
  box-shadow: var(--shadow-pop);
  transform: translateY(-10px);
}
.plan--popular:hover { transform: translateY(-13px); }

.plan__ribbon {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan__name { font-size: 20px; font-weight: 700; }
.plan__tag { color: var(--muted); font-size: 14px; margin-top: 4px; min-height: 40px; }

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 8px;
}
.plan__currency { font-size: 22px; font-weight: 700; color: var(--muted); align-self: flex-start; margin-top: 8px; }
.plan__amount {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan__per { font-size: 15px; font-weight: 600; color: var(--muted); }

.plan__billed { font-size: 13px; color: var(--muted); margin-top: 6px; }

.plan__cta {
  display: block;
  text-align: center;
  text-decoration: none;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  background: var(--blue);
  color: var(--white);
  transition: background 0.15s ease, transform 0.1s ease;
}
.plan__cta:hover { background: var(--blue-d); }
.plan__cta:active { transform: scale(0.98); }
.plan__cta:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }

.plan__cta--ghost {
  background: var(--blue-50);
  color: var(--blue-d);
}
.plan__cta--ghost:hover { background: #dfeaff; }

.plan__stats {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}
.plan__stats div { display: flex; justify-content: space-between; align-items: baseline; }
.plan__stats dt { color: var(--muted); font-size: 14px; }
.plan__stats dd { font-weight: 700; font-size: 15px; }

.plan__benefits {
  list-style: none;
  margin-top: 20px;
  display: grid;
  gap: 11px;
}
.plan__benefits li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: var(--ink);
}
.plan__benefits li::before {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.plan__benefits li.yes::before {
  content: "✓";
  background: var(--green-soft);
  color: var(--green);
}
.plan__benefits li.no::before {
  content: "–";
  background: #f0f3f8;
  color: #9aa8bc;
}
.plan__benefits li.no { color: var(--muted); }

/* ---------- Comparison table ---------- */
.compare__h {
  text-align: center;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.compare__scroll {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.ctable {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.ctable th, .ctable td {
  padding: 16px 20px;
  text-align: center;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: none; }

.ctable thead th {
  font-size: 16px;
  font-weight: 700;
  background: var(--blue-50);
  color: var(--ink);
}
.ctable thead th:first-child { background: var(--white); }

.ctable th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
}

.ctable td { font-weight: 600; }

.ctable__pop {
  background: rgba(37, 99, 235, 0.05);
  position: relative;
}
.ctable thead th.ctable__pop {
  background: var(--blue);
  color: var(--white);
}

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 800;
}
.dash { color: #b5c0d0; font-weight: 700; }

.compare__note {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 18px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .plan--popular { transform: none; }
  .plan--popular:hover { transform: translateY(-3px); }
  .plan__tag { min-height: 0; }
}

@media (max-width: 520px) {
  .page { padding: 32px 14px 56px; }
  .billing { gap: 10px; padding: 7px 12px; }
  .plan { padding: 24px 18px; }
  .plan__amount { font-size: 40px; }
  .ctable th, .ctable td { padding: 13px 14px; font-size: 14px; }
}

// Insurance plan comparison — monthly / annual billing toggle (vanilla JS)
(function () {
  "use strict";

  var toggle = document.getElementById("billingToggle");
  var lblMonthly = document.getElementById("lbl-monthly");
  var lblAnnual = document.getElementById("lbl-annual");
  var amounts = document.querySelectorAll(".plan__amount");
  var billedLines = document.querySelectorAll(".plan__billed");

  if (!toggle) return;

  // Cache the original "billed monthly" text so we can restore it.
  billedLines.forEach(function (el) {
    el.dataset.billedMonthly = el.textContent.trim();
  });

  function setActiveLabel(annual) {
    lblMonthly.classList.toggle("is-active", !annual);
    lblAnnual.classList.toggle("is-active", annual);
  }

  function animateValue(el, to) {
    var from = parseInt(el.textContent, 10) || 0;
    if (from === to) return;
    var steps = 12;
    var i = 0;
    var step = (to - from) / steps;
    clearInterval(el._timer);
    el._timer = setInterval(function () {
      i++;
      if (i >= steps) {
        el.textContent = to;
        clearInterval(el._timer);
      } else {
        el.textContent = Math.round(from + step * i);
      }
    }, 20);
  }

  function render(annual) {
    amounts.forEach(function (el) {
      var key = annual ? "annual" : "monthly";
      var value = parseInt(el.dataset[key], 10);
      if (!isNaN(value)) animateValue(el, value);
    });
    billedLines.forEach(function (el) {
      el.textContent = annual
        ? (el.dataset.billedAnnual || el.dataset.billedMonthly)
        : el.dataset.billedMonthly;
    });
    setActiveLabel(annual);
  }

  function flip() {
    var annual = toggle.getAttribute("aria-checked") !== "true";
    toggle.setAttribute("aria-checked", String(annual));
    render(annual);
  }

  toggle.addEventListener("click", flip);
  toggle.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      flip();
    }
  });

  // Initial state.
  setActiveLabel(false);
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Compare Plans — Meridian Health Cover</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="page">
    <header class="hero">
      <span class="eyebrow">Meridian Health Cover</span>
      <h1>Choose the plan that fits your life</h1>
      <p class="lead">Transparent pricing, no surprise fees, cancel anytime. All plans include 24/7
        telehealth and nationwide coverage.</p>

      <div class="billing" role="group" aria-label="Billing period">
        <span class="billing__label" id="lbl-monthly">Monthly</span>
        <button class="toggle" id="billingToggle" role="switch" aria-checked="false"
          aria-labelledby="lbl-monthly lbl-annual">
          <span class="toggle__knob" aria-hidden="true"></span>
        </button>
        <span class="billing__label" id="lbl-annual">Annual
          <span class="billing__save">Save 17%</span>
        </span>
      </div>
    </header>

    <section class="plans" aria-label="Plan tiers">
      <!-- Basic -->
      <article class="plan" aria-labelledby="plan-basic">
        <h2 class="plan__name" id="plan-basic">Basic</h2>
        <p class="plan__tag">Essential cover for individuals</p>
        <p class="plan__price">
          <span class="plan__currency">$</span>
          <span class="plan__amount" data-monthly="39" data-annual="32">39</span>
          <span class="plan__per">/mo</span>
        </p>
        <p class="plan__billed" data-billed-annual="Billed $384/year">Billed monthly</p>
        <a class="plan__cta plan__cta--ghost" href="#">Choose Basic</a>
        <dl class="plan__stats">
          <div><dt>Coverage limit</dt><dd>$250,000</dd></div>
          <div><dt>Annual deductible</dt><dd>$1,500</dd></div>
        </dl>
        <ul class="plan__benefits">
          <li class="yes">Primary care visits</li>
          <li class="yes">24/7 telehealth</li>
          <li class="yes">Generic prescriptions</li>
          <li class="no">Specialist referrals</li>
          <li class="no">Dental &amp; vision</li>
        </ul>
      </article>

      <!-- Standard (popular) -->
      <article class="plan plan--popular" aria-labelledby="plan-standard">
        <span class="plan__ribbon">Most popular</span>
        <h2 class="plan__name" id="plan-standard">Standard</h2>
        <p class="plan__tag">Balanced cover for families</p>
        <p class="plan__price">
          <span class="plan__currency">$</span>
          <span class="plan__amount" data-monthly="79" data-annual="66">79</span>
          <span class="plan__per">/mo</span>
        </p>
        <p class="plan__billed" data-billed-annual="Billed $792/year">Billed monthly</p>
        <a class="plan__cta" href="#">Choose Standard</a>
        <dl class="plan__stats">
          <div><dt>Coverage limit</dt><dd>$1,000,000</dd></div>
          <div><dt>Annual deductible</dt><dd>$750</dd></div>
        </dl>
        <ul class="plan__benefits">
          <li class="yes">Everything in Basic</li>
          <li class="yes">Specialist referrals</li>
          <li class="yes">Brand-name prescriptions</li>
          <li class="yes">Mental health support</li>
          <li class="no">Dental &amp; vision</li>
        </ul>
      </article>

      <!-- Premium -->
      <article class="plan" aria-labelledby="plan-premium">
        <h2 class="plan__name" id="plan-premium">Premium</h2>
        <p class="plan__tag">Complete cover, zero compromise</p>
        <p class="plan__price">
          <span class="plan__currency">$</span>
          <span class="plan__amount" data-monthly="129" data-annual="107">129</span>
          <span class="plan__per">/mo</span>
        </p>
        <p class="plan__billed" data-billed-annual="Billed $1,284/year">Billed monthly</p>
        <a class="plan__cta plan__cta--ghost" href="#">Choose Premium</a>
        <dl class="plan__stats">
          <div><dt>Coverage limit</dt><dd>Unlimited</dd></div>
          <div><dt>Annual deductible</dt><dd>$250</dd></div>
        </dl>
        <ul class="plan__benefits">
          <li class="yes">Everything in Standard</li>
          <li class="yes">Dental &amp; vision</li>
          <li class="yes">Worldwide travel cover</li>
          <li class="yes">Private room upgrade</li>
          <li class="yes">Dedicated care manager</li>
        </ul>
      </article>
    </section>

    <section class="compare" aria-labelledby="compare-h">
      <h2 class="compare__h" id="compare-h">Compare every feature</h2>
      <div class="compare__scroll">
        <table class="ctable">
          <caption class="sr-only">Feature comparison across Basic, Standard and Premium plans</caption>
          <thead>
            <tr>
              <th scope="col">Feature</th>
              <th scope="col">Basic</th>
              <th scope="col" class="ctable__pop">Standard</th>
              <th scope="col">Premium</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Monthly price</th>
              <td>$39</td><td class="ctable__pop">$79</td><td>$129</td>
            </tr>
            <tr>
              <th scope="row">Coverage limit</th>
              <td>$250k</td><td class="ctable__pop">$1M</td><td>Unlimited</td>
            </tr>
            <tr>
              <th scope="row">Annual deductible</th>
              <td>$1,500</td><td class="ctable__pop">$750</td><td>$250</td>
            </tr>
            <tr>
              <th scope="row">24/7 telehealth</th>
              <td class="is-yes"><span class="mark" aria-label="Included">✓</span></td>
              <td class="ctable__pop is-yes"><span class="mark" aria-label="Included">✓</span></td>
              <td class="is-yes"><span class="mark" aria-label="Included">✓</span></td>
            </tr>
            <tr>
              <th scope="row">Specialist referrals</th>
              <td class="is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="ctable__pop is-yes"><span class="mark" aria-label="Included">✓</span></td>
              <td class="is-yes"><span class="mark" aria-label="Included">✓</span></td>
            </tr>
            <tr>
              <th scope="row">Mental health support</th>
              <td class="is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="ctable__pop is-yes"><span class="mark" aria-label="Included">✓</span></td>
              <td class="is-yes"><span class="mark" aria-label="Included">✓</span></td>
            </tr>
            <tr>
              <th scope="row">Dental &amp; vision</th>
              <td class="is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="ctable__pop is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="is-yes"><span class="mark" aria-label="Included">✓</span></td>
            </tr>
            <tr>
              <th scope="row">Worldwide travel cover</th>
              <td class="is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="ctable__pop is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="is-yes"><span class="mark" aria-label="Included">✓</span></td>
            </tr>
            <tr>
              <th scope="row">Dedicated care manager</th>
              <td class="is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="ctable__pop is-no"><span class="dash" aria-label="Not included">—</span></td>
              <td class="is-yes"><span class="mark" aria-label="Included">✓</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="compare__note">Prices shown are illustrative. Final premiums depend on age, location
        and underwriting.</p>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>

Plan Comparison

A calm, trust-forward pricing page for an insurance product. Three plan tiers — Basic, Standard and Premium — sit side by side as rounded cards, each with a big confident monthly price, coverage limit, deductible and a list of included benefits with green checkmarks. The Standard column carries a Most popular ribbon and a subtle lift to guide the eye.

A monthly / annual toggle flips every price in place, applying a two-months-free annual discount and surfacing the per-year savings. Below the cards, a feature-by-feature comparison table lets people scan coverage, deductibles, telehealth, dental and support side by side, with check and dash marks for what each tier includes.

Everything is plain HTML, CSS custom properties and a small vanilla-JS file — no frameworks, no dependencies. Drop it into any landing page and rename the plans.

Illustrative UI only — not a real insurance quote or offer.