---
title: Pricing Tables
layout: component.html
---
***
{{> examples_pricing_basic}}
***
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
{{> examples_pricing_basic_rendered}}
Rendered HTML
{{> examples_pricing_basic}}
***
## Customize with Sass
Pricing tables can be easily customized with the Sass variables provided in the `_settings.scss` file.
SCSS
{{> examples_pricing_variables}}
***
## 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
{{#markdown}}
```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;
}
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
```
{{/markdown}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/pricing-tables";
```