This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/virtual_boot.css, line 9303

13.10 Pagination

Pagination is used to navigate through the results.

<nav aria-label="Pagination" class="flex flex_row p-b_5:lg p-b_4">
    <ul class="pagination flex flex_row ul_none justify_stretch relative lh_0 font_n1 font_medium m-x_auto shadow_bevel-light br_radius overflow_hidden">
        <li class="flex pagination-previous ">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br-tl_radius br-bl_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">
                        <div class="flex flex_row nowrap"><i class="fas fa-arrow-left p-r_3 self_center"></i> <span class="show-for-sr display_none inline:md self_center">Prev</span></div>
                    </div>
                </div>
            </a>
        </li>
        <!---->
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex"><i class="fas  fa-ellipsis-h left"></i></div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">50 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="active ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">51 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">52 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">53 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">54 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex"><i class="fas  fa-ellipsis-h right"></i></div>
                </div>
            </a>
        </li>
        <!---->
        <li class="flex pagination-next">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br-tr_radius br-br_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" aria-label="Next Page" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">
                        <div class="flex flex_row nowrap"><span class="show-for-sr display_none inline:md self_center">Next</span> <i class="fas fa-arrow-right p-l_3 self_center"></i></div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</nav>
Copy Code