Components

Pricing Table

A pricing plan card with features and a button.

Live demo

See it in action

Starter

For individuals
$0
  • 1 project
  • 1 GB storage
  • Community support
  • Analytics
  • Priority support
Get started
Most Popular

Pro

For small teams
$29/mo
  • Unlimited projects
  • 50 GB storage
  • Email support
  • Analytics
  • Priority support
Start free trial

Business

For companies
$79/mo
  • Unlimited projects
  • 500 GB storage
  • Priority support
  • Advanced analytics
  • SSO & audit logs
Contact sales

Precision Cut

Consultation, tailored cut, wash and styling.
$45
Choose Plan

Skin Fade

Zero fade with foil shaver, wash and styling.
$50
Choose Plan

Hot Towel Shave

Traditional straight razor shave, essential oils.
$40
Choose Plan

Beard Sculpt

Trimming, shaping, line-up and conditioning.
$30
Choose Plan

Standard

Everything one site needs to launch.
  • 3 projects
  • 10 GB storage
  • Email support
$19/mo
Choose Standard

Plus

Best value
For teams shipping more than one site.
  • Unlimited projects
  • 200 GB storage
  • Priority support
$49/mo
Choose Plus

Scale

Volume pricing with a named contact.
  • Unlimited everything
  • SSO & audit logs
  • Dedicated manager
$99/mo
Talk to sales

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="pricing-table fw-pt fw-pt--design-modern design-modern fw-pt--cols-3 fw-pt--feat-raise fw-pt--feat-highlight fw-pt--feat-glow fw-pt--feat-badge fw-pt--feat-accent_button fw-pt--btn-solid fw-pt--text-center" style="--pt-cols:3;--pt-gap:var(--gap-4, 1.5rem);">
		<div class="fw-pt__grid">
			<div class="fw-pt__plan">
				<div class="fw-pt__head">
					<h4 class="fw-pt__name">Pro</h4>
					<div class="fw-pt__subtitle">
						For small teams
					</div>
				</div>
				<div class="fw-pt__price">
					<span class="fw-pt__currency">$</span>
					<span class="fw-pt__amount">29</span>
					<span class="fw-pt__period">/mo</span>
				</div>
				<ul class="fw-pt__features">
					<li class="fw-pt__feature"><span class="fw-pt__tick" aria-hidden="true">&#10003;</span><span>Unlimited projects</span></li>
					<li class="fw-pt__feature"><span class="fw-pt__tick" aria-hidden="true">&#10003;</span><span>50 GB storage</span></li>
					<li class="fw-pt__feature"><span class="fw-pt__tick" aria-hidden="true">&#10003;</span><span>Email support</span></li>
					<li class="fw-pt__feature is-off"><span class="fw-pt__tick" aria-hidden="true">&#10005;</span><span>Priority support</span></li>
				</ul>
				<div class="fw-pt__cta">
					<a class="fw-pt__btn" href="#">Choose Plan</a>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Pricing Table shortcode, please check out the online manual here.