Pricing table

How to use it

Use on a pricing page to compare up to three or four plans side by side. For a detailed feature-by-feature breakdown, add the comparison table below it instead of growing these lists. Replace the prices, periods and links with real ones, keep the billing period next to every price, and keep the hidden plan names in the links in sync with the headings.

Accessibility

The plans are a <ul> of three cards, each with its own <h3>, so screen readers can move plan to plan by heading; the price and billing period are plain text in one sentence, and each feature list is labelled with its plan. The recommended plan says "Most popular" in visible text, not just with its thicker border, and every action link carries visually hidden text naming its plan so three similar links stay distinct. Text #0f172a on white is 17.85:1, the period #475569 on white 7.58:1, the badge white on #1e3a8a 10.36:1, and the links #1d4ed8 on white (#eff6ff hovered) 6.70:1 (6.16:1) or white on #1d4ed8 (#1e40af hovered) 6.70:1 (8.72:1).

Source (copy-ready)

Copy code

<section class="dcl-pricing" aria-labelledby="dcl-pricing-title">
  <h2 id="dcl-pricing-title" class="dcl-pricing__title">Simple plans that grow with your team</h2>
  <ul class="dcl-pricing__plans">
    <li class="dcl-pricing__plan">
      <h3 id="dcl-pricing-starter" class="dcl-pricing__name">Starter</h3>
      <p class="dcl-pricing__price"><span class="dcl-pricing__amount">$0</span> <span class="dcl-pricing__period">Free for up to 3 people</span></p>
      <ul class="dcl-pricing__features" aria-label="Starter plan includes">
        <li class="dcl-pricing__feature">3 boards</li>
        <li class="dcl-pricing__feature">7-day history</li>
        <li class="dcl-pricing__feature">Community support</li>
      </ul>
      <a href="../index.html" class="dcl-pricing__cta">Start for free<span class="dcl-pricing__sr"> on the Starter plan</span></a>
    </li>
    <li class="dcl-pricing__plan dcl-pricing__plan--popular">
      <p class="dcl-pricing__badge">Most popular</p>
      <h3 id="dcl-pricing-team" class="dcl-pricing__name">Team</h3>
      <p class="dcl-pricing__price"><span class="dcl-pricing__amount">$9</span> <span class="dcl-pricing__period">per person per month, billed yearly</span></p>
      <ul class="dcl-pricing__features" aria-label="Team plan includes">
        <li class="dcl-pricing__feature">Unlimited boards</li>
        <li class="dcl-pricing__feature">Full history</li>
        <li class="dcl-pricing__feature">Offline mode</li>
        <li class="dcl-pricing__feature">Email support</li>
      </ul>
      <a href="../index.html" class="dcl-pricing__cta">Start a 14-day trial<span class="dcl-pricing__sr"> on the Team plan</span></a>
    </li>
    <li class="dcl-pricing__plan">
      <h3 id="dcl-pricing-business" class="dcl-pricing__name">Business</h3>
      <p class="dcl-pricing__price"><span class="dcl-pricing__amount">$19</span> <span class="dcl-pricing__period">per person per month, billed yearly</span></p>
      <ul class="dcl-pricing__features" aria-label="Business plan includes">
        <li class="dcl-pricing__feature">Everything in Team</li>
        <li class="dcl-pricing__feature">Access control and audit log</li>
        <li class="dcl-pricing__feature">Single sign-on</li>
        <li class="dcl-pricing__feature">Priority support</li>
      </ul>
      <a href="../about.html" class="dcl-pricing__cta">Contact sales<span class="dcl-pricing__sr"> on the Business plan</span></a>
    </li>
  </ul>
</section>
<style>
.dcl-pricing { padding: 2rem 1.25rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-pricing__title { margin: 0 0 1.5rem; font-size: 1.75rem; color: #0f172a; background-color: #ffffff; }
.dcl-pricing__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; align-items: start; margin: 0; padding: 0; list-style: none; }
.dcl-pricing__plan { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: 1.5rem; border: 1px solid #cbd5e1; border-radius: 0.75rem; color: #0f172a; background-color: #ffffff; }
.dcl-pricing__plan--popular { border: 3px solid #1e3a8a; }
.dcl-pricing__badge { align-self: flex-start; margin: 0; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #ffffff; background-color: #1e3a8a; }
.dcl-pricing__name { margin: 0; font-size: 1.25rem; color: #0f172a; background-color: #ffffff; }
.dcl-pricing__price { margin: 0; color: #0f172a; background-color: #ffffff; }
.dcl-pricing__amount { font-size: 2.25rem; font-weight: 700; color: #0f172a; background-color: #ffffff; }
.dcl-pricing__period { color: #475569; background-color: #ffffff; }
.dcl-pricing__features { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding-left: 1.25rem; }
.dcl-pricing__feature { color: #0f172a; background-color: #ffffff; }
.dcl-pricing__cta { margin-top: 0.5rem; padding: 0.65rem 1rem; border: 2px solid #1d4ed8; border-radius: 6px; font-weight: 600; text-align: center; text-decoration: none; color: #1d4ed8; background-color: #ffffff; }
.dcl-pricing__cta:hover { color: #1d4ed8; background-color: #eff6ff; }
.dcl-pricing__cta:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-pricing__plan--popular .dcl-pricing__cta { color: #ffffff; background-color: #1d4ed8; }
.dcl-pricing__plan--popular .dcl-pricing__cta:hover { color: #ffffff; background-color: #1e40af; }
.dcl-pricing__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; color: #0f172a; background-color: #ffffff; }
</style>