Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.5.1 Price Table

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

Sub.Recipe.PriceTable.Card.Light - Light Background Card Sub.Recipe.PriceTable.Card.Dark - Dark Background Card
Sub Components in Design:
    Sub.ClassList.Grid.TripleLG - Grid Classes Triple @ LG
    Data Elements:

      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

      • primary

        $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)

        • primary
        • Automated
        • Cross-platform

      • secondary

        $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)

        • secondary
        • Automated
        • Cross-platform
      NOTE:
      Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints. 
      <ul class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
    <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 default">
        <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 br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_primary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">primary</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>primary</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>    <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_secondary-n2">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">secondary</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>secondary</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></ul>
      Copy Code