Pricing
Added in 1.7.0
A row of plan cards with a price, a feature list and a button, where one card can be marked as featured.
Default markup
Put the plans in a .pricing container, one .pricing-card per plan. Each card holds a .pricing-title, a .pricing-price, a .pricing-features list and a .pricing-btn. On small screens the cards stack. From the md breakpoint up they sit in a row and share their borders, so the group reads as one table.
Add .featured to the main plan. The card gets a primary border and a shadow, and on wide screens it is a bit taller than its neighbors, so it stands out. On small screens it moves to the top of the stack. A .pricing-label with a badge sits on the top edge of the card.
Popular
Premium
$49
per user
per month
- Up to 10 users
- All components
- Figma UI kit
- Priority support
<div class="pricing">
<div class="pricing-card">
<h3 class="pricing-title">Free</h3>
<div class="pricing-price">
<span class="pricing-price-currency">$</span>0<div class="pricing-price-description">
<div>per user</div>
<div>per month</div>
</div>
</div>
<ul class="pricing-features my-4">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Up to 3 users
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Basic components
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Community support
</li>
</ul>
<div class="pricing-btn">
<a href="#" class="btn w-100">Get started</a>
</div>
</div>
<div class="pricing-card featured">
<div class="pricing-label">
<span class="badge bg-primary text-primary-fg">Popular</span>
</div>
<h3 class="pricing-title">Premium</h3>
<div class="pricing-price">
<span class="pricing-price-currency">$</span>49<div class="pricing-price-description">
<div>per user</div>
<div>per month</div>
</div>
</div>
<ul class="pricing-features my-4">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Up to 10 users
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>All components
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Figma UI kit
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Priority support
</li>
</ul>
<div class="pricing-btn">
<a href="#" class="btn btn-primary w-100">Get started</a>
</div>
</div>
<div class="pricing-card">
<h3 class="pricing-title">Enterprise</h3>
<div class="pricing-price">
<span class="pricing-price-currency">$</span>99<div class="pricing-price-description">
<div>per user</div>
<div>per month</div>
</div>
</div>
<ul class="pricing-features my-4">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Unlimited users
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>All components
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Dedicated support
</li>
</ul>
<div class="pricing-btn">
<a href="#" class="btn w-100">Contact us</a>
</div>
</div>
</div>Price
The .pricing-price row holds the amount. Put the currency sign in a .pricing-price-currency in front of it, and the billing period in a .pricing-price-description after it. The description is smaller and uses the secondary text color, so the amount stays the strongest part of the card.
$49
per user
per month
<div class="pricing-price">
<span class="pricing-price-currency">$</span>49<div class="pricing-price-description">
<div>per user</div>
<div>per month</div>
</div>
</div>Features
.pricing-features is a plain list with no bullets, aligned to the start of the card. Put an icon in front of each item to show what the plan includes. Use a margin utility such as .my-4 to space the list from the price and the button.
- Up to 10 users
- All components
- Dedicated support
<ul class="pricing-features">
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>Up to 10 users
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/check -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-green">
<path d="M5 12l5 5l10 -10" />
</svg>All components
</li>
<li>
<!-- Download SVG icon from http://tabler.io/icons/icon/x -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon icon-inline me-1 text-red">
<path d="M18 6l-12 12" />
<path d="M6 6l12 12" />
</svg>Dedicated support
</li>
</ul>Accessibility
- Use a heading for
.pricing-title, with the level that fits the page, so users of a screen reader can jump between plans. - Say in the button text or in an
aria-labelwhich plan the button belongs to when several buttons share the same text. - Do not rely on the border color alone to mark the featured plan. The
.pricing-labelbadge names it in text.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
pricing | component | Container that lays the cards out in a column, and in a row from the md breakpoint up |
pricing-card | part | One plan, with a border, a shadow and centered text |
pricing-title | part | Plan name, sized like an h2 |
pricing-label | part | Label centered on the top edge of the card, for a badge such as "Popular" |
pricing-price | part | Price row, large and bold |
pricing-price-currency | part | Currency sign in front of the amount, smaller than the amount |
pricing-price-description | part | Text next to the amount, such as the billing period |
pricing-features | part | Plain list of features, aligned to the start |
pricing-btn | part | Button wrapper, pushed to the bottom of the card |
featured | modifier | Raises the card, adds a primary border and puts it first on small screens; set on pricing-card |
