A pricing section with FAQ accordion built using pure HTML and CSS that combines subscription tiers with expandable question panels. It allows users to review pricing options while accessing contextual plan explanations without leaving the section.
Usage
Use this component when pricing pages require inline clarification of common questions, such as billing policies, refund terms, feature limitations, or upgrade rules that may influence user decisions.
Implementation
The structure places pricing cards above or beside a CSS driven accordion layout, using controlled state selectors and transition styling for expandable content. Responsive rules ensure the accordion stacks cleanly beneath pricing tiers on smaller screens.
HTML
<section class="pricing-faq">
<div class="pricing">
<h2>Simple Pricing</h2>
<p class="subtitle">Choose a plan that fits your needs</p>
<div class="plans">
<div class="plan">
<h3>Starter</h3>
<div class="price">$12</div>
<p>For individuals</p>
<button>Get Started</button>
</div>
<div class="plan featured">
<span class="badge">Most Popular</span>
<h3>Pro</h3>
<div class="price">$29</div>
<p>For growing teams</p>
<button>Upgrade</button>
</div>
<div class="plan">
<h3>Enterprise</h3>
<div class="price">Custom</div>
<p>Advanced needs</p>
<button>Contact Sales</button>
</div>
</div>
</div>
<div class="faq">
<h3>Frequently Asked Questions</h3>
<details>
<summary>Can I change my plan later?</summary>
<p>Yes, you can upgrade or downgrade your plan at any time.</p>
</details>
<details>
<summary>Is there a free trial?</summary>
<p>Yes, all plans include a 14-day free trial with no credit card required.</p>
</details>
<details>
<summary>Do you offer refunds?</summary>
<p>We offer a 30-day money-back guarantee on all paid plans.</p>
</details>
<details>
<summary>Is my data secure?</summary>
<p>Yes, we use industry-standard encryption and security practices.</p>
</details>
</div>
</section>CSS
:root {
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--primary:#2563eb;
--border:#e5e7eb;
}
@media (prefers-color-scheme: dark) {
:root {
--bg:#020617;
--card:#0f172a;
--text:#e5e7eb;
--muted:#94a3b8;
--primary:#3b82f6;
--border:#1e293b;
}
}
.pricing-faq {
background:var(--bg);
padding:64px 16px;
color:var(--text);
font-family:system-ui, sans-serif;
}
.pricing {
text-align:center;
margin-bottom:48px;
}
.pricing h2 {
font-size:1.8rem;
margin-bottom:8px;
}
.subtitle {
color:var(--muted);
margin-bottom:32px;
}
.plans {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
max-width:960px;
margin:0 auto;
}
.plan {
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
padding:32px 24px;
}
.plan h3 {
margin-bottom:8px;
}
.price {
font-size:2rem;
font-weight:700;
margin:16px 0;
}
.plan p {
color:var(--muted);
margin-bottom:20px;
}
.plan.featured {
background:var(--primary);
color:#fff;
border:none;
}
.plan.featured p {
color:rgba(255,255,255,.85);
}
.badge {
display:inline-block;
background:#fff;
color:var(--primary);
font-size:.7rem;
font-weight:700;
padding:6px 12px;
border-radius:999px;
margin-bottom:12px;
}
.plan button {
padding:12px 20px;
border-radius:999px;
border:none;
background:var(--primary);
color:#fff;
font-weight:600;
cursor:pointer;
}
.plan.featured button {
background:#fff;
color:var(--primary);
}
.faq {
max-width:720px;
margin:0 auto;
}
.faq h3 {
text-align:center;
margin-bottom:24px;
}
details {
background:var(--card);
border:1px solid var(--border);
border-radius:12px;
padding:14px 16px;
margin-bottom:12px;
}
summary {
cursor:pointer;
font-weight:600;
list-style:none;
}
summary::-webkit-details-marker {
display:none;
}
details p {
margin-top:10px;
color:var(--muted);
font-size:.95rem;
}
@media (max-width:480px) {
.pricing-faq {
padding:48px 12px;
}
.price {
font-size:1.6rem;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Integrates pricing tiers with FAQ accordion
- Enhances decision making clarity
- Maintains structured content hierarchy
- Fully responsive across breakpoints
- Suitable for SaaS and subscription platforms
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.