Source: dist/css/acc_boot.css, line 8719

6.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

Default styling

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 data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light ">
        <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:md m-t_auto"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
</li>

<li data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light ">
        <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:md m-t_auto"><a href="" class="btn btn-primary  h:undecorated">Choose Plan</a></footer>
</li>

Code Sample

Copy Code