<%= @page_title %>

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

---

Build With Predefined HTML Classes

There are two ways to build pricing tables in Abstractio 4: with our predefined HTML or with our mixins. Building pricing tables with our predefined classes is quite easy. You'll start with an <ul> and add a class of .pricing-table to it. From there, you just need to add list items inside that represent each piece of the table.

Available HTML class options for the list items:

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

<%= code_example '

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

', :html %>

For these styles to come across, make sure you have the default Abstractio CSS package or that you've selected pricing-tables from a custom package. These should be linked up following our default HTML page structure.

---

Build with a Mixin

We've included SCSS mixins used to style pricing tables so that you can code how you want to. To use the mixin, you'll need to have the extension installed or grab _abstractio-global.scss, _global.scss and _pricing-tables.scss from Github and throw them into a Abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

<%= code_example ' @import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/pricing-tables"; ', :css %>

If you are using the mixins, you may include the styles on whatever class or ID you'd like with the <ul> and the list items inside it.

<%= code_example '

• Title
• $$$
• ...
• Bullet
• Button

', :html %>

The Container Mixin

Pricing tables are built up from an unordered list. We give this container some necessary styles by using our container mixin. There are no customizable options within the mixin, but everything can be changed using the SCSS variables below.

<%= code_example ' .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; } }', :css %>

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

Default SCSS Variables

<%= code_example ' /* 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: emCalc(20px); /* We use these to control the title styles */ $price-title-bg: #ddd; $price-title-padding: emCalc(15px) emCalc(20px); $price-title-align: center; $price-title-color: #333; $price-title-weight: bold; $price-title-size: emCalc(16px); /* We use these to control the price styles */ $price-money-bg: #eee; $price-money-padding: emCalc(15px) emCalc(20px); $price-money-align: center; $price-money-color: #333; $price-money-weight: normal; $price-money-size: emCalc(20px); /* We use these to control the description styles */ $price-bg: #fff; $price-desc-color: #777; $price-desc-padding: emCalc(15px); $price-desc-align: center; $price-desc-font-size: emCalc(12px); $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: emCalc(15px); $price-item-align: center; $price-item-font-size: emCalc(14px); $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: emCalc(20px) emCalc(20px) 0;', :css %>

Note: emCalc(); is a function we wrote to convert px to em. It is included in _abstractio-global.scss.