Pricing Table Component Test

Testing all features of the PricingTable component: layouts, badges, tooltips, and responsive behavior.

Test dark mode: Open console and run window.toggleDarkMode()

Example 1: Two-Column Layout

Basic vs Pro comparison with highlighted column

Choose Your Plan

Simple, transparent pricing for businesses of all sizes

Basic

$ 29 /month

Up to 5 users
5GB
5GB storage
Email support
Advanced analytics
Custom domain
Priority support

Get Started

Pro

$ 99 /month

50GB
50GB storage
Email + chat support

Custom domain
Priority support

Start Free Trial

Example 2: Three-Column Layout

Starter, Professional, and Enterprise tiers with badges and tooltips

Scale As You Grow

Start small, upgrade anytime. No contracts, cancel anytime.

Starter

$ 19 /month

Single user
2GB
2GB storage
Email support
10 templates
Basic templates
Analytics dashboard
Custom branding
API access
Priority support

Try Free

Best Value

Professional

$ 79 /month

Up to 15 users
100GB
100GB storage

50+ templates
Premium templates

Custom branding
API access
Priority support

Start Trial

Full Power

Enterprise

$ 299 /month

Unlimited
Unlimited users
Unlimited
Unlimited storage

Unlimited
All templates
Advanced analytics
Custom branding

Custom integrations

Contact Sales

Example 3: Custom Pricing (Contact Us)

Standard package vs. custom enterprise solution

Flexible Pricing Options

We'll work with you to create a custom plan that fits your needs

Standard

$ 49 /month

Up to 10 users
25GB
25GB storage
Email support
Standard features

Get Started

Tailored for You

Custom

Custom
Custom user limit
Custom
Custom storage
Dedicated support
All features included
Custom SLA

Contact Sales

Testing Checklist

✓ Responsive: Resize browser to test mobile (320px), tablet (768px), desktop (1024px+)
✓ Dark Mode: Run window.toggleDarkMode() in console
✓ Tooltips: Hover over features with underlined text (desktop)
✓ Tooltips (Mobile): Click/tap features with tooltips (mobile)
✓ Highlighting: Notice scaled, bordered columns in examples
✓ Badges: "Most Popular", "Best Value" labels visible
✓ Feature Types: Checkmarks (✓), X marks (✗), custom values ("5GB")
✓ Keyboard Navigation: Tab through CTA buttons, press Enter
✓ Color Presets: Colors adapt to theme (test by changing preset)