Pricing tables
Pricing tables are really easy to create in Ascension because they use a lot of basic components. This page describes the various types of pricing tables as well as how to work with ribbons.
The three types of pricing tables
There are 3 main types of pricing tables. Each one is made out of basic components and can be easily customized.
Type 1.
The first type uses columns that sit right next to one another and usually have a highlighted column.
<div class="wrapper section">
<div class="grid text-center sm-12 lg-4">
<div class="cell">
<div class="card square shadow compact">
<h5 class="accent">Plan 1 title</h5>
<h2>$1</h2>
<p><small><em>plan description</em></small></p>
<ul class="vertical-list">
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
</ul>
<a href="register.html" class="button ghost">Button Text</a>
</div> <!-- end .card -->
</div> <!-- end .cell -->
<div class="cell">
<div class="card square shadow strong highlight corner-ribbon" data-ribbon="Best Value">
<h5 class="accent">Plan 2 title</h5>
<h2>$2</h2>
<p><small><em>plan description</em></small></p>
<ul class="vertical-list">
<li class="accent"><strong>Everything in Plan 1, plus:</strong></li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
</ul>
<a href="register.html" class="button">Button Text</a>
</div> <!-- end .card -->
</div> <!-- end .cell -->
<div class="cell">
<div class="card square shadow compact">
<h5 class="accent">Plan 3 title</h5>
<h2>$3</h2>
<p><small><em>plan description</em></small></p>
<ul class="vertical-list">
<li class="accent"><strong>Everything in Plan 2, plus:</strong></li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
</ul>
<a href="register.html" class="button ghost">Button Text</a>
</div> <!-- end .card -->
</div> <!-- end .cell -->
</div> <!-- end .grid -->
</div> <!-- end .wrapper -->
Plan 2 title
$2
plan description
- Everything in Plan 1, plus:
- Plan feature
- Plan feature
- Plan feature
Plan 3 title
$3
plan description
- Everything in Plan 2, plus:
- Plan feature
- Plan feature
- Plan feature
Type 2.
The second type uses three distinct columns with gutters in between and simple borders applied to each table column.
<div class="wrapper section">
<div class="grid gutter text-center sm-12 lg-4">
<div class="cell">
<div class="card with-border compact">
<h5 class="accent">Plan 1 title</h5>
<h2>$1</h2>
<p><small><em>plan description</em></small></p>
<hr class="thick short">
<a href="register.html" class="button">Button Text</a>
<ul class="vertical-list with-border">
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
</ul>
</div> <!-- end .card -->
</div> <!-- end .cell -->
<div class="cell">
<div class="card with-border compact corner-ribbon top-right" data-ribbon="Popular">
<h5 class="accent">Plan 2 title</h5>
<h2>$2</h2>
<p><small><em>plan description</em></small></p>
<hr class="thick short">
<a href="register.html" class="button">Button Text</a>
<ul class="vertical-list with-border">
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
</ul>
</div> <!-- end .card -->
</div> <!-- end .cell -->
<div class="cell">
<div class="card with-border compact">
<h5 class="accent">Plan 3 title</h5>
<h2>$3</h2>
<p><small><em>plan description</em></small></p>
<hr class="thick short">
<a href="register.html" class="button">Button Text</a>
<ul class="vertical-list with-border">
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
<li>Plan feature</li>
</ul>
</div> <!-- end .card -->
</div> <!-- end .cell -->
</div> <!-- end .grid -->
</div> <!-- end .wrapper -->
Plan 2 title
$2
plan description
Button Text
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
Plan 3 title
$3
plan description
Button Text
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
- Plan feature
Type 3.
The third type is the simplest of them all and it's best used when the pricing plans are super simple.
<div class="wrapper section">
<div class="grid gutter text-center sm-12 lg-4 xlg-3 center">
<div class="cell">
<div class="card with-border compact">
<h5 class="mono">Plan 1 title</h5>
<hr class="thick short">
<h2 class="accent">$1</h2>
<p><small><em>plan description</em></small></p>
<div class="spacer x2"></div>
<p>This is a detailed plan description.</p>
</div> <!-- end .card -->
</div> <!-- end .cell -->
<div class="cell">
<div class="card with-border compact">
<h5 class="mono">Plan 2 title</h5>
<hr class="thick short">
<h2 class="accent">$2</h2>
<p><small><em>plan description</em></small></p>
<div class="spacer x2"></div>
<p>This is a detailed plan description.</p>
</div> <!-- end .card -->
</div> <!-- end .cell -->
<div class="cell">
<div class="card with-border compact">
<h5 class="mono">Plan 3 title</h5>
<hr class="thick short">
<h2 class="accent">$3</h2>
<p><small><em>plan description</em></small></p>
<div class="spacer x2"></div>
<p>This is a detailed plan description.</p>
</div> <!-- end .card -->
</div> <!-- end .cell -->
</div> <!-- end .grid -->
</div> <!-- end .wrapper -->
Plan 1 title
$1
plan description
This is a detailed plan description.
Plan 2 title
$2
plan description
This is a detailed plan description.
Plan 3 title
$3
plan description
This is a detailed plan description.
Using ribbons
You might have noticed the blue ribbons from pricing tables type 1 & 2. Those can be really easily added by using the class of .corner-ribbon and the additional data attribute of data-ribbon. The data attribute will contain the text of the ribbon.
By default, the ribbon is displayed in the top left corner of the element. If you wish to display it in the top right corner simply add the class of .top-right, like the example below.
| Code | Preview |
|---|---|
|
Please note that in order for the ribbon text to be displayed properly, the parent element must have the text alignment set to center.