Pricing Tables

Structured pricing layouts for subscription plans, subscription tiers, and service comparisons with feature lists and call-to-action buttons.

Basic 2-Column

Simple side-by-side comparison of two hosting plans. Use .hu-pricing-grid with .hu-pricing-card children.

Shared Hosting vs VPS

Shared Hosting

Perfect for personal websites and blogs

$ 4.99 /mo

10 GB SSD Storage
100 GB Bandwidth
1 Website
Free SSL Certificate

VPS Hosting

For growing businesses and developers

$ 19.99 /mo

50 GB NVMe Storage
Unmetered Bandwidth
2 vCPU Cores
Full Root Access

HTML

<div class="hu-pricing-grid" style="grid-template-columns: repeat(2, 1fr);">
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">Shared Hosting</div>
        <div class="hu-pricing-desc">Perfect for personal websites</div>
        <div class="hu-pricing-price">
            <span class="hu-pricing-currency">$</span>
            <span class="hu-pricing-amount">4.99</span>
            <span class="hu-pricing-period">/mo</span>
        </div>
        <ul class="hu-pricing-features">
            <li class="hu-pricing-feature">
                <svg ...>...</svg> 10 GB SSD Storage
            </li>
            <li class="hu-pricing-feature">
                <svg ...>...</svg> 100 GB Bandwidth
            </li>
        </ul>
        <button class="hu-btn hu-btn-outline hu-btn-block">Get Started</button>
    </div>
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">VPS Hosting</div>
        <div class="hu-pricing-desc">For growing businesses</div>
        <div class="hu-pricing-price">
            <span class="hu-pricing-currency">$</span>
            <span class="hu-pricing-amount">19.99</span>
            <span class="hu-pricing-period">/mo</span>
        </div>
        <ul class="hu-pricing-features">
            <li class="hu-pricing-feature">
                <svg ...>...</svg> 50 GB NVMe Storage
            </li>
            <li class="hu-pricing-feature">
                <svg ...>...</svg> Unmetered Bandwidth
            </li>
        </ul>
        <button class="hu-btn hu-btn-primary hu-btn-block">Get Started</button>
    </div>
</div>

3-Column Pricing

Three-tier pricing layout with the middle plan marked as popular. The popular card uses .hu-popular for visual emphasis.

Starter / Professional / Enterprise

Starter

Ideal for beginners

$ 9 /mo

25 GB Storage
1 Website
Free SSL
Email Support

Feature Comparison

Pricing cards with detailed checkmark and cross feature lists. Use the .hu-disabled class on features that are not included in a plan.

Checkmark/Cross Feature Lists

Basic

For personal sites

$ 5 /mo

5 GB Storage
1 Website
Free SSL
Daily Backups
Priority Support
Dedicated IP

Plus

For growing sites

$ 15 /mo

50 GB Storage
5 Websites
Free SSL
Daily Backups
Priority Support
Dedicated IP

Business

For enterprises

$ 39 /mo

200 GB Storage
Unlimited Websites
Free SSL + Domain
Daily Backups
24/7 Support
Dedicated IP

HTML

<ul class="hu-pricing-features">
    <li class="hu-pricing-feature">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        Included Feature
    </li>
    <li class="hu-pricing-feature hu-disabled">
        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
        Not Included
    </li>
</ul>

Highlighted Card

A single card with the .hu-popular class, a different border color, and a badge overlay to draw attention.

Popular Plan with Badge

Best Value

Cloud VPS Pro

High-performance cloud infrastructure

$ 49 /mo

4 vCPU Cores
8 GB RAM
200 GB NVMe Storage
Unmetered Bandwidth
Full Root Access

HTML

<div class="hu-pricing-card hu-popular" style="border: 2px solid var(--hu-primary); position: relative;">
    <span class="hu-badge hu-badge-primary" style="position: absolute; top: -12px; right: 16px;">
        Best Value
    </span>
    <div class="hu-pricing-name">Cloud VPS Pro</div>
    <div class="hu-pricing-desc">High-performance cloud infrastructure</div>
    <div class="hu-pricing-price">
        <span class="hu-pricing-currency">$</span>
        <span class="hu-pricing-amount">49</span>
        <span class="hu-pricing-period">/mo</span>
    </div>
    <ul class="hu-pricing-features">
        <li class="hu-pricing-feature">
            <svg ...>...</svg> 4 vCPU Cores
        </li>
    </ul>
    <button class="hu-btn hu-btn-primary hu-btn-block">Deploy Now</button>
</div>

Pricing with Toggle

Monthly/Annual billing toggle. Click the toggle to switch between pricing states.

Monthly / Annual Toggle

Starter

$ 9 /mo

25 GB Storage
1 Website

Professional

$ 29 /mo

100 GB Storage
10 Websites

Enterprise

$ 79 /mo

500 GB Storage
Unlimited Websites

HTML + JS

<div class="hu-pricing-grid">
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">Starter</div>
        <div class="hu-pricing-price">
            <span class="hu-pricing-currency">$</span>
            <span class="hu-pricing-amount" id="price-starter">9</span>
            <span class="hu-pricing-period">/mo</span>
        </div>
    </div>
</div>

<script>
function showMonthly() {
    document.getElementById('price-starter').textContent = '9';
    document.getElementById('price-pro').textContent = '29';
    document.getElementById('price-enterprise').textContent = '79';
}
function showAnnual() {
    document.getElementById('price-starter').textContent = '7';
    document.getElementById('price-pro').textContent = '23';
    document.getElementById('price-enterprise').textContent = '63';
}
</script>

