Pricing Tables

Got plans to display pricing in email?

Although we call them Pricing Tables, you can use this component for lots of things: subscriptions, plans, levels, and so on. Pine comes with two and three-column pricing tables, each with a boxed and full-width version.

2 Columns - Boxed #

When we say 'boxed pricing table', we mean it has 30px apparent padding on each side. It comes with call-to-action buttons that are placed outside the pricing tables themselves. On mobile, the columns will stack.

3 Columns - Boxed #

This Pricing Table has column gutters removed, so that the column in the center takes up more space. Of course, you can choose to keep its background colour highlight, or highlight one of the other columns.

Full Width Variations #

In case you need more space for content, you can opt for the Full Width variations. These are the same layouts, only that container padding and column gutters are removed, to allow for wider columns.

2 Columns - Full Width #

3 Columns - Full Width #

Next Up: Spacer →

Current Version