Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.5.2 Price Table Simple

A collection of price points at a glance.

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

      Example

      Default styling

      • default

        $860 /Annual Dues

        • 150Application Fee
        USD

      • secondary

        $860 /Annual Dues

        • 150 Application Fee
        USD

      • accent

        $860 /Annual Dues

        • 150 Application Fee
        USD
      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="bg_default-4 c_black br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
        <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">default</h2>
        <h3 data-element="table-price" class="font-size_up-2 lh_2">
        <span class="font_bold">$860</span>
        <span>/Annual Dues</span>
        </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span>Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_secondary-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">secondary</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li>    <li data-element="data-table" class="bg_accent-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
        <header class="font_display font_4">
            <h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">accent</h2>
            <h3 data-element="table-price" class="font-size_up-2 lh_2">
                <span class="font_bold c_white">$860</span>
                <span>/Annual Dues</span>
            </h3>
        </header>
        <main>
        </main>
        <hr class="br_dashed br_solid br_white-4 m-t_2">
        <ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
            <li class="text-indent_n1">
            <span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
            </li>
        </ul>
        <footer class="m-b_n3:md m-t_auto">
        <a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
        </footer>
        <abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
    </li></ul>
      Copy Code