Pricing Plan List Template

A responsive template for creating clear and effective pricing comparison tables.

This component is perfect for SaaS products, service agencies, or any website that needs to display different tiers of features and costs in an easy to read format.

Screenshot of a responsive three-column pricing plan list.

Get Source Code Preview

About this Template

This pricing plan list provides a clean and modern design to compare different subscription levels or product packages. It uses Flexbox to create a layout that is a single column on mobile devices and expands to multiple columns on larger screens. The template features a visually distinct "recommended" plan to help guide customer decisions.

Features

Self-Contained Code: All styles are scoped to a parent class, preventing conflicts with your existing website's CSS. Just copy and paste the code into your project.
Mobile-First Design: The layout fluidly adapts from a single vertical column to a multi-column horizontal layout.
Highlighted Plan: The middle plan includes a .recommended class and a banner to make it stand out.
Easy Customization: Key design elements like colors and fonts can be changed easily by editing the CSS custom properties at the top of the style block.
Semantic HTML: The structure uses article, h2, and ul tags to organize content logically for SEO and accessibility.
Accessible Icons: Self-contained SVG icons are used for checkmarks and crosses. They remain sharp at any size and include a title element for screen readers.

Code Breakdown

The entire component is wrapped in a div with a .pricing-plan-template class. All CSS is scoped to this class. This ensures that the component's styles will not accidentally affect other elements on your page. Inside this, a container with the .pricing-grid class uses display: flex and flex-wrap: wrap to manage the layout of the individual pricing plans. Each plan is an article element with the class .plan.

Accessibility Notes

Accessibility was a key consideration for this template. Each pricing plan is structured as a self-contained article with a clear heading. This makes the page structure understandable to assistive technologies. For the highlighted plan, a visually hidden span with the text "Recommended" is included. This ensures that users who cannot see the visual emphasis still get the same information. The SVG icons for features also have a descriptive title so that their meaning is clear to everyone.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Plan List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

/* ==========================================================================
           Pricing Plan Component Styles - Copy from here
           ========================================================================== */
        .pricing-plan-template {
            --pricing-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --pricing-bg-color: #f8f9fa;
            --card-bg-color: #ffffff;
            --primary-text-color: #212529;
            --secondary-text-color: #6c757d;
            --accent-color: #0d6efd;
            --accent-color-dark: #0a58ca;
            --card-border-color: #dee2e6;
            --recommended-border-color: #0d6efd;
            --card-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
            --card-border-radius: .5rem;

font-family: var(--pricing-font-family);
            color: var(--primary-text-color);
            width: 100%;
            max-width: 1200px;
        }

.pricing-plan-template *,
        .pricing-plan-template *::before,
        .pricing-plan-template *::after {
            box-sizing: border-box;
        }

.pricing-plan-template .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

.pricing-plan-template .pricing-header {
            text-align: center;
            margin-bottom: 3rem;
        }

.pricing-plan-template .pricing-header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

.pricing-plan-template .pricing-header p {
            font-size: 1.125rem;
            color: var(--secondary-text-color);
            max-width: 600px;
            margin: 0 auto;
        }

.pricing-plan-template .pricing-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            margin: 0;
            padding: 0;
        }

