Source: dist/css/cardiosmart_boot.css, line 8071
5.1 Complete Nav
The Header Nav of CardioSmart. This is sample data and might not reflect the full design or content needed in production.
Example
Default styling
<div class="flex relative m-t_3 bg_shade-n2">
<nav class="bg_acc flex_auto flex_wrap font_0 font_1:xl lh_0 navbar navbar-dark p_0 navbar-expand-lg navbar-primary">
<button class="br_none br_0 font_accent: m-l_2 m-y_3 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon-toggle_bars-times fas a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white"> Menu</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex flex_column flex_row:lg w_100 font_accent: font_1 font_0:lg font_1:xl">
<li class="display_none:md nav-item o p-x_4 ">
<a class="nav-link" href="//www.acc.org/" title="Home of the American College of Cardiology"><i class="fas fa-home"></i><span class="display_none:lg"> Home</span></a>
</li>
<li class="nav-item dropdown flex_auto p-x_4 p-x_3:lg">
<a class="nav-link dropdown-toggle overflow-hidden nowrap" href="/clinical-topics" id="clinicalTopicsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i><span class="display-none inline:lg">Conditions & </span>Topics</a>
<div class="shadow_overlap-light dropdown-menu br_3 br_none:md m-x_0:lg m-x_n4 m-t_0 m-t_2:lg" aria-labelledby="clinicalTopicsDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md">
<ul class="ul_none m_0">
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/acute-coronary-syndromes">Acute Coronary Syndromes</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/anticoagulation-management" title="Anticoagulation Management">Anticoagulation Management</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/arrhythmias-and-clinical-ep">Arrhythmias and Clinical EP</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad">Atherosclerotic Disease (CAD/PAD)</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/cardiac-surgery">Cardiac Surgery</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/cardio-oncology">Cardio-Oncology</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/congenital-heart-disease-pediatric-cardiology">Congenital Heart Disease and Pediatric Cardiology</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/diabetes-and-cardiometabolic-disease">Diabetes and Cardiometabolic Disease</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/dyslipidemia" title="Dyslipidemia">Dyslipidemia</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/geriatric-cardiology">Geriatric Cardiology</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/heart-failure-and-cardiomyopathies" title="Heart Failure and Cardiomyopathies">Heart Failure and Cardiomyopathies</a>
</li>
</ul>
</div>
<div class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md">
<ul class="ul_none">
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/dyslipidemia/hypertriglyceridemia">Hypertriglyceridemia</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/invasive-cardiovascular-angiography-and-intervention" title="Invasive Cardiovascular Angiography and Intervention">Invasive Cardiovascular Angiography and Intervention</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/noninvasive-imaging" title="Noninvasive Imaging">Noninvasive Imaging</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/pericardial-disease" title="Pericardial Disease">Pericardial Disease</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/prevention" title="Prevention">Prevention</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/pulmonary-hypertension-and-venous-thromboembolism">Pulmonary Hypertension and Venous Thromboembolism</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/sports-and-exercise-cardiology">Sports and Exercise Cardiology</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/stable-ischemic-heart-disease" title="Stable Ischemic Heart Disease">Stable Ischemic Heart Disease</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/valvular-heart-disease">Valvular Heart Disease</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/clinical-topics/vascular-medicine">Vascular Medicine</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown flex_auto p-x_4 p-x_3:lg">
<a class="nav-link dropdown-toggle overflow-hidden nowrap" href="#" id="eduDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Decisions</a>
<div class="shadow_overlap-light dropdown-menu br_3 br_none:md m-x_0:lg m-x_n4 m-t_0 m-t_2:lg" aria-labelledby="eduDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md">
<ul class="ul_none">
<li class="">
<span class="toggler"></span>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/education-catalog">Online Learning Catalog</a>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/earncredit">Earn Credit</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/board-prep-offerings" title="Board Prep Offerings">Board Prep Offerings</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/education-catalog">View the Entire Catalog</a>
</li>
</ul>
</li>
<li class="">
<span class="toggler"></span>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/education-catalog">Products</a>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/accsap">ACCSAP</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/accel-audio">ACCEL</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/cardiosource-plus">CardioSource Plus for Institutions and Practices</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/cathsap">CathSAP</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/ecg-drill-and-practice" title="ECG Drill and Practice">ECG Drill and Practice</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/echosap">EchoSAP</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/epsap">EP SAP</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/heart-songs-5">Heart Songs</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/iscience">iScience</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod">Nuclear Cardiology and Cardiac CT Meeting on Demand</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure">RightSTEPS Optimizing Medical Therapy for Chronic Heart Failure</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md">
<ul class="ul_none m_0">
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources">Resources</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/products-and-resources/guideline-education">Guideline Education</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/maintenance-of-certification-information-hub">Understanding MOC</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/image-and-slide-gallery">Image and Slide Gallery</a>
</li>
<li class="">
<span class="toggler"></span>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/meetings">Meetings</a>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://accscientificsession.acc.org" target="_blank">Annual Scientific Session and Related Events</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.acc.org/education-and-meetings/meetings?w_nav=MN#type=Chapter Meetings">Chapter Meetings</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.acc.org/education-and-meetings/meetings?w_nav=MN#type=Live Meetings">Live Meetings</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/meetings#type=Webinars - Live">Webinars - Live</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/education-and-meetings/meetings?view=archive&#type=Webinars - OnDemand">Webinars - OnDemand</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown flex_auto p-x_4 p-x_3:lg">
<a class="nav-link dropdown-toggle overflow-hidden nowrap" href="#" id="livingHealthyDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Living Healthy</a>
<div class="shadow_overlap-light dropdown-menu br_3 br_none:md dropdown-menu-lg-left m-x_0:lg m-x_n4 m-t_0 m-t_2:lg " aria-labelledby="livingHealthyDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md order_2 order_1:md">
<ul class="ul_none">
<li class="relative m-x_2:md m-x_4">
<a href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133" target="_blank" class="expanded-click-area 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"></a>
</li>
<li class="relative m-x_2:md m-x_4">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="expanded-click-area 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"></a>
</li>
</ul>
</div>
<div class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md">
<ul class="ul_none">
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc">Advocacy at the ACC</a>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/advocacy-action">Advocacy Action</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/health-policy-issue-center/alternative-payment-model-framework">Alternative Payment Model Framework</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/acc-legislative-conference">Legislative Conference</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.acc.org/macra/index.html" target="_blank">MACRA/QPP Hub</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/acc-political-action-committee">ACC Political Action Committee</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.healthecareers.com/acc" target="_blank">Cardiology Careers</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/clinical-toolkits">Clinical Toolkits</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/expert-consensus-decision-pathways">Expert Consensus Decision Pathways</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/infographics">Infographics</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/mobile-resources">Mobile Apps</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/quality-programs">Quality Programs</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown flex_auto p-x_4 p-x_3:lg">
<a class="nav-link dropdown-toggle overflow-hidden nowrap" href="#" id="toolDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Manage Your Health</a>
<div class="shadow_overlap-light dropdown-menu br_3 br_none:md dropdown-menu-lg-right m-x_0:lg m-x_n4 m-t_0 m-t_2:lg " aria-labelledby="toolDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md order_2 order_1:md">
<ul class="ul_none">
<li class="relative m-x_2:md m-x_4">
<a href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133" target="_blank" class="expanded-click-area 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"></a>
</li>
<li class="relative m-x_2:md m-x_4">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="expanded-click-area 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"></a>
</li>
</ul>
</div>
<div class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md">
<ul class="ul_none">
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc">Advocacy at the ACC</a>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/advocacy-action">Advocacy Action</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/health-policy-issue-center/alternative-payment-model-framework">Alternative Payment Model Framework</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/acc-legislative-conference">Legislative Conference</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.acc.org/macra/index.html" target="_blank">MACRA/QPP Hub</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/acc-political-action-committee">ACC Political Action Committee</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.healthecareers.com/acc" target="_blank">Cardiology Careers</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/clinical-toolkits">Clinical Toolkits</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/expert-consensus-decision-pathways">Expert Consensus Decision Pathways</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/infographics">Infographics</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/mobile-resources">Mobile Apps</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/quality-programs">Quality Programs</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown flex_auto p-x_4 p-x_3:lg">
<a class="nav-link dropdown-toggle overflow-hidden nowrap" href="#" id="toolDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Caregivers</a>
<div class="shadow_overlap-light dropdown-menu dropdown-menu-lg-right m-x_0:lg m-x_n4 m-t_0 m-t_2:lg br_3 br_none:md" aria-labelledby="toolDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 p-y_3:md order_2 order_1:md">
<ul class="ul_none">
<li class="relative m-x_2:md m-x_4">
<a href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133" target="_blank" class="expanded-click-area 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"></a>
</li>
<li class="relative m-x_2:md m-x_4">
<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="expanded-click-area 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"></a>
</li>
</ul>
</div>
<div class="flex_auto p-x_2 p-y_0 p-y_3:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md">
<ul class="ul_none">
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc">Advocacy at the ACC</a>
<ul class="ul_none font_n1 lh_3">
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/advocacy-action">Advocacy Action</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/health-policy-issue-center/alternative-payment-model-framework">Alternative Payment Model Framework</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/acc-legislative-conference">Legislative Conference</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.acc.org/macra/index.html" target="_blank">MACRA/QPP Hub</a>
</li>
<li class="text-indent_1">
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/advocacy-at-the-acc/acc-political-action-committee">ACC Political Action Committee</a>
</li>
</ul>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="http://www.healthecareers.com/acc" target="_blank">Cardiology Careers</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/clinical-toolkits">Clinical Toolkits</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/expert-consensus-decision-pathways">Expert Consensus Decision Pathways</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/infographics">Infographics</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/mobile-resources">Mobile Apps</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 wrap nowrap:lg" href="/tools-and-practice-support/quality-programs">Quality Programs</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown flex_auto flex_none:md bg_highlight br_highlight p-x_4 flex_end:md">
<a class="nav-link c_black font_bold font_display nowrap overflow_clip" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Clinicians</a>
<div class="shadow_overlap-light dropdown-menu br_3 br_none:md dropdown-menu-right br_3 br_none:md m-x_0:lg m-x_n4 m-t_0 m-t_2:lg font_0" aria-labelledby="navbarDropdown">
<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
<div class="flex_auto p-x_2 p-y_0 ">
<ul class="ul_none m_0">
<li>
<a class="dropdown-item undecorated transition_4 nowrap" href="/search/q=" infographics"="">All Poster/Infographics</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 nowrap" href="/search/my-membership">All Checklists</a>
</li>
<li>
<a class="dropdown-item undecorated transition_4 nowrap" href="/search/my-library">Brochures</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="display_none:md bg_shade-3">
<form class="form-inline p-y_3 p-x_3 flex font_1 flex_wrap">
<input class="form-control flex_auto w_auto h_5lh br-tl_radius br-bl_radius" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary flex_none br-tl_square br-bl_square h_5lh" type="submit"><i class="fas fa-search"></i></button>
</form>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 8985
5.2 Side Bar
Description: Side navigation show up when you are with in a content area like topic.
Example
Default styling
<nav class="hidden-print m-r_0 m_3 nav-sub">
<ul class="bg_shade-5 flex flex_column font_0 font_bold font_ui nav">
<li class="nav-item active">
<a class="bg_shade-n2 c_white font_1 h:bg_white-4 h:c_black lh_1 nav-link p-l_3 p-y_2 p-y_3" href="/accreditation/heartcare-center-recognition-program" target="_self"><i class="fa fa-home p-r_3"></i>Atrial Fibrillation</a>
</li>
<li data-nav="parent" class="nav-item parent">
<ul data-nav="child" class="flex_column font_n1 nav text-indent_2 bg_shade-4">
<li class="nav-item">
<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/benefits-of-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Overview</a>
</li>
<li class="nav-item">
<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/steps-to-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Living With</a>
</li>
<li class="nav-item">
<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/testimonials-and-success-stories" target="_self"><i class="fa fa-holder toggle"></i>Risks
</a>
</li>
</ul>
</li>
<li data-nav="parent" class="display_none nav-item parent">
<a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/services" target="_self"><i class="fa fa-holder toggle"></i>Tools</a>
<ul data-nav="child" class="bg_shade-4 flex_column font_n1 nav text-indent_1">
<li class="nav-item parent">
<a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/CCL" target="_self"><i class="fa fa-holder toggle"></i>Cardiac Cath Lab Accreditation</a>
<ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/OnDemandCathLabwebianrs" target="_self">On-Demand Cath Lab
Webinars</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/CCLBenefits" target="_self">Cardiac Cath Lab Features
Benefits</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link c_shade-n4 p-y_2" href="/accreditation/services/CCL/cardiac-cath-lab-accreditation-training" target="_self">Cardiac Cath Lab
Accreditation Training</a>
</li>
</ul>
</li>
<li class="nav-item parent">
<a class="nav-link c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center Accreditation</a>
<ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/cpcwebinars" target="_self"><i class="fa fa-holder toggle"></i>On-Demand Chest Pain Center
Webinars</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCDesignations" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
Accreditation
Designations</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCBenefits" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
Accreditation Features
Benefits</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCsupplementalED" target="_self"><i class="fa fa-holder toggle"></i>Supplemental Education</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCGuidelines" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
Accreditation Guidelines</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCArticles" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
Accreditation Articles
Abstracts</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCPublications" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
Accreditation Pubs</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/CPCQuestions" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 nav-link p-y_2" href="/accreditation/services/chest-pain-center-accreditation/chest-pain-center-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Chest Pain Center
Accreditation Training</a>
</li>
</ul>
</li>
<li class="nav-item parent">
<a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/EP" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology Accreditation</a>
<ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/register-for-webinar" target="_self"><i class="fa fa-holder toggle"></i>On-Demand EP Webinars</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/EPBenefits" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology Features
Benefits</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/EP/electrophysiology-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Electrophysiology
Accreditation Training</a>
</li>
</ul>
</li>
<li class="nav-item parent">
<a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/HF" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation</a>
<ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/hfwebinars" target="_self"><i class="fa fa-holder toggle"></i>On-Demand Heart Failure
Webinars</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFBenefits" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
Features Benefits</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/supplementalED" target="_self"><i class="fa fa-holder toggle"></i>Supplemental Education</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFGuidelines" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
Guidelines</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFArticles" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
Articles and Abstracts</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFPublications" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
Publications</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/HFQuestions" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/HF/heart-failure-accreditation-training" target="_self"><i class="fa fa-holder toggle"></i>Heart Failure Accreditation
Training</a>
</li>
</ul>
</li>
<li class="nav-item parent">
<a class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2" href="/accreditation/services/TCV" target="_self"><i class="fa fa-holder toggle"></i>Transcatheter Valve
Certification</a>
<ul class="nav flex_column bg_black-2 font_n1 text-indent_3">
<li class="nav-item">
<a class="nav-link c_shade-n4 p-y_2" href="/accreditation/services/TCV/TCV-certification-training" target="_self"><i class="fa fa-holder toggle"></i>Transcatheter Valve
Certification Training</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="h:bg_black-1 c_shade-n3 nav-link p-y_2" href="/accreditation/services/C4Certification" target="_self"><i class="fa fa-holder toggle"></i>C4 Certification</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/heartcare-center-recognition-program" target="_self"><i class="fa fa-holder toggle"></i>Tools</a>
</li>
<li class="nav-item">
<a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/acc-quality-summit-2020" target="_self"><i class="fa fa-holder toggle"></i>Articles</a>
</li>
<li class="active current nav-item">
<a class="a:bg_accent a:c_white c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/brand" target="_self"><i class="fa fa-holder toggle"></i>News</a>
<ul data-nav="child" class="flex_column font_n1 nav text-indent_2 bg_shade-4">
<li class="nav-item">
<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/benefits-of-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Featured</a>
</li>
<li class="nav-item">
<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" href="/accreditation/about-accreditation/steps-to-accreditation" target="_self"><i class="fa fa-holder toggle"></i>Latest</a>
</li>
<li class="active nav-item">
<a class="a:bg_accent-n2 a:c_accent-5 h:bg_black-2 h:c_black lh_3 nav-link p-l_5 p-y_2 text-indent_0" href="/accreditation/about-accreditation/testimonials-and-success-stories" target="_self"><i class="fa fa-holder toggle"></i>Quality Comes First in Carbs vs.
Fats Debate</a>
</li>
</ul>
</li>
<li data-nav="parent" class="nav-item parent">
<a class="a:c_accent c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" href="/accreditation/advocacy" target="_self"><i class="fa fa-holder toggle"></i>Resources</a>
</li>
</ul>
</nav>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6851
5.3 Ordered Cards
Having cards order on page to help users find there way through steps can some times be very helpful.
Example
Default styling
First it is bad
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Then it is not right
This is a card.
It has an easy to override visual style, and is appropriately subdued.
At last it is good
This is a card.
It has an easy to override visual style, and is appropriately subdued.
<div class="flex texture_medium counter_reset p_5">
<div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
<div class="flex font_accent: font_3 br-t_square c_white font_3 texture_dust bg_alert">
<div class="flex_shrink p_3 bg_alert-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
<div class="flex_auto p_3">First it is bad</div>
</div>
<div class="card-section p-x_4 p-y_3">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
<div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
<div class="flex font_accent: font_3 br-t_square c_white font_3 texture_dust bg_warning">
<div class="flex_shrink p_3 bg_warning-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
<div class="flex_auto p_3">Then it is not right</div>
</div>
<div class="card-section p-x_4 p-y_3">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
<div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
<div class="flex font_accent: font_3 br-t_square c_white font_3 texture_dust bg_success">
<div class="flex_shrink p_3 bg_success-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
<div class="flex_auto p_3">At last it is good</div>
</div>
<div class="card-section p-x_4 p-y_3">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>