Pricing tables can be built by using the Ensemble grid coupled with individual pricing columns. Pricing columns are styled using the background-color- class, and the text-color- class, giving you the freedom to style your pricing columns as you require.
To add emphasis to a column, you can add the --recommended modifier to the the pricing-column class, this will make the recommended column slightly larger than the other pricing columns.
<div class="pricing-column border-color-12">
<div class="pricing-column__header">
<h3 class="no-margin">Standard</h3>
</div>
<div class="pricing-column__price background-color-11">
<span class="pricing-column__price-amount">£29.99</span>
<span class="pricing-column__price-interval">Per Month</span>
</div>
<div class="pricing-column__content margin-top-20">
<ul class="list">
<li class="list__item">23 Components</li>
<li class="list__item">6 Plugins</li>
<li class="list__item">Responsive</li>
<li class="list__item">Supported</li>
<li class="list__item">Elegant & Stylish</li>
</ul>
</div>
<div class="pricing-column__footer">
<button class="button background-color-3 text-color-10">Buy now</button>
</div>
</div>