Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Example

Default styling

  • 30 Application Fee

  • Member Price

    Exam Registration

    299 / Total

  • Non-Member Price

    Exam Registration

    399 / Total

<div>
    <ul class="columns_1 font_0 font_copy gap_3 gap_4:md gap_5:lg grid ul_none">
        <li data-element="data-table" class="bg_primary-n2 br_round relative flex flex_column c_white c_white-8 color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light font-size_up"
            style="--custom-font-size-up: 1;">
            <header class="font_display font_4 lh_0 m-t_n3">
                <span data-element="table-title" class="font-size_down-2 font_medium m-b_0 c_inherit">
                </span>
                <h3 class="font-size_up-2 lh_2 m_0 c_inherit">
                    <span class="font_bold"><em class="fas fa-usd" aria-hidden="true"></em>30</span>
                    <span>Application Fee</span>
                </h3>
            </header>
        </li>
    </ul>
    <ul class="columns_1 columns_2:md font_0 font_copy gap_3 gap_4:md gap_5:lg grid ul_none">
        <li data-element="data-table" class="bg_primary-n2 br_round c_white c_white-8 color_inherit flex flex_column font-size_down-1 font-size_up inherit_all p_4 p_5:md reading-typography relative shadow_bevel-light"
            style="--custom-font-size-up: 1;">
            <header class="font_display font_4 lh_0 m-t_n3">
                <span data-element="table-title" class="font-size_down-2 font_medium m-b_0 c_inherit">
                    Member Price
                </span>
                <h3 class="c_inherit font-size_up-2 m_0">Exam Registration</h3>
                <h4 class="c_inherit font-size_up-1 lh_2 m_0">
                    <span class="font_bold"><em class="fas fa-usd" aria-hidden="true"></em>299</span>
                    <span>/ Total</span>
                </h4>
            </header>
            <footer class="m-t_4 m-t_auto:md">
            </footer>
        </li>
        <li data-element="data-table"
            class="br_round relative flex flex_column bg_white p_5:md  p_4 shadow_bevel-light bg_white reading-typography font-size_up c_primary-n2"
            style="--custom-font-size-up: 1;">
            <header class="font_4 font_display lh_0 m-t_n3">
                <span data-element="table-title" class="font-size_down-2 font_medium m-b_0 c_inherit">
                    Non-Member Price
                </span>
                <h3 class="c_inherit font-size_up-2 m_0">Exam Registration</h3>
                <h4 class="font-size_up-2 lh_2 m_0 c_inherit">
                    <span class="font_bold"><em class="fas fa-usd" aria-hidden="true"></em>399</span>
                    <span>/ Total</span>
                </h4>
            </header>
            <footer class="m-t_4 m-t_auto:lg">
            </footer>
        </li>
    </ul>
</div>
Copy Code