Arches: CardioSmart

Arches:CardioSmart

Multi Product Brand Style System by the American College of Cardiology

Recipes

Source: dist/css/cardiosmart_boot.css, line 6790

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">&nbsp;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">&nbsp;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 &amp; </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&amp;#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>
Copy Code

Example

Default styling

<div class="m_auto max-w_95">
    <div id="footer-wrap" class="">
        <!-- ********************************** breadcrumbs ********************************** -->
        <div id="breadcrumbs" class="bg_secondary breadcrumbs-container c_white font_0 font_ui p-x_4 p_3"><b
                class="breadcrumbs-title">YOU ARE HERE: </b>Home</div>
        <!-- This is the inner footer that we cache -->
        <div id="footer" role="contentinfo"
            class="flex bg_shade-n3 flex_column flex_inline flex_wrap flex_row:md p-x_3 p-y_4 p-y_0:lg w_100">
            <div class="flex_auto p-x_3 p-y_4:lg w-grid_4:lg w-grid_6:md font_ui">
                <h2 class="font_2 font_3:lg font_display p-t_2 m-b_0:md m-b_2 br_none:md br_none:lg br_dotted br_white-5 br-t_1">
                    <span class="toggle display_none:md ">
                        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
                    <a class="c_highlight h:c_secondary-3" href="#">Conditions &amp; Topics</a>
                </h2>
                <ul class="block:md font_0:lg font_n1 m-b_4 ul_none">
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Angina</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Aortic Aneurysm</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Atrial
                            Fibrillation</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Bradycardia</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Cancer Treatment and
                            Your Heart</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Congenital Heart
                            Disease</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Coronary Artery
                            Disease</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Diabetes and Your
                            Heart</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Endocarditis</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Heart Attack</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Heart Failure</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Heart Valve
                            Disease</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">High Blood
                            Pressure</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">High Cholesterol</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Metabolic
                            Syndrome</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Older Adults and
                            Heart Disease</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Peripheral Artery
                            Disease</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Renal Artery
                            Disease</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Stroke</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Subclavian Artery
                            Disease</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Sudden Cardiac
                            Arrest</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Supraventricular
                            Tachycardia</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Varicose Veins</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Women and Heart
                            Disease</a></li>
                </ul>
            </div>
            <!-- column 4 -->
            <div class="flex_auto p-x_3 p-y_4:lg w-grid_2:lg w-grid_6:md font_ui">
                <h2 class="font_2 font_3:lg font_display p-t_2 m-b_0:md m-b_2 br_none:md br_none:lg br_dotted br_white-5 br-t_1">
                    <span class="toggle display_none:md ">
                        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
                    <a class="c_highlight h:c_secondary-3" href="#">Decisions</a>
                </h2>
                <ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Shared
                            Decision-Making</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">What Are Decision
                            Aids?</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Benefits of Decision
                            Aids</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">When to Use Decision
                            Aids</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">What to Expect</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Questions to Ask</a>
                    </li>
                </ul>
                 <h2 class="font_2 font_3:lg font_display p-t_2 m-b_0:md m-b_2 br_none:md br_none:lg br_dotted br_white-5 br-t_1">
                    <span class="toggle display_none:md ">
                        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
                    <a class="c_highlight h:c_secondary-3" href="#">Health Basics</a>
                </h2>
                <ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Preparing for Your
                            Appointment</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Your
                            Responsibilities</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Your Care Team</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">What is a
                            Cardiologist?</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Getting Support</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Understanding
                            Medication Adherence</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">The Research</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Understanding
                            Clinical Trials</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Cardiac Rehab</a>
                    </li>
                </ul>
            </div>
            <div class="flex_auto p-x_3 p-y_4:lg w-grid_2:lg w-grid_6:md font_ui">
                <h2 class="font_2 font_3:lg font_display p-t_2 m-b_0:md m-b_2 br_none:md br_none:lg br_dotted br_white-5 br-t_1">
                    <span class="toggle display_none:md ">
                        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
                    <a class="c_highlight h:c_secondary-3" href="#">Healthy Living</a>
                </h2>
                <ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">My Plan for Heart
                            Healthier Living</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Healthy Habits
                            Protect Your Heart</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Know Your
                            Numbers</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Eat Better</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Lose Weight</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Move More</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Relax</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Stop Smoking</a>
                    </li>
                </ul>
            </div>
            <div class="flex_auto p-x_3 p-y_4:lg w-grid_2:lg w-grid_6:md font_ui">
                <h2 class="font_2 font_3:lg font_display p-t_2 m-b_0:md m-b_2 br_none:md br_none:lg br_dotted br_white-5 br-t_1">
                    <span class="toggle display_none:md ">
                        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
                    <a class="c_highlight h:c_secondary-3" href="#">Care Givers</a>
                </h2>
                <ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Care for
                            Yourself</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Managing the
                            Details</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Planning for the
                            Future</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Resources for
                            Caregivers</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Palliative Care</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Hospice Care</a>
                    </li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Planning Your
                            Care</a></li>
                </ul>
                <h2 class="font_2 font_3:lg font_display p-t_2 m-b_0:md m-b_2 br_none:md br_none:lg br_dotted br_white-5 br-t_1">
                    <span class="toggle display_none:md ">
                        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
                    <a class="c_highlight h:c_secondary-3" href="#">Other ACC Offerings</a>
                </h2>
                <ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none">
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Care for
                            Yourself</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Early Heart Attack
                            Care (EHAC)</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Find Your Heart a
                            Home</a></li>
                    <li class="text-indent_n1 p-l_4"><a class="c_white h:c_secondary-3 h:underline">Cardiology
                            Directory</a></li>
                </ul>
            </div>
        </div>
        <div class="p-x_3 p-y_4:lg relative flex flex_column flex_row:md bg_shade-n4 shadow_n1">
            <section class="address c_white flex_auto m-r_5:md p-x_4 p-y_4">
                <div class="bg_left logo_primary-alt max-w_25"><span class="alt">logo_primary-alt max-w_25</span></div>
                <div class="address c_white">
            <h3 class=font_accent font_1 m-b_0 font_normal font_regular">American College of Cardiology</h3>
            <address>
                <!-- http://microformats.org/wiki/hcard -->
                <h4 class="m-b_0 font_bold font_copy font_normal font_1 m-t_4">Heart House</h4>
                <div class="flex font_copy font_0">
                <div class="flex_shrink p-r_5 m-r_5">
                    <ul class="ul_none  lh_2">
                        <li class="m-b_1 m-b_3:md font_normal">
                            <span class="street-address">2400 N. St. NW</span>
                        </li>
                        <li class="m-b_1 m-b_3:md font_normal">
                            <span class="locality ">Washington</span>,
                            <span class="city-name ">
                        <abbr title="District of Colombia">DC</abbr>
                        </span>
                            <span class="postal-code">20037</span>
                        </li>
                        <li class="m-b_1 m-b_3:md font_normal">
                            <a href="mailto:MemberCare@acc.org" class="email c_white text_underline  h:c_white ">
                                <strong class="p-r_2 inline block:md inline:lg">Email:</strong>
                                <span class="inline block:md inline:lg">MemberCare@acc.org</span></a>
                        </li>
                    </ul>
                </div>
                <div class="flex_auto grid-w_6">
                <ul class="ul_none lh_2">
                    <li class="m-b_1 m-b_3:md font_normal">
                        <a tel="+12023756000" href="tel:+12023756000" class="tel c_white h:c_white h:underline">
                        <strong class="p-r_2 block:md inline:lg">Phone:</strong><span class=" block:md inline:lg">(202) 375-6000, ext. 5603</span></a>
                    </li>
                    <li class="m-b_1 m-b_3:md font_normal">
                        <a tel="+18002574737" href="tel:+18002534636.5603" class="tel c_white h:c_white h:underline">
                        <strong class="p-r_2 block:md inline:lg">Toll Free:</strong><span class=" block:md inline:lg">(800) 253-4636, ext. 5603</span></a>
                    </li>
                    <li class="m-b_1 m-b_3:md font_normal">
                        <a fax="+12023757000" href="fax:+12023757000" class="fax c_white h:c_white h:underline">
                        <strong class="p-r_2 block:md inline:lg">Fax:</strong>
                        <span class="block:md inline:lg">(202) 375-7000</span>
                        </a>
                    </li>
                </ul>
                </div>
                </div>
            </address>
        </div>
                <div class="b_4 l_0 m-t_5 max-w_35 p-t_0:md p-t_5 r_0 relative social">
                    <!-- Social -->
                    <h4 class="c_white font_regular font_accent: m-b_3 m-b_4:lg text_center text_left:lg">Stay Connected
                    </h4>
                    <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-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-square-x-twitter"></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-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-facebook-square"></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-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-youtube"></i></a></li>
                        <li class="flex_auto m-r_2"><a href="https://www.instagram.com/" target="_blank" class="instagram social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-instagram"></i></a></li>
                        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><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-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-apple"></i></a></li>
                    </ul>
                    <!-- Social -->
                </div>
            </section>
           <!-- ACC Product Links -->
            <section class="acc-websites flex_auto m-l_5:md m-r_5:md m-y_5 max-w_30 w-grid_12 w-grid_6:md">
                <h4 class="c_white font_regular font_accent: m-b_3 m-b_4:lg text_center text_left:lg">
                    Transforming Education to Knowledge</h4>
                <ul class="ul_none lh_2 font_0">
                    <li class="c_white">
                        <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://www.acc.org">
                            <span class="flex_auto inline-block p-l_3">ACC</span>
                            <i class="c_white fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                        </a>
                    </li>
                    <li class="c_white br_solid br_0 br-t_1  br_white-5">
                        <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3  justify_between flex flex_row " href="https://cvquality.acc.org/Accreditation?">
                            <span class="inline-block flex_auto p-l_3">Accreditation Services</span>
                            <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                        </a>
                    </li>
                    <li class="c_white br_solid br_0 br-t_1  br_white-5">
                        <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="http://www.cardiosmart.org">
                            <span class="inline-block flex_auto p-l_3">CardioSmart</span>
                            <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                        </a>
                    </li>
                    <li class="c_white br_solid br_0 br-t_1  br_white-5">
                        <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="https://cvquality.acc.org/">
                            <span class="inline-block flex_auto p-l_3">CV Quality</span>
                            <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                        </a>
                    </li>
                    <li class="c_white br_solid br_0 br-t_1  br_white-5">
                        <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="http://www.onlinejacc.org/">
                            <span class="inline-block flex_auto p-l_3">JACC Journal</span>
                            <i class="float_right flex_shrink fas p-r_3 c_white fa-external-link-square "></i>
                        </a>
                    </li>
                    <li class="c_white br_solid br_0 br-t_1  br_white-5">
                        <a target="_blank" class="h:bg_black-2  h:c_white c_white p-x_2 p_3 justify_between flex flex_row " href="http://www.ncdr.com">
                            <span class="inline-block flex_auto p-l_3">NCDR</span>
                            <i class="float_right flex_shrink fas p-r_3 c_white h:c_white fa-external-link-square "></i>
                        </a>
                    </li>
                </ul>
            </section>
            <!-- /ACC Product Links -->
        </div>
        <!-- / footer -->
        <div id="subfooter" class="bg_secondary-n3 font_n1 p-x_4 p-y_4">
            <ul class="block footer-bottom-links ul_none">
                <li class="inline p_2"><a href="//www.acc.org/footer-pages/media-center"
                        class="c_white-6 h:c_white">Media Center</a></li>
                <li class="inline p_2"><a href="//www.acc.org/footer-pages/quick-start-guide"
                        class="c_white-6 h:c_white">ACC.org Quick Start Guide</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/advertising-and-sponsorship-policy">Advertising &amp;
                        Sponsorship Policy</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/clinical-content-disclaimer">Clinical Content Disclaimer</a>
                </li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/editorial-board">Editorial Board</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/privacy-policy">Privacy Policy</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/registered-user-agreement">Registered User Agreement</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/cookie-policy">Cookie Policy</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white"
                        href="//www.acc.org/footer-pages/member-hub-terms-of-use">Member Hub Terms of Use</a></li>
                <li class="inline p_2"><a class="c_white-6 h:c_white" href="//www.acc.org/sitemap-acc.xml">Site Map</a>
                </li>
            </ul>
            <!-- /footer-bottom-links -->
            <p class="c_white-5 font_italic font_n2 legal m-b_2 m-t_3">© 2019 American College of Cardiology Foundation.
                All rights reserved.</p>
        </div>
        <!-- /subfooter -->
    </div>
</div>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 10893

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 9760

5.3.1 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

.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] ">&nbsp;</div>
</div>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 9979

5.3.2 Stars

experimental

Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.

Example

Default styling

caution:
This item is not finalized and might be subject to change 
<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>
Copy Code

Example

Default styling

 

 

 

 

<div class="max-w_40">
   <h1 class="lorem-loader font_3 m-y_3">&nbsp;</h1>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
</div>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 9809

5.3.4 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

.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>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 7704

5.4 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>
Copy Code

Source: dist/css/cardiosmart_boot.css, line 9909

5.5 Social Links

The social links From the Footer.

Example

Default styling

<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-square-x-twitter"></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>
Copy Code

Example

Default styling

<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-square-x-twitter"></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>
Copy Code

Example

Default styling

<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-square-x-twitter"></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>
Copy Code