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

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>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="pricing-table pt-fd7675ef 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>
			</div>
		</div>
	</div>
</section>

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

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free