Real-World Examples

Real-world pricing patterns for subscription services, including shared hosting, VPS, and domain pricing.

Shared Hosting Plans

Basic

For personal websites

$ 2.99 /mo

10 GB SSD
1 Website
Free SSL
100 GB Bandwidth

Popular

Plus

For multiple websites

$ 5.99 /mo

50 GB SSD
Unlimited Websites
Free SSL + Domain
Unmetered Bandwidth
Daily Backups

Business

For online stores

$ 9.99 /mo

100 GB SSD
Unlimited Websites
Free SSL + Domain
Unmetered Bandwidth
Dedicated IP

HTML

<div class="hu-pricing-grid">
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">Basic</div>
        <div class="hu-pricing-desc">For personal websites</div>
        <div class="hu-pricing-price">
            <span class="hu-pricing-currency">$</span>
            <span class="hu-pricing-amount">2.99</span>
            <span class="hu-pricing-period">/mo</span>
        </div>
        <ul class="hu-pricing-features">
            <li class="hu-pricing-feature">
                <svg ...>...</svg> 10 GB SSD
            </li>
        </ul>
        <button class="hu-btn hu-btn-outline hu-btn-block">Select Plan</button>
    </div>
    <div class="hu-pricing-card hu-popular">
        <div class="hu-pricing-name">Plus</div>
        <!-- ... -->
    </div>
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">Business</div>
        <!-- ... -->
    </div>
</div>

VPS Hosting Plans

Standard

2 vCPU / 4 GB RAM

$ 19 /mo

80 GB NVMe
4 TB Bandwidth
Full Root Access
1 IP Address

Best Seller

Premium

4 vCPU / 8 GB RAM

$ 39 /mo

200 GB NVMe
8 TB Bandwidth
Full Root Access
2 IP Addresses
Automatic Backups

Ultra

8 vCPU / 16 GB RAM

$ 79 /mo

400 GB NVMe
12 TB Bandwidth
Full Root Access
4 IP Addresses
DDoS Protection

HTML

<div class="hu-pricing-grid">
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">Standard</div>
        <div class="hu-pricing-desc">2 vCPU / 4 GB RAM</div>
        <div class="hu-pricing-price">
            <span class="hu-pricing-currency">$</span>
            <span class="hu-pricing-amount">19</span>
            <span class="hu-pricing-period">/mo</span>
        </div>
        <ul class="hu-pricing-features">
            <li class="hu-pricing-feature">
                <svg ...>...</svg> 80 GB NVMe
            </li>
        </ul>
        <button class="hu-btn hu-btn-outline hu-btn-block">Deploy</button>
    </div>
    <div class="hu-pricing-card hu-popular">
        <span class="hu-badge hu-badge-primary">Best Seller</span>
        <div class="hu-pricing-name">Premium</div>
        <!-- ... -->
    </div>
    <div class="hu-pricing-card">
        <div class="hu-pricing-name">Ultra</div>
        <!-- ... -->
    </div>
</div>

Domain Pricing

.com

$ 9.99 /yr

Free WHOIS Privacy
DNS Management

.net

$ 11.99 /yr

Free WHOIS Privacy
DNS Management

.org

$ 12.99 /yr

Free WHOIS Privacy
DNS Management

HTML

<div class="hu-pricing-grid" style="grid-template-columns: repeat(3, 1fr);">
    <div class="hu-pricing-card" style="text-align: center;">
        <div style="font-size: 1.875rem; margin-bottom: 0.75rem;">.com</div>
        <div class="hu-pricing-price">
            <span class="hu-pricing-currency">$</span>
            <span class="hu-pricing-amount">9.99</span>
            <span class="hu-pricing-period">/yr</span>
        </div>
        <ul class="hu-pricing-features" style="margin-top: 1rem;">
            <li class="hu-pricing-feature">
                <svg ...>...</svg> Free WHOIS Privacy
            </li>
        </ul>
        <button class="hu-btn hu-btn-outline hu-btn-block">Register</button>
    </div>
    <div class="hu-pricing-card" style="text-align: center;">
        <div style="font-size: 1.875rem; margin-bottom: 0.75rem;">.net</div>
        <!-- ... -->
    </div>
    <div class="hu-pricing-card" style="text-align: center;">
        <div style="font-size: 1.875rem; margin-bottom: 0.75rem;">.org</div>
        <!-- ... -->
    </div>
</div>

API Reference

Complete list of CSS classes available for pricing tables.

Class	Description
`.hu-pricing-grid`	CSS Grid container for pricing cards. Defaults to 3 columns with responsive behavior.
`.hu-pricing-card`	Individual pricing card with padding, border, border-radius, and background.
`.hu-popular`	Modifier for highlighted/recommended pricing card with elevated border and shadow.
`.hu-pricing-name`	Plan name heading with bold font weight and larger font size.
`.hu-pricing-desc`	Plan description text with muted color.
`.hu-pricing-price`	Price container using inline-flex alignment for currency, amount, and period.
`.hu-pricing-currency`	Currency symbol (e.g., $) with aligned baseline positioning.
`.hu-pricing-amount`	Price amount with large bold font size.
`.hu-pricing-period`	Billing period label (e.g., /mo, /yr) with muted text color.
`.hu-pricing-features`	Unstyled list container for feature items with spacing.
`.hu-pricing-feature`	Individual feature item with flex layout, icon alignment, and padding.
`.hu-disabled`	Muted feature item for features not included in the plan, with reduced opacity.