Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

7.3.2.2.1 Price Table Card Dark

There is the preferred plan in the price table it is best to swap the colors and use the primary coloring.

Example

Default styling

  • $99/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)

    • Automated
    • Cross-platform
    • <li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_-n2">
    <header class="font_display font_4">
        <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 "></h2>
        <h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</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_white-9">
            <li><i class="fas fa-check-circle m-r_2 c_primary-5"></i></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:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
</li>
    Copy Code