21 CSS Pricing Sections19 / 21

Pure CSSMIT licensed

Feature Accordion Tiers

Three tier cards with native <details>/<summary> dropdowns that reveal the full feature list on click — keeps the page short and lets curious buyers dig in. Deep purple palette, no JS, fully keyboard-accessible.

Published

Live Demo
Try it

The code

<section class="ps-19" aria-label="Pricing">
  <header class="ps-19__head">
    <h2>Pricing without the wall of checkmarks.</h2>
    <p>Open any tier to read the full feature list. Tap to collapse.</p>
  </header>
  <div class="ps-19__grid">
    <article class="ps-19__card">
      <h3>Indie</h3>
      <div class="ps-19__price"><em>$</em>11<span>/mo</span></div>
      <p class="ps-19__sub">For solo developers shipping side projects.</p>
      <details class="ps-19__det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>1 project workspace</li>
          <li>10 GB storage</li>
          <li>Community forum support</li>
          <li>Public deploys with auto-SSL</li>
          <li>50K monthly visitor cap</li>
          <li>1-year version history</li>
        </ul>
      </details>
      <a class="ps-19__cta" href="#indie">Choose Indie →</a>
    </article>
    <article class="ps-19__card ps-19__pri">
      <span class="ps-19__pill">Recommended</span>
      <h3>Studio</h3>
      <div class="ps-19__price"><em>$</em>34<span>/mo</span></div>
      <p class="ps-19__sub">For small teams shipping to real users.</p>
      <details class="ps-19__det" open>
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Unlimited project workspaces</li>
          <li>100 GB storage</li>
          <li>Priority email + chat support</li>
          <li>Custom domains with auto-SSL</li>
          <li>500K monthly visitor cap</li>
          <li>3-year version history</li>
          <li>Team roles &amp; permissions</li>
          <li>Slack, GitHub, Linear sync</li>
        </ul>
      </details>
      <a class="ps-19__cta ps-19__cta-pri" href="#studio">Choose Studio →</a>
    </article>
    <article class="ps-19__card">
      <h3>Org</h3>
      <div class="ps-19__price"><em>$</em>96<span>/mo</span></div>
      <p class="ps-19__sub">For organisations with compliance requirements.</p>
      <details class="ps-19__det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Everything in Studio</li>
          <li>SAML SSO &amp; SCIM provisioning</li>
          <li>Audit logs (90-day retention)</li>
          <li>Unlimited monthly visitors</li>
          <li>Forever version history</li>
          <li>SOC 2 + DPA on file</li>
          <li>SLA 99.99% with credits</li>
          <li>Dedicated CSM &amp; quarterly review</li>
        </ul>
      </details>
      <a class="ps-19__cta" href="#org">Talk to sales →</a>
    </article>
  </div>
</section>
.ps-19 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(168,85,247,0.16), transparent 60%), #15071f;
  color: #f3e8ff;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-19__head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.ps-19__head h2 {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}

.ps-19__head p {
  color: #c4a8d6;
  margin: 0;
  font-size: 14px;
}

.ps-19__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}

.ps-19__card {
  position: relative;
  background: #281033;
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
}

.ps-19__pri {
  background: linear-gradient(180deg, #3b1554, #281033);
  border-color: #a855f7;
  box-shadow: 0 0 0 1px #a855f7 inset, 0 16px 40px rgba(168,85,247,0.22);
}

.ps-19__pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #a855f7, #d946ef);
  color: #15071f;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.ps-19__card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #d8b4fe;
}

.ps-19__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  color: #fff;
}

.ps-19__price em {
  font-size: 0.5em;
  font-style: normal;
  padding-right: 2px;
  opacity: 0.7;
}

.ps-19__price span {
  font-size: 0.32em;
  font-weight: 500;
  opacity: 0.65;
  margin-left: 6px;
}

.ps-19__sub {
  font-size: 13px;
  color: #c4a8d6;
  margin: 0 0 16px;
  line-height: 1.5;
  min-height: 36px;
}

.ps-19__det {
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 16px;
  background: rgba(168,85,247,0.05);
}

.ps-19__det[open] {
  padding-bottom: 4px;
}

