Pricing Tables

If you're making a rockin' marketing site for a subscription-based product, you're likely in need of a pricing table. These tables fill 100% of their container and are made from a simple unordered list.


  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now

Basic

Code up a ul and apply the following classes to the li's.

  • li.title: Creates the styles for a title.
  • li.price: Add a price that stands out.
  • li.description: If you need to describe the plan, add this.
  • li.bullet-item: To call out features, use this list item.
  • li.cta-button: To add a button inside a list item, use this.

HTML

<ul class="pricing-table"> <li class="title">Standard</li> <li class="price">$99.99</li> <li class="description">An awesome description</li> <li class="bullet-item">1 Database</li> <li class="bullet-item">5GB Storage</li> <li class="bullet-item">20 Users</li> <li class="cta-button"><a class="button" href="#">Buy Now</a></li> </ul>

Rendered HTML

  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now

Customize with Sass

Pricing tables can be easily customized with the Sass variables provided in the _settings.scss file.

SCSS

$include-html-pricing-classes: $include-html-classes; // We use this to control the border color $price-table-border: solid 1px #ddd; // We use this to control the bottom margin of the pricing table $price-table-margin-bottom: rem-calc(20); // We use these to control the title styles $price-title-bg: #ddd; $price-title-padding: rem-calc(15 20); $price-title-align: center; $price-title-color: #333; $price-title-weight: bold; $price-title-size: rem-calc(16); // We use these to control the price styles $price-money-bg: #eee; $price-money-padding: rem-calc(15 20); $price-money-align: center; $price-money-color: #333; $price-money-weight: normal; $price-money-size: rem-calc(20); // We use these to control the description styles $price-bg: #fff; $price-desc-color: #777; $price-desc-padding: rem-calc(15); $price-desc-align: center; $price-desc-font-size: rem-calc(12); $price-desc-weight: normal; $price-desc-line-height: 1.4; $price-desc-bottom-border: dotted 1px #ddd; // We use these to control the list item styles $price-item-color: #333; $price-item-padding: rem-calc(15); $price-item-align: center; $price-item-font-size: rem-calc(14); $price-item-weight: normal; $price-item-bottom-border: dotted 1px #ddd; // We use these to control the CTA area styles $price-cta-bg: #f5f5f5; $price-cta-align: center; $price-cta-padding: rem-calc(20 20 0);

Semantic Markup with Sass Mixins

You can use the pricing-table-container() mixin, with mixins for each list item type to create your own pricing table with semantic markup, like so:

SCSS

.your-pricing-class { @include pricing-table-container; .your-title-class { @include pricing-table-title; } .your-price-class { @include pricing-table-price; } .your-desc-class { @include pricing-table-description; } .your-bullet-class { @include pricing-table-bullet; } .your-cta-class { @include pricing-table-cta; } }

HTML

<ul class="your-pricing-class"> <li class="your-title-class">Title</li> <li class="your-price-class">$$</li> <li class="your-desc-class">...</li> <li class="your-bullet-class">Bullet</li> <li class="your-cta-class"><a class="your-button-class" href="#">Button</a></li> </ul>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/pricing-tables";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »