Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.3 Page Hub

A collection of links that collapses the children of the nav item.

Example

Default styling

NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 
<nav class="flex flex_row:md flex_column gap-x_4 gap-y_4 gap_4">
    <div class="flex flex_column gap-y_4 flex_none:md w_50:md">
    <ul class="c_primary font_copy ul_none font_1">
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                  <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                    <div class="flex_none" >
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                    <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                        <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                            <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                    </div>
                                </div>
                            </li>                    </ul>
                    </nav>
                </div>
            </div>
        </li>
    </ul>    <ul class="c_primary font_copy ul_none font_1">
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                  <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                    <div class="flex_none" >
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                    <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                        <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                            <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                    </div>
                                </div>
                            </li>                    </ul>
                    </nav>
                </div>
            </div>
        </li>
    </ul>    <ul class="c_primary font_copy ul_none font_1">
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                  <div class="opacity_0 flex flex_column flex_none font-size_down p-y_2 justify_start" aria-expanded="false">
                    <div class="flex_none " >
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                </div>
            </div>
        </li>
    </ul>    <ul class="c_primary font_copy ul_none font_1">
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                  <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                    <div class="flex_none" >
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                    <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                        <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                            <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                    </div>
                                </div>
                            </li>                    </ul>
                    </nav>
                </div>
            </div>
        </li>
    </ul>    </div>
    <div class="flex flex_column gap-y_4 flex_none:md w_50:md">
    <ul class="c_primary font_copy ul_none font_1">
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                  <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                    <div class="flex_none" >
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                    <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                        <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                            <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                    </div>
                                </div>
                            </li>                    </ul>
                    </nav>
                </div>
            </div>
        </li>
    </ul>    <ul class="c_primary font_copy ul_none font_1">
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                  <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                    <div class="flex_none" >
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                    <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                        <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                            <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                    </div>
                                </div>
                            </li>                    </ul>
                    </nav>
                </div>
            </div>
        </li>
    </ul>    <ul class="c_primary font_copy ul_none font_1">
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                  <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                    <div class="flex_none" >
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                    <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                        <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                            <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                    </div>
                                </div>
                            </li>                        <li class="nav-item" data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex_auto self_center p-l_3">
                                        <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                    </div>
                                </div>
                            </li>                    </ul>
                    </nav>
                </div>
            </div>
        </li>
    </ul>    </div>
</nav>
Copy Code