Source: dist/css/acc_boot.css, line 17595
4.1.4.4 Nav Dropdown with Alternate Content in Links
It is easy to add images in replace of text links in the navs.
This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/
Source: dist/css/acc_boot.css, line 17595
It is easy to add images in replace of text links in the navs.
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md">
<ul class="ul_none lh_2">
<li class="relative m-x_2:md m-x_3">
<a
href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
target="_blank"
class="transition_1 h:opacity opacity_8"
><img
src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
alt="QII" class="w_100 max-w_20"
/></a>
</li>
<li class="relative m-x_2:md m-x_3">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
</li>
</ul> </div>
<div
class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md"
>
<ul class="ul_none lh_2"
id="SubLinkCollapseParent">
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/acute-coronary-syndromes"><span
class="text-indent_n1 inline-block m-l_4">Acute
Coronary Syndromes</span></span></a>
</li>
<li class="m-b_2">
<a class="dropdown-item link transition_4 wrap"
href="/clinical-topics/anticoagulation-management"
title="Anticoagulation Management"><span
class="text-indent_n1 inline-block m-l_4">Anticoagulation
Management</span></a>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="learningCollapse"
data-bs-target="#learningCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</button>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="#">Online Learning Catalog</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="learningCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/earncredit"><span
class="text-indent_n1 inline-block m-l_5">Earn
Credit</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/board-prep-offerings"
title="Board Prep Offerings"><span
class="text-indent_n1 inline-block m-l_5">Board
Prep Offerings</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/education-catalog"><span
class="text-indent_n1 inline-block m-l_5">View
the Entire Catalog</span></a>
</li>
</ul>
</li>
<li class="m-b_2">
<div
class="flex justify_start transition_4 dropdown-item link">
<a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
data-bs-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="productsCollapse"
data-bs-target="#productsCollapse"
onclick="event.stopPropagation()">
<i
class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
</a>
<a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
href="/education-and-meetings/education-catalog">Products</a>
</div>
<ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
id="productsCollapse">
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accsap"><span
class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/accel-audio"><span
class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
class="text-indent_n1 inline-block m-l_5">CardioSource
Plus for Institutions and
Practices</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/cathsap"><span
class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
title="ECG Drill and Practice"><span
class="text-indent_n1 inline-block m-l_5">ECG
Drill and Practice</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/echosap"><span
class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/epsap"><span
class="text-indent_n1 inline-block m-l_5">EP
SAP</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/heart-songs-5"><span
class="text-indent_n1 inline-block m-l_5">Heart
Songs</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/iscience"><span
class="text-indent_n1 inline-block m-l_5">iScience</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
class="text-indent_n1 inline-block m-l_5">Nuclear
Cardiology and Cardiac CT Meeting on
Demand</span></a>
</li>
<li class="">
<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
class="text-indent_n1 inline-block m-l_5">RightSTEPS
Optimizing Medical Therapy for
Chronic Heart
Failure</span></a>
</li>
</ul>
</li>
</ul> </div>
</div>