This pricing panel emphasizes included features rather than price, useful for value-driven comparisons.
HTML
<section class="pricing-panel">
<header class="pricing-panel__header">
<h4 class="pricing-panel__title">Pro</h4>
<div class="pricing-panel__price">
<span class="pricing-panel__amount">$29</span>
<span class="pricing-panel__period">/mo</span>
</div>
</header>
<ul class="pricing-panel__features">
<li data-weight="high">Unlimited API</li>
<li data-weight="medium">Auth System</li>
<li data-weight="medium">UI Components</li>
<li data-weight="low">Email Support</li>
</ul>
</section>CSS
.pricing-panel {
width: 170px;
padding: 0.65rem;
border-radius: 12px;
background: #ffffff;
color: #111827;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
display: grid;
gap: 0.5rem;
font-family: system-ui, -apple-system, sans-serif;
}
.pricing-panel__header {
display: grid;
gap: 0.15rem;
}
.pricing-panel__title {
font-size: 12px;
font-weight: 600;
}
.pricing-panel__price {
display: flex;
align-items: baseline;
gap: 0.2rem;
}
.pricing-panel__amount {
font-size: 16px;
font-weight: 700;
}
.pricing-panel__period {
font-size: 10px;
color: #6b7280;
}
.pricing-panel__features {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.25rem;
}
.pricing-panel__features li {
font-size: 10px;
padding: 0.3rem 0.4rem;
border-radius: 6px;
background: #f9fafb;
color: #374151;
display: flex;
align-items: center;
justify-content: space-between;
}
.pricing-panel__features li::after {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
}
.pricing-panel__features li[data-weight="high"]::after {
background: #22c55e;
}
.pricing-panel__features li[data-weight="medium"]::after {
background: #f59e0b;
}
.pricing-panel__features li[data-weight="low"]::after {
background: #9ca3af;
}
@media (prefers-color-scheme: dark) {
.pricing-panel {
background: #1f2937;
color: #f3f4f6;
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
.pricing-panel__period {
color: #9ca3af;
}
.pricing-panel__features li {
background: #111827;
color: #e5e7eb;
}
}Notes
- Value-first pricing presentation
- Compact feature comparison
- Suitable for enterprise plans
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.