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 aul and apply the following classes to theli'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.

<ulclass="pricing-table"><liclass="title">Standard</li><liclass="price">$99.99</li><liclass="description">An awesome description</li><liclass="bullet-item">1 Database</li><liclass="bullet-item">5GB Storage</li><liclass="bullet-item">20 Users</li><liclass="cta-button"><aclass="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: solid1px $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(1520);$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(1520);$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: dotted1px $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: dotted1px $gainsboro;// We use these to control the CTA area styles$price-cta-bg: $white;$price-cta-align: center;$price-cta-padding: rem-calc(20200);

Semantic Markup with Sass Mixins

You can use thepricing-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;  }}

<ulclass="your-pricing-class"><liclass="your-title-class">Title</li><liclass="your-price-class">$$</li><liclass="your-desc-class">...</li><liclass="your-bullet-class">Bullet</li><liclass="your-cta-class"><aclass="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";