This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.1 Price Table

A collection of price points and the various features of each at a glance.

Recipes.PriceTable.default - default Recipes.PriceTable.preferred - preferred
Sub Components in Design:

    Example 

    <nav class="bg_black-1">
    <ul class="flex flex_row:lg flex_column gap_5 ul_none c_black-6 font_copy font_0">
        <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>        <li>
                <div data-element="data-table" class="br_round bg_primary-n2 p_5:md p_4 c_white-8">
                    <header class="font_display font_4">
                        <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Advanced</h2>
                        <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</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_white-9">
                            <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Phased</li>
                            <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Automated</li>
                            <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i> Cross-platform</li>
                        </ul>
                    </main>
                    <footer class="m-b_n3"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
                </div>
            </li>    </ul>
</nav>
    Copy Code