Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

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

    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

    • primary

      $99/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.

      • primary
      • Automated
      • Cross-platform

    • secondary

      $99/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.

      • 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="gap_5 ul_none grid column_1 columns_2:md columns_3:lg">
    <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 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 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>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 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>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