Source: dist/css/acc_boot.css, line 8729
5.1.2 Price Table Default
A combination UI that shows the price point and value for a product with a nav button to start the purchase.
Example
Basic
$39/Month
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.
- Quality-focused
- Phased
- Automated
- Cross-platform
<li>
<div data-element="data-table" class="br_round bg_white p_5:md p_4">
<header class="font_display font_4">
<h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Basic</h2>
<h3 class="font-size_up-2 lh_2"><span class="font_bold c_black">$39</span><span>/Month</span></h3>
</header>
<main>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nostrum corporis laboriosam necessitatibus praesentium similique repellat cumque enim tempore maiores, animi minus ipsam? Id minima et odio nostrum expedita tempore.</p>
<ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9">
<li><i class="fas fa-check-circle m-r_2 c_primary"></i> Quality-focused</li>
<li><i class="fas fa-check-circle m-r_2 c_primary"></i> Phased</li>
<li><i class="fas fa-check-circle m-r_2 c_primary"></i> Automated</li>
<li><i class="fas fa-times-circle m-r_2 c_alert-n2"></i> Cross-platform</li>
</ul>
</main>
<footer class="m-b_n3"><a href="" class="btn btn-primary h:undecorated">Choose Plan</a></footer>
</div>
</li>