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 7696

7.2.6 Mobile Hidden Header Nav Disabled

Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.

<!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
    <a class="a:bg_accent [ bg_secondary-2 c_secondary-3 disabled  ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
        <span class="block lh_0 p-y_0 p-y_2:md text_center">
            <!-- If Button Disabled Add This Icon -->
            <i class="fas fa-lock p-r_3"></i>
            Secondary: Disabled
        </span>
    </a>
</li>
Copy Code