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.

<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>

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 $gainsboro;

// 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: $oil;
$price-title-padding: rem-calc(15 20);
$price-title-align: center;
$price-title-color: $smoke;
$price-title-weight: $font-weight-normal;
$price-title-size: rem-calc(16);
$price-title-font-family: $body-font-family;

// We use these to control the price styles
$price-money-bg: $vapor;
$price-money-padding: rem-calc(15 20);
$price-money-align: center;
$price-money-color: $oil;
$price-money-weight: $font-weight-normal;
$price-money-size: rem-calc(32);
$price-money-font-family: $body-font-family;


// We use these to control the description styles
$price-bg: $white;
$price-desc-color: $monsoon;
$price-desc-padding: rem-calc(15);
$price-desc-align: center;
$price-desc-font-size: rem-calc(12);
$price-desc-weight: $font-weight-normal;
$price-desc-line-height: 1.4;
$price-desc-bottom-border: dotted 1px $gainsboro;

// We use these to control the list item styles
$price-item-color: $oil;
$price-item-padding: rem-calc(15);
$price-item-align: center;
$price-item-font-size: rem-calc(14);
$price-item-weight: $font-weight-normal;
$price-item-bottom-border: dotted 1px $gainsboro;

// We use these to control the CTA area styles
$price-cta-bg: $white;
$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:

.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;
  }
}

<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";