A pricing card built with pure HTML and CSS that presents pricing plans, features, and call-to-action elements in a clear, structured layout without relying on JavaScript or external libraries.
Usage
This component is ideal for interfaces where pricing comparison and plan clarity are important, such as SaaS landing pages, product pages, subscription sections, or service offerings.
Implementation
The pricing layout is created using CSS flexbox or grid, spacing control, and visual hierarchy, allowing plans and features to be displayed clearly while remaining lightweight and easy to customize.
HTML
<div class="ss-card">
<h3>Basic Plan</h3>
<h2>$11</h2>
<p>Per month</p>
</div>CSS
.ss-card{
--bg: #ffffff;
--text: #111827;
--title: #2563eb;
--shadow: 0 20px 40px rgba(0,0,0,.12);
padding:28px;
max-width:320px;
text-align:center;
border-radius:18px;
background:var(--bg);
color:var(--text);
box-shadow:var(--shadow);
transition:background .3s,color .3s,box-shadow .3s;
}
.ss-card h2{
margin:12px 0;
color:var(--title);
}
@media (prefers-color-scheme: dark){
.ss-card{
--bg: #141414;
--text: #e5e7eb;
--title: #60a5fa;
--shadow: 0 20px 40px rgba(0,0,0,.65);
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Designed for clear pricing and plan comparison
- Supports feature lists and call-to-action buttons
- Easy to customize layout, colors, and spacing
- Works in modern browsers
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.