Source: dist/css/cardiosmart_boot.css, line 6957
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
<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 14657
5.3 Interactive Extras
Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.
Source: dist/css/cardiosmart_boot.css, line 10356
5.3.1 Expanded Click Area
allows for a relative container to be clickable by the link.
Example
This is a header
This is a card.
It has an easy to override visual style, and is appropriately subdued.
I am so clickable<div class="card shadow_2 cell small-6 large-4 max-w_40" data-style="" >
<div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
This is a header
</div>
<img src="https://picsum.photos/400/300">
<div class="card-section card-body">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
<a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10148
5.3.2 Link Decorator
Links with the .link will auto decorate with an icon of the corresponding file type
| File | Effect |
|---|---|
| Portable Document Format | |
| .doc | Word Document |
| .txt | Text Document |
| .ppt | Power Point |
| mailto: | |
| tel: | Telephone |
| fax: | Fax |
target=_blank |
External Link icons will appear after any link |
Example
<div class="p_4">
<a class="link" href="abc.pdf">A link that is a Pdf Document</a><br/>
<a class="link" href="abc.doc">A link that is a Word Document</a><br/>
<a class="link" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
<a class="link" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
<a class="link" href="mailto:test@abc.org">test@abc.org</a><br/>
<a class="link" href="xyz.zip">A link that is a Zip Document</a><br/></div>
<div class="bg_shade-n3 p_4">
<a class="link-light" href="abc.pdf">A link that is a Pdf Document</a><br/>
<a class="link-light" href="abc.doc">A link that is a Word Document</a><br/>
<a class="link-light" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
<a class="link-light" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
<a class="link-light" href="mailto:test@abc.org">test@abc.org</a><br/>
<a class="link-light" href="xyz.zip">A link that is a Zip Document</a><br/>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10093
5.3.3 Aspect Ratio
To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly.
Example s
Default styling
.aspect_8x10
lock image to a 8 to 10 ratio
.aspect_1x1
lock image to a 1 to 1 ratio
.aspect_2x1
lock image to a 2 to 1 ratio
.aspect_3x2
lock image to a 3 to 2 ratio
.aspect_4x3
lock image to a 4 to 3 ratio
.aspect_16x9
lock image to a 16 to 9 ratio
.aspect_21x9
lock image to a 21 to 9 ratio
.aspect_4x1
lock image to a 4 to 1 ratio
<div class="grid-w_2 max-w_20" data-style="[modifier class]" >
<div class="m-y_2 lorem-loader [modifier class] "> </div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10498
5.3.4 Scrollbar Mini
Give a mini scroll bar to a content area.
Example
This is a header
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!
<div class="card shadow_2 cell small-6 large-4 max-w_30" >
<div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
This is a header
</div>
<div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
<h4>This is a card.</h4>
<p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
<img src="https://picsum.photos/400/300">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
</div>
<div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10621
5.3.5 Stars
experimental
Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.
Experimental: This item is not finalized and might be subject to change
Example
<ul class="ul_none flex flex_inline star-rating">
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
<li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10073
5.3.6 Lorem Text Loader
deprecated
It is often we need to have space held for a return of details or text.
Deprecated: This set of components was never fully utilized and will be removed for sake of size. 06/01/21
Example
<div class="max-w_40">
<h1 class="lorem-loader font_3 m-y_3"> </h1>
<p class="m-y_2 font_0 lorem-loader"> </p>
<p class="m-y_2 font_0 lorem-loader"> </p>
<p class="m-y_2 font_0 lorem-loader"> </p>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10398
5.3.7 Is Active Toggle
Many momment there are needs for toggles of icon when the parent is in the state of active. Used in tree navs, dropdowns, and collapsing areas.
Example s
Default styling
- FA Solid [modifier class] active
- FA Regular [modifier class] active
- FA Light [modifier class] active
.icon-toggle_plus-minus
Toggle between plus and minus square
- FA Solid icon-toggle_plus-minus active
- FA Regular icon-toggle_plus-minus active
- FA Light icon-toggle_plus-minus active
.icon-toggle_chevron-up-down
Toggle a chevron pointing up and then down.
- FA Solid icon-toggle_chevron-up-down active
- FA Regular icon-toggle_chevron-up-down active
- FA Light icon-toggle_chevron-up-down active
.icon-toggle_chevron-double-up-down
Toggle the double chevron to point up when active
- FA Solid icon-toggle_chevron-double-up-down active
- FA Regular icon-toggle_chevron-double-up-down active
- FA Light icon-toggle_chevron-double-up-down active
.icon-toggle_chevron-double-left-right
Toggle chevron left and right
- FA Solid icon-toggle_chevron-double-left-right active
- FA Regular icon-toggle_chevron-double-left-right active
- FA Light icon-toggle_chevron-double-left-right active
.icon-toggle_arrow-circle
Toggle the arrow to have a circle when active.
- FA Solid icon-toggle_arrow-circle active
- FA Regular icon-toggle_arrow-circle active
- FA Light icon-toggle_arrow-circle active
.icon-toggle_bars-times
Toggle between bars and times
- FA Solid icon-toggle_bars-times active
- FA Regular icon-toggle_bars-times active
- FA Light icon-toggle_bars-times active
.icon-toggle_check-sqaure
Check Marks toggle on and off
- FA Solid icon-toggle_check-sqaure active
- FA Regular icon-toggle_check-sqaure active
- FA Light icon-toggle_check-sqaure active
.icon-toggle_check-circle
Check Marks toggle on and off
- FA Solid icon-toggle_check-circle active
- FA Regular icon-toggle_check-circle active
- FA Light icon-toggle_check-circle active
.icon-toggle_check
Check Marks toggle on and off
- FA Solid icon-toggle_check active
- FA Regular icon-toggle_check active
- FA Light icon-toggle_check active
<ul data-style="[modifier class]" class="ul_none m_0 p_0">
<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
<i class="flex_none m-r_5 font_3 fas fa-fw [modifier class]"></i>
<span class="flex_auto ">FA Solid [modifier class]</span>
<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
</li>
<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
<i class="flex_none m-r_5 font_3 far fa-fw [modifier class]"></i>
<span class="flex_auto ">FA Regular [modifier class]</span>
<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
</li>
<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
<i class="flex_none m-r_5 font_3 fal fa-fw [modifier class]"></i>
<span class="flex_auto">FA Light [modifier class]</span>
<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
</li>
</ul>Code Sample
Source: dist/css/cardiosmart_boot.css, line 7871
5.4 Side Bar
Description: Side navigation show up when you are with in a content area like topic.
Example
<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 10551
5.5 Social Links
The social links From the Footer.
Example
<section class="social p_4 m-y_2 bg_shade-n3 font_2">
<ul class="flex social-bar ul_none c_white h:c_white m_0">
<li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a></li>
<li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a></li>
</ul>
</section>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10575
5.5.1 Social Links Monochrome
The social links can be restyled to be smaller.
Example
<section class="social p_4 m-y_2 font_n1 bg_white">
<ul class="flex social-bar ul_none m_0">
<li class="flex_shrink m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-twitter-square"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a></li>
<li class="flex_shrink m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play"></i></a></li>
<li class="flex_shrink m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple"></i></a></li>
</ul>
</section>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10599
5.5.2 Social Links Smaller
The social links can be restyled to be smaller.
Example
<section class="social p_4 m-y_2 font_0 max-w_20 bg_white">
<ul class="flex social-bar ul_none c_white m_0">
<li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-linkedin"></i></a></li>
<li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-youtube"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-google-play"></i></a></li>
<li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-apple"></i></a></li>
</ul>
</section>