.ps-19__det summary {
  cursor: pointer;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 600;
  color: #d8b4fe;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: 0;
}

.ps-19__det summary::-webkit-details-marker {
  display: none;
}

.ps-19__det summary span {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.25s;
}

.ps-19__det[open] summary span {
  transform: rotate(180deg);
}

.ps-19__det summary:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 3px;
  border-radius: 4px;
}

.ps-19__det ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.95;
  color: #d8c8e8;
  border-top: 1px dashed rgba(168,85,247,0.18);
  padding-top: 10px;
}

.ps-19__det ul li::before {
  content: '✓';
  color: #d946ef;
  display: inline-block;
  width: 18px;
  font-weight: 700;
}

.ps-19__cta {
  display: block;
  text-align: center;
  margin-top: auto;
  padding: 11px 16px;
  border-radius: 8px;
  background: rgba(168,85,247,0.12);
  color: #d8b4fe;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(168,85,247,0.3);
  transition: background 0.18s, color 0.18s;
}

.ps-19__cta-pri {
  background: linear-gradient(135deg, #a855f7, #d946ef);
  color: #15071f;
  border-color: transparent;
}

.ps-19__cta:hover {
  background: rgba(168,85,247,0.28);
  color: #fff;
}

.ps-19__cta:focus-visible {
  outline: 2px solid #d946ef;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .ps-19__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .ps-19__sub {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-19__det summary span {
    transition: none;
  }

  .ps-19__cta {
    transition: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Pricing Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Feature Accordion Tiers
Source: https://codefronts.com/layouts/css-pricing-sections/feature-accordion-tiers/

Three tier cards with native <details>/<summary> dropdowns that reveal the full feature list on click — keeps the page short and lets curious buyers dig in. Deep purple palette, no JS, fully keyboard-accessible.
## HTML
```html
<section class="ps-19" aria-label="Pricing">
  <header class="ps-19__head">
    <h2>Pricing without the wall of checkmarks.</h2>
    <p>Open any tier to read the full feature list. Tap to collapse.</p>
  </header>
  <div class="ps-19__grid">
    <article class="ps-19__card">
      <h3>Indie</h3>
      <div class="ps-19__price"><em>$</em>11<span>/mo</span></div>
      <p class="ps-19__sub">For solo developers shipping side projects.</p>
      <details class="ps-19__det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>1 project workspace</li>
          <li>10 GB storage</li>
          <li>Community forum support</li>
          <li>Public deploys with auto-SSL</li>
          <li>50K monthly visitor cap</li>
          <li>1-year version history</li>
        </ul>
      </details>
      <a class="ps-19__cta" href="#indie">Choose Indie →</a>
    </article>
    <article class="ps-19__card ps-19__pri">
      <span class="ps-19__pill">Recommended</span>
      <h3>Studio</h3>
      <div class="ps-19__price"><em>$</em>34<span>/mo</span></div>
      <p class="ps-19__sub">For small teams shipping to real users.</p>
      <details class="ps-19__det" open>
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Unlimited project workspaces</li>
          <li>100 GB storage</li>
          <li>Priority email + chat support</li>
          <li>Custom domains with auto-SSL</li>
          <li>500K monthly visitor cap</li>
          <li>3-year version history</li>
          <li>Team roles &amp; permissions</li>
          <li>Slack, GitHub, Linear sync</li>
        </ul>
      </details>
      <a class="ps-19__cta ps-19__cta-pri" href="#studio">Choose Studio →</a>
    </article>
    <article class="ps-19__card">
      <h3>Org</h3>
      <div class="ps-19__price"><em>$</em>96<span>/mo</span></div>
      <p class="ps-19__sub">For organisations with compliance requirements.</p>
      <details class="ps-19__det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Everything in Studio</li>
          <li>SAML SSO &amp; SCIM provisioning</li>
          <li>Audit logs (90-day retention)</li>
          <li>Unlimited monthly visitors</li>
          <li>Forever version history</li>
          <li>SOC 2 + DPA on file</li>
          <li>SLA 99.99% with credits</li>
          <li>Dedicated CSM &amp; quarterly review</li>
        </ul>
      </details>
      <a class="ps-19__cta" href="#org">Talk to sales →</a>
    </article>
  </div>
</section>
```
## CSS
```css
.ps-19 {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(60% 60% at 50% 0%, rgba(168,85,247,0.16), transparent 60%), #15071f;
  color: #f3e8ff;
  font-family: 'Inter', system-ui, sans-serif;
}

.ps-19__head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.ps-19__head h2 {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: #fff;
}

.ps-19__head p {
  color: #c4a8d6;
  margin: 0;
  font-size: 14px;
}

.ps-19__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}

.ps-19__card {
  position: relative;
  background: #281033;
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
}

.ps-19__pri {
  background: linear-gradient(180deg, #3b1554, #281033);
  border-color: #a855f7;
  box-shadow: 0 0 0 1px #a855f7 inset, 0 16px 40px rgba(168,85,247,0.22);
}

.ps-19__pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #a855f7, #d946ef);
  color: #15071f;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}

.ps-19__card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #d8b4fe;
}

.ps-19__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  color: #fff;
}

.ps-19__price em {
  font-size: 0.5em;
  font-style: normal;
  padding-right: 2px;
  opacity: 0.7;
}

.ps-19__price span {
  font-size: 0.32em;
  font-weight: 500;
  opacity: 0.65;
  margin-left: 6px;
}

.ps-19__sub {
  font-size: 13px;
  color: #c4a8d6;
  margin: 0 0 16px;
  line-height: 1.5;
  min-height: 36px;
}

.ps-19__det {
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 16px;
  background: rgba(168,85,247,0.05);
}

.ps-19__det[open] {
  padding-bottom: 4px;
}

.ps-19__det summary {
  cursor: pointer;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 600;
  color: #d8b4fe;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: 0;
}

.ps-19__det summary::-webkit-details-marker {
  display: none;
}

.ps-19__det summary span {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.25s;
}

.ps-19__det[open] summary span {
  transform: rotate(180deg);
}

.ps-19__det summary:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 3px;
  border-radius: 4px;
}

.ps-19__det ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.95;
  color: #d8c8e8;
  border-top: 1px dashed rgba(168,85,247,0.18);
  padding-top: 10px;
}

.ps-19__det ul li::before {
  content: '✓';
  color: #d946ef;
  display: inline-block;
  width: 18px;
  font-weight: 700;
}

.ps-19__cta {
  display: block;
  text-align: center;
  margin-top: auto;
  padding: 11px 16px;
  border-radius: 8px;
  background: rgba(168,85,247,0.12);
  color: #d8b4fe;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid rgba(168,85,247,0.3);
  transition: background 0.18s, color 0.18s;
}

.ps-19__cta-pri {
  background: linear-gradient(135deg, #a855f7, #d946ef);
  color: #15071f;
  border-color: transparent;
}

.ps-19__cta:hover {
  background: rgba(168,85,247,0.28);
  color: #fff;
}

.ps-19__cta:focus-visible {
  outline: 2px solid #d946ef;
  outline-offset: 3px;
}

@media (max-width: 820px) {
  .ps-19__grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .ps-19__sub {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-19__det summary span {
    transition: none;
  }

  .ps-19__cta {
    transition: none;
  }
}
```

How this works

The feature accordion tiers layout uses native HTML — a display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) row of three <article> cards, each with a <details>/<summary> that expands the full feature list on click. Zero JavaScript: the browser handles the open/close state, keyboard access (Enter/Space), and ARIA announcement. The <summary> is styled with list-style: none and ::-webkit-details-marker { display: none } to hide the default disclosure triangle, and a manually-placed <span>⌄</span> chevron gets transform: rotate(180deg) in the [open] state — the only visual affordance the accordion is expandable.

Palette is premium enterprise SaaS: deep aubergine #15071f base with a radial-gradient(60% 60% at 50% 0%, rgba(168,85,247,0.16), transparent 60%) purple wash pinned to the top center — that gradient reads as "spotlight from above," pulling the eye down the pricing page. Card body #281033, recommended card linear-gradient(180deg, #3b1554, #281033), accent violet #a855f7, magenta chevron #d946ef. The recommended pill uses linear-gradient(135deg, #a855f7, #d946ef) — the diagonal gradient signals "premium" the way flat pills can't. Inter throughout at font-weight: 700 with letter-spacing: -0.02em on headings.

Why it converts: Iyengar's jam-shelf research showed too many visible options tank decision completion rates; progressive-disclosure accordion pricing tiers hide the 8-item feature walls until intent is signaled by a click. Baymard research on collapsible pricing lists shows feature-scan completion rates jump 40%+ vs full-open feature walls, especially on enterprise SaaS with 20+ features per tier. The middle Studio tier ships open by default — Thaler default-effect anchoring; the pre-opened tier is where the eye lands and where choice completes.

Make it yours

  • Recolor to your brand by editing five values: the deep aubergine base #15071f, the card body #281033, the accent violet #a855f7, the magenta chevron #d946ef, and the muted lavender text #c4a8d6. Fintech swaps to indigo #4f46e5 + electric cyan; developer tools use magenta-orange; wellness SaaS goes soft-teal #14b8a6 with sand accents.
  • Change which tier ships expanded by moving the open attribute — put it on the Indie <details> to anchor lower, or Org to push high-tier consideration. Thaler default-effect research suggests the middle tier is the psychological anchor for balanced conversion; put open on the highest-margin tier for direct revenue lift at the cost of some free-plan signups.
  • Swap Inter for 'Manrope' or 'Space Grotesk' for a more design-forward feel, or 'IBM Plex Sans' for enterprise-neutral. Keep the letter-spacing tightening on h2/h3 — the -0.02em is what gives the enterprise pricing its "serious tool" register vs generic sans-serif blandness.
  • For dark-on-light: flip to #faf5ff base, #fff cards, keep #a855f7 accent (works both ways), swap gradient endpoints for #f3e8ff to #fff. The [open] chevron rotation still works — transform is theme-agnostic.
  • For Tailwind + shadcn/ui: use bg-[#15071f] text-purple-50 on the section, and swap <details> for shadcn's <Accordion> primitive if you need controlled state. React/Vue: prefer native <details> unless you need to trigger analytics on expand — the ARIA and keyboard behavior are free, and no library ships it better than the browser.

Gotchas — read before shipping

  • Native <details> can't be smoothly height-animated in CSS alone — height: auto can't transition. The CSS only animates the chevron rotation. If you need slide-open animation, use interpolate-size: allow-keywords (Chrome 129+) or a JS grid-template-rows: 0fr → 1fr hack — but weigh the INP cost. The instant open/close is honestly fine for enterprise SaaS; abrupt reveal is what buyers expect from a serious tool.
  • The summary::-webkit-details-marker { display: none } hides the disclosure triangle in Safari/Chromium, but Firefox uses list-style on the <summary> itself — the list-style: none on the summary handles that. If you skip either rule, you get a duplicate marker (browser default + your chevron) on some engines.
  • The chevron rotation transition transform 0.25s is guarded by prefers-reduced-motion — good for WCAG 2.3.3. But the [open] state itself is instant and can feel abrupt to sighted users; that's a UX trade for zero-JS reliability. Don't add motion to compensate — the tradeoff is deliberate.
  • The violet #a855f7 on aubergine #15071f hits ~5.4:1 — passes AA (1.4.3) for normal text but not AAA. The muted lavender #c4a8d6 support text sits at ~8:1, comfortably AAA. If you make the tier h3 smaller than 15px, either bump violet to #c084fc for 8:1 or accept AA. The focus-visible outline uses #a855f7 at 2px with 3px offset — meets WCAG 2.4.7 and 1.4.11 (Non-text Contrast).
  • The recommended card uses box-shadow: 0 0 0 1px #a855f7 inset, 0 16px 40px rgba(168,85,247,0.22) for the ring + glow. If the parent container has overflow: hidden (common in sticky pricing sections or CMS wrapper divs), the 40px outer glow gets clipped. Test in your actual layout, not just the standalone playground.
  • The Studio tier's <details open> means that on mount, the Studio card is taller than Indie/Org — the grid's align-items: start aligns tops. On mobile the accordion stacks and this becomes a non-issue. But if you switch to align-items: stretch or center, the open card will drag its neighbours' vertical alignment and the layout will feel off-balance.

Techniques used in this demo

radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →