A feature weighted pricing panel built with pure HTML and CSS that prioritizes key features visually within a structured pricing layout. It assigns stronger visual emphasis to high impact benefits, helping users recognize value differences quickly.
Usage
Use this component when certain plan features require visual prioritization over others, such as premium tools, exclusive benefits, or performance advantages that differentiate higher-tier subscriptions.
Implementation
The structure uses weighted visual hierarchy techniques, including emphasis typography, contrast styling, and grouped feature sections. CSS ensures consistent spacing, balanced alignment, and responsive stacking across screen sizes.
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
- Built with pure HTML and CSS
- No JavaScript required
- Highlights high value features visually
- Maintains structured feature grouping
- Supports progressive tier comparison
- Fully responsive across breakpoints
- Suitable for SaaS and subscription pricing pages
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.