.pricing-plan-template .plan {
            background-color: var(--card-bg-color);
            border: 1px solid var(--card-border-color);
            border-radius: var(--card-border-radius);
            box-shadow: var(--card-shadow);
            padding: 2rem;
            text-align: center;
            flex-grow: 1;
            flex-basis: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

@media (min-width: 768px) {
            .pricing-plan-template .plan {
                flex-basis: calc(50% - 1rem);
            }
        }
        
        @media (min-width: 1024px) {
            .pricing-plan-template .plan {
                flex-basis: calc(33.333% - 1.334rem);
            }
        }
        
        .pricing-plan-template .plan h2 {
            font-size: 1.5rem;
            margin: 0 0 0.5rem 0;
            color: var(--primary-text-color);
        }

.pricing-plan-template .plan .price {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        .pricing-plan-template .plan .price span {
            font-size: 1rem;
            font-weight: normal;
            color: var(--secondary-text-color);
        }
        
        .pricing-plan-template .plan .description {
            color: var(--secondary-text-color);
            margin-bottom: 2rem;
            min-height: 40px;
        }

.pricing-plan-template .plan .features {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem 0;
            text-align: left;
            flex-grow: 1;
        }
        
        .pricing-plan-template .plan .features li {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .pricing-plan-template .plan .features li svg {
            width: 24px;
            height: 24px;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }
        
        .pricing-plan-template .plan.recommended {
            border: 2px solid var(--recommended-border-color);
            transform: scale(1.05);
            z-index: 1;
        }
        
        .pricing-plan-template .plan.recommended::before {
            content: 'Most Popular';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--accent-color);
            color: white;
            padding: .5rem 2rem;
            font-size: .875rem;
            font-weight: bold;
            width: 100%;
        }

.pricing-plan-template .plan.recommended .plan-header {
            margin-top: 2rem;
        }
        
        .pricing-plan-template .plan .btn {
            display: inline-block;
            background-color: var(--accent-color);
            color: #fff;
            padding: 1rem 1.5rem;
            border-radius: var(--card-border-radius);
            text-decoration: none;
            font-weight: bold;
            border: 1px solid var(--accent-color);
            transition: background-color 0.2s, color 0.2s;
            cursor: pointer;
        }
        
        .pricing-plan-template .plan .btn:hover,
        .pricing-plan-template .plan .btn:focus {
            background-color: var(--accent-color-dark);
            border-color: var(--accent-color-dark);
        }
        
        .pricing-plan-template .plan:not(.recommended) .btn {
            background-color: var(--card-bg-color);
            color: var(--accent-color);
            border: 1px solid var(--card-border-color);
        }
        
        .pricing-plan-template .plan:not(.recommended) .btn:hover,
        .pricing-plan-template .plan:not(.recommended) .btn:focus {
             background-color: #e9ecef;
             color: var(--primary-text-color);
        }
    </style>
</head>
<body>

<div class="pricing-plan-template">

<header class="pricing-header">
        <h1>Find the Perfect Plan</h1>
        <p>Whether you're just starting out or scaling up, we have a plan that fits your needs. Start your free 14-day trial today.</p>
    </header>

<div class="pricing-grid">
        
        
        <article class="plan">
            <div class="plan-header">
                <h2>Sprout Kit</h2>
                <div class="price">$15<span>/month</span></div>
                <p class="description">Ideal for individuals and hobby projects just getting started.</p>
            </div>
            <ul class="features">
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    5 Active Projects
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    1 GB Storage
                </li>
                 <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Email Support
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a1a1a1" role="img"><title>Not Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
                    Advanced Analytics
                </li>
            </ul>
            <a href="#" class="btn">Choose Plan</a>
        </article>
        
        <article class="plan recommended">
            <div class="plan-header">
                 <h2>Orchard Pack <span class="sr-only">(Recommended)</span></h2>
                <div class="price">$45<span>/month</span></div>
                <p class="description">Best for small teams and growing businesses needing more power.</p>
            </div>
            <ul class="features">
                 <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    25 Active Projects
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    10 GB Storage
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Priority Email Support
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Advanced Analytics
                </li>
            </ul>
            <a href="#" class="btn">Get Started</a>
        </article>

<article class="plan">
             <div class="plan-header">
                <h2>Forest Fleet</h2>
                <div class="price">$99<span>/month</span></div>
                <p class="description">Built for large-scale operations and enterprise-level demands.</p>
            </div>
            <ul class="features">
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Unlimited Projects
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    100 GB Storage
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Dedicated Phone &amp; Email Support
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Advanced Analytics
                </li>
            </ul>
            <a href="#" class="btn">Contact Us</a>
        </article>

</div>
</div>

</body>
</html>

View Output