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

7.3.2.2.2 Price Table Card Light

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

Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)

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>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</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>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)</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