Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.3.2 Page Hub Group

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

NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. 
<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>
Copy Code