Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Component

Source: dist/css/acc_boot.css, line 7963

4.1 Accordion

In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.

Example

Default styling

Accordion Header Level 3

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
<div class="relative">
    <header id="accordion_header" class="flex flex_row sticky t_n2 bg_white shadow_overlap-light br_solid br_1 br_black-2 z_2 ">
        <div class="h:bg_primary-5 m_2 c_primary h:c_primary-n2 br_radius">
            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#content_accordion" aria-controls="#content_accordion">
                    <span class="fa-stack">
                    <i class="fas fa-minus fa-stack-1x"></i>
                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                    </span>
            </div>        </div>
        <div class=" font-size_up flex_auto flex flex_row justify_center p-y_2">
            <div class="flex_auto self_center reading-typography no-margins">
               <h3> Accordion Header Level 3</h3>
            </div>
        </div>
    </header>
    <main id="content_accordion" class="bg_black-_05 br-bl_radius br-br_radius m-x_0 m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light tab-content transition_4"  aria-labelledby="accordion_header m-x_3" >
    <div class="reading-typography ">
        <h1>Lorem Ipsum</h1>
        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
        <h2>Header Level 2</h2>
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
        <h3>Header Level 3</h3>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ul>
        <button class="btn btn-primary">Button</button>
    	<details>
            <summary ><strong>Table of Contents</strong></summary>
            <div>
                <ol>
                    <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                    <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                    </li>
                    <li data-line="2" dir="auto">Arrhythmias</li>
                    <li data-line="3" dir="auto">Coronary Artery Disease</li>
                    <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                    <li data-line="5" dir="auto">Valvular Disease</li>
                    <li data-line="6" dir="auto">Pericardial Disease</li>
                    <li data-line="7" dir="auto">Congenital Heart Disease</li>
                    <li data-line="8" dir="auto">Vascular Diseases</li>
                    <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                    <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                    <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                        System</li>
                    <li data-line="12" dir="auto">
                        Miscellaneous
                        <ul>
                            <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                            <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                            <li data-line="15" dir="auto">Cardiac Critical Care</li>
                            <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                            <li data-line="17" dir="auto">Sports Cardiology</li>
                            <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                            <li data-line="19" dir="auto">Cardiovascular Operative Management
                            </li>
                            <li data-line="20" dir="auto">Pharmacology</li>
                            <li data-line="21" dir="auto">General Principles of Cardiovascular
                                Medicine</li>
                        </ul>
                    </li>
                </ol>
            </div>
        </details>
    </div>    </main>
</div>
Copy Code

Source: dist/css/acc_boot.css, line 7993

4.1.1 Accordion Child

Description: Sometimes the content needs be collapsed at a secondary level to make it scannable.

Example

Default styling

Nested Accordion Header Level 4

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
<div class="relative m-b_2">
    <header id="accordion_header-child" class="flex flex_row sticky t_5 bg_white shadow_bevel-light br_radius br_solid br_1 br_black-2 z_3 ">
        <div class="h:bg_primary-4 m_2 c_primary h:c_primary-n3 br_radius">
            <div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="#content_accordion-child" aria-controls="#content_accordion-child" aria-expanded="true">
                    <i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
            </div>        </div>
        <div class=" flex_auto flex flex_row justify_center p-y_2">
            <div class="flex_auto self_center reading-typography no-margins">
                <h4> Nested Accordion Header Level 4</h4>
            </div>
        </div>
    </header>
    <main id="content_accordion-child" class="bg_black-1 m-t_n2 br_radius p-t_3 p-x_3 p-x_4:md p-b_4 reading-typography tab-content transition_4 shadow_emboss-light"  aria-labelledby="accordion_header-child" >
    <div class="reading-typography ">
        <h1>Lorem Ipsum</h1>
        <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
        <h2>Header Level 2</h2>
        <ol>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
        <h3>Header Level 3</h3>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ul>
        <button class="btn btn-primary">Button</button>
    	<details>
            <summary ><strong>Table of Contents</strong></summary>
            <div>
                <ol>
                    <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                    <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                    </li>
                    <li data-line="2" dir="auto">Arrhythmias</li>
                    <li data-line="3" dir="auto">Coronary Artery Disease</li>
                    <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                    <li data-line="5" dir="auto">Valvular Disease</li>
                    <li data-line="6" dir="auto">Pericardial Disease</li>
                    <li data-line="7" dir="auto">Congenital Heart Disease</li>
                    <li data-line="8" dir="auto">Vascular Diseases</li>
                    <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                    <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                    <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                        System</li>
                    <li data-line="12" dir="auto">
                        Miscellaneous
                        <ul>
                            <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                            <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                            <li data-line="15" dir="auto">Cardiac Critical Care</li>
                            <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                            <li data-line="17" dir="auto">Sports Cardiology</li>
                            <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                            <li data-line="19" dir="auto">Cardiovascular Operative Management
                            </li>
                            <li data-line="20" dir="auto">Pharmacology</li>
                            <li data-line="21" dir="auto">General Principles of Cardiovascular
                                Medicine</li>
                        </ul>
                    </li>
                </ol>
            </div>
        </details>
    </div>    </main>
</div>
Copy Code

Source: dist/css/acc_boot.css, line 8023

4.1.2 Accordion Nested Example

In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.

Example

Default styling

Accordion Header Level 3

Aenean commodo ligula eget dolor aenean massa

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nested Accordion Header Level 4

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine

Nested Accordion Header Level 4

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
<div class="relative">
    <header id="accordion_header-nested" class="flex flex_row sticky t_n2 bg_white shadow_overlap-light br_solid br_1 br_black-2 z_2 ">
        <div class="h:bg_primary-5 m_2 c_primary h:c_primary-n2 br_radius">
            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#content_accordion-parent" aria-controls="#content_accordion-parent">
                    <span class="fa-stack">
                    <i class="fas fa-minus fa-stack-1x"></i>
                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                    </span>
            </div>        </div>
        <div class=" font-size_up flex_auto flex flex_row justify_center p-y_2">
            <div class="flex_auto self_center reading-typography no-margins">
               <h3> Accordion Header Level 3</h3>
            </div>
        </div>
    </header>
    <main id="content_accordion-parent" class="bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light tab-content transition_4"  aria-labelledby="accordion_header-nested" >
        <h2>Aenean commodo ligula eget dolor aenean massa</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit. Aenean commodo ligula eget dolor. Aenean massa.
        Cum sociis natoque penatibus et magnis dis parturient
        montes, nascetur ridiculus mus. Donec quam felis,
        ultricies nec, pellentesque eu, pretium quis, sem.</p>
        <div class="relative m-b_2">
            <header id="accordion_header-child" class="flex flex_row sticky t_5 bg_white shadow_bevel-light br_radius br_solid br_1 br_black-2 z_3 ">
                <div class="h:bg_primary-4 m_2 c_primary h:c_primary-n3 br_radius">
                    <div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="#content_accordion-child" aria-controls="#content_accordion-child" aria-expanded="true">
                            <i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
                    </div>        </div>
                <div class=" flex_auto flex flex_row justify_center p-y_2">
                    <div class="flex_auto self_center reading-typography no-margins">
                        <h4> Nested Accordion Header Level 4</h4>
                    </div>
                </div>
            </header>
            <main id="content_accordion-child" class="bg_black-1 m-t_n2 br_radius p-t_3 p-x_3 p-x_4:md p-b_4 reading-typography tab-content transition_4 shadow_emboss-light"  aria-labelledby="accordion_header-child" >
            <div class="reading-typography ">
                <h1>Lorem Ipsum</h1>
                <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                <h2>Header Level 2</h2>
                <ol>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aliquam tincidunt mauris eu risus.</li>
                </ol>
                <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
                <h3>Header Level 3</h3>
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aliquam tincidunt mauris eu risus.</li>
                </ul>
                <button class="btn btn-primary">Button</button>
            	<details>
                    <summary ><strong>Table of Contents</strong></summary>
                    <div>
                        <ol>
                            <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                            <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                            </li>
                            <li data-line="2" dir="auto">Arrhythmias</li>
                            <li data-line="3" dir="auto">Coronary Artery Disease</li>
                            <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                            <li data-line="5" dir="auto">Valvular Disease</li>
                            <li data-line="6" dir="auto">Pericardial Disease</li>
                            <li data-line="7" dir="auto">Congenital Heart Disease</li>
                            <li data-line="8" dir="auto">Vascular Diseases</li>
                            <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                            <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                            <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                                System</li>
                            <li data-line="12" dir="auto">
                                Miscellaneous
                                <ul>
                                    <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                                    <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                                    <li data-line="15" dir="auto">Cardiac Critical Care</li>
                                    <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                                    <li data-line="17" dir="auto">Sports Cardiology</li>
                                    <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                                    <li data-line="19" dir="auto">Cardiovascular Operative Management
                                    </li>
                                    <li data-line="20" dir="auto">Pharmacology</li>
                                    <li data-line="21" dir="auto">General Principles of Cardiovascular
                                        Medicine</li>
                                </ul>
                            </li>
                        </ol>
                    </div>
                </details>
            </div>    </main>
        </div>        <div class="relative m-b_2">
            <header id="accordion_header-child" class="flex flex_row sticky t_5 bg_white shadow_bevel-light br_radius br_solid br_1 br_black-2 z_3 ">
                <div class="h:bg_primary-4 m_2 c_primary h:c_primary-n3 br_radius">
                    <div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="#content_accordion-child" aria-controls="#content_accordion-child" aria-expanded="true">
                            <i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
                    </div>        </div>
                <div class=" flex_auto flex flex_row justify_center p-y_2">
                    <div class="flex_auto self_center reading-typography no-margins">
                        <h4> Nested Accordion Header Level 4</h4>
                    </div>
                </div>
            </header>
            <main id="content_accordion-child" class="bg_black-1 m-t_n2 br_radius p-t_3 p-x_3 p-x_4:md p-b_4 reading-typography tab-content transition_4 shadow_emboss-light"  aria-labelledby="accordion_header-child" >
            <div class="reading-typography ">
                <h1>Lorem Ipsum</h1>
                <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                <h2>Header Level 2</h2>
                <ol>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aliquam tincidunt mauris eu risus.</li>
                </ol>
                <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
                <h3>Header Level 3</h3>
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aliquam tincidunt mauris eu risus.</li>
                </ul>
                <button class="btn btn-primary">Button</button>
            	<details>
                    <summary ><strong>Table of Contents</strong></summary>
                    <div>
                        <ol>
                            <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                            <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                            </li>
                            <li data-line="2" dir="auto">Arrhythmias</li>
                            <li data-line="3" dir="auto">Coronary Artery Disease</li>
                            <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                            <li data-line="5" dir="auto">Valvular Disease</li>
                            <li data-line="6" dir="auto">Pericardial Disease</li>
                            <li data-line="7" dir="auto">Congenital Heart Disease</li>
                            <li data-line="8" dir="auto">Vascular Diseases</li>
                            <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                            <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                            <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                                System</li>
                            <li data-line="12" dir="auto">
                                Miscellaneous
                                <ul>
                                    <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                                    <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                                    <li data-line="15" dir="auto">Cardiac Critical Care</li>
                                    <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                                    <li data-line="17" dir="auto">Sports Cardiology</li>
                                    <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                                    <li data-line="19" dir="auto">Cardiovascular Operative Management
                                    </li>
                                    <li data-line="20" dir="auto">Pharmacology</li>
                                    <li data-line="21" dir="auto">General Principles of Cardiovascular
                                        Medicine</li>
                                </ul>
                            </li>
                        </ol>
                    </div>
                </details>
            </div>    </main>
        </div>    </main>
</div>
Copy Code

Source: dist/css/acc_boot.css, line 6720

4.2 Advertisment Spaces

Advertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.

Example

Default styling

advertisment
<div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
   <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
      <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"/></a>
   </div>
   <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
</div>
Copy Code

Source: dist/css/acc_boot.css, line 6809

4.3 Cookie Banner

Description: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.

  • The system will present user a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
  • The system will allow the user to dismiss the pop up by clicking the Accept/OK button
  • The system will allow the ACC Admin to "reset" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
  • The system will track and record the users date/time when they accepted the pop up.
NOTE:
This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.
<div class="'fixed' b_0 r_0 l_0 grid justify-content-center bg_acc opacity_8 z_5">
    <div class="flex_row:md flex_column flex">
        <div class="flex_auto c_white p_3 p_4:md">
            <h1>This site uses cookies to improve your experience. </h1>
            <p>By continuing to use our site, you agree to our <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/cookie-policy" target="_blank">Cookie Policy</a>, <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/privacy-policy">Privacy Policy</a> and <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a></p></div>
        <div class="flex_none grid justify_center p_5:md p_4 text_center">
            <a class="btn btn-primary self_center p-x_5 shadow_overlap-light">OK</a>
        </div>
    </div>
</div>
Copy Code

Source: dist/css/acc_boot.css, line 14430

4.4 MicroSite

A MicroSite (Conversion Focused Sub-Section), exists within a the larger website, but offers a strategic approach for encompassing a semi-independent initiative of the organization, all while retaining a robust link to the main site. While it upholds most of the branding guidelines of the main site, a MicroSite has its unique design, acting as a concentrated unit for user context.

The creation of a MicroSite enables businesses to effectively spotlight specific campaigns or products with a distinctive touch, cater to particular audience segments, and maintain a uniform user experience. Despite living relatively independently from the main site's structure and supplementary content, it still provides fluid navigation and integration with the primary website.

This arrangement presents a flexible and specialized platform for delivering customized messaging, engaging users in a personalized way, and accomplishing specific objectives that may necessitate a unique online presence.

A Microsite Must

  • Have a user goal
  • Have a call to action for conversion.
  • Have a focused audience so the voice can be taylored to the action.

    Source: dist/css/acc_boot.css, line 14441

    4.4.1 Hero Image with CTA

    The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

    Component.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image Component.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation Component.MicroSite.Sub.PageTitleTreatment - Page Title Treatment Component.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight
    Sub Components in Design:

      Example

      Default styling

      Hero Image

      Hero Statement Mision of the Page ™

      Call to Action Title (CTA). You Should be Engaged

      CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

      NOTE:
      The Hero Image with CTA component is used to create impactful hero sections with a compelling call-to-action overlay. It combines a visually appealing hero image with a title, description, and call-to-action button.
      <div grid-template="hero-image-cta" id="hero" class="font_3:lg font_2:md font_1">
          <div grid-area="background" class="col_all overflow_hidden row_all">
              <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
                <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
                  media="(min-width: 1024px)" class="display_none">
                <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
                  media="(min-width: 768px)" class="display_none">
                <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
                  media="(min-width: 400px)" class="display_none">
                <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
                  class="flex_100">
              </picture>    </div>
          <div grid-area="breadcrumb" class="z_1 flex flex_row justify_start">
              <nav data-item="hero-image-breadcrumb-nav" class="font-size_down-2 relative isolation_isolate p-y_3 p-x_4 c_white-8">
              	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
              	The Parent of This Micro Section of the Site</a>
              </nav>    </div>
          <div grid-area="title" class="relative font-size_up-2 m-y_6:lg m-y_5:md">
              <h1 data-item="hero-title"
                class="font-size_up-2 m_0 c_white isolation_isolate relative">
                Hero Statement Mision of  the Page &trade;</h1>    </div>
          <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
              <div data-item="cta-callout" class="z_1 font-size_0 c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
                    <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
                    <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
                    <div class="grid justify_center items_center ">
                      <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
                    </div></div>    </div>
      </div>
      Copy Code

      Source: dist/css/acc_boot.css, line 14480

      4.4.2 Micro Branding with CTA Button

      The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

      Component.MicroSite.Sub.HeroImage.BackgroundImage - Background Image Component.MicroSite.Sub.PageTitleTreatment - Page Title Component.MicroSite.Sub.HeroImage.CTAButton - CTA Button
      Sub Components in Design:

        Example

        Default styling

        Hero Image

        Hero Statement Mision of the Page™

        NOTE:
        Micro Branding is used to create cohesive experiance by continuing the branding to children pages of a microiste. It combines a slice of hero image with just the single call-to-action button.
        <div grid-template="hero-image-cta" template-option="micro" class="isolation_isolate overflow_hidden relative">
            <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
              <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
                media="(min-width: 1024px)" class="display_none">
              <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
                media="(min-width: 768px)" class="display_none">
              <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
                media="(min-width: 400px)" class="display_none">
              <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
                class="flex_100">
            </picture>  <div grid-area="title">
            <h1 data-item="hero-title"
              class="m_0 m-y_3 m-y_0:lg c_white isolation_isolate relative">
              <span class="display_none:lg"><a href="#RootPage" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
              <span class="text display_contents">Hero Statement Mision of  the Page&trade;<span>
            </h1>    </div>
            <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
              <div class="grid justify_center items_center ">
                <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
              </div>  </div>
        </div>
        Copy Code

        Source: dist/css/acc_boot.css, line 14626

        4.4.3.1.1 Responsive Hero Image

        The Responsive Hero Image component is used to display a responsive hero image that adapts to different screen sizes. the sizes are 1200/300, 1024/256,600/300, & 320/300

        Example

        Default styling

        Hero Image
        NOTE:
        It utilizes the "Lorem Picsum" service for placeholder images. Replace all 4 images for best results.
          <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 ">
            <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
              media="(min-width: 1024px)" class="display_none">
            <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
              media="(min-width: 768px)" class="display_none">
            <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
              media="(min-width: 400px)" class="display_none">
            <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
              class="flex_100">
          </picture>
        Copy Code

        Source: dist/css/acc_boot.css, line 14559

        4.4.3.1.2 Hero Image Breadcrumb Nav

        The Hero Image Breadcrumb Nav is a sub-component used within the Hero Image with CTA component to display a breadcrumb navigation on top of the hero image.

        Example

        Default styling

        NOTE:
        The Hero Image Breadcrumb Nav sub-component is used to provide breadcrumb navigation on top of the hero image within the Hero Image with CTA component. It focuses on displaying the immediate parent only in the breadcrumb trail.
        <nav data-item="hero-image-breadcrumb-nav" class=" relative isolation_isolate p-y_3 p-x_4 c_white-8">
        	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
        	The Parent of This Micro Section of the Site</a>
        </nav>
        Copy Code

        Source: dist/css/acc_boot.css, line 14538

        4.4.3.1.3 CTA Button

        The CTA Button is just a centered button for the highlighted call-to-action.

        Example

        Default styling

        NOTE:
        The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.
        <div class="grid justify_center items_center ">
          <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
        </div>
        Copy Code

        Source: dist/css/acc_boot.css, line 14513

        4.4.3.1.4 CTA Highlight

        The CTA Highlight component is used to create a highlighted call-to-action section.

        Example s

        Modifier: inverted

        This modifier class is used to create an inverted version of the CTA Highlight component, which can be applied when a dark background is present.

        Call to Action Title (CTA). You Should be Engaged

        CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.

        NOTE:
        The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.
        <div data-item="cta-callout" class="[modifier class] c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
              <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
              <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
              <div class="grid justify_center items_center ">
                <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
              </div></div>
        Copy Code

        Source: dist/css/acc_boot.css, line 14580

        4.4.3.2 Page Title Treatment

        MicroSite Page Title Treatment component is used to style and emphasize page titles.

        Example s

        Modifier: font-color

        This modifier class is used to customize the font color of the page title.

        Hero Statement Mision of the Page ™

        NOTE:
        The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.
        <h1 data-item="hero-title"
          class="[modifier class] c_white isolation_isolate relative">
          Hero Statement Mision of  the Page &trade;</h1>
        Copy Code

        Example

        Default styling

        Hero Statement Mision of the Page™

        NOTE:
        The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.
        <h1 data-item="hero-title"
          class=" c_white isolation_isolate relative">
          <span class="display_none:lg"><a href="#RootPage" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
          <span class="text display_contents">Hero Statement Mision of  the Page&trade;<span>
        </h1>
        Copy Code

        Source: dist/css/acc_boot.css, line 12811

        4.5.1 Header Nav

        The Header Nav of ACC.org. This is sample data and might not reflect the full design or content needed in production.

        Example

        Default styling

        <div class="flex c_white relative">
        	<nav class="flex_auto navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_2 font_1:lg relative">
        		<div class="relative"><button class="br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navBarMainNav" aria-controls="navBarMainNav" aria-expanded="false" aria-label="Toggle navigation">
        			<i class="icon-toggle_bars-times fas fa a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white p-x_3 uppercase font_accent">Menu</span>
        		</button>
        		</div>		<div class="collapse navbar-collapse" id="navBarMainNav">
        			<ul class="navbar-nav flex flex_row:lg flex_column justify_around w_100">
        				<li class="nav-item relative text_left text_center:lg  flex_shrink">
        					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/" title="Home of the American College of Cardiology"><i class="fas fa-home p-x_3:lg"></i><span class="display_none:lg">&nbsp;Home</span></a>
        				</li>
        				<li class="display_none:lg relative nav-item relative text_left text_center:lg  flex_auto">
        					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources">Guidelines</a>
        				</li>
        				<li class="nav-item relative text_left text_center:lg  flex_auto dropdown  [ active ]">
        <a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [ a:c_white ] display_none:lg inline-block"
        	id="clinicalTopicsDropdown"
        	role="button"
        	data-bs-toggle="dropdown"
        	aria-haspopup="true"
        	aria-expanded="false"><i
        		class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i></a>
        <a class="nav-link nowrap p-l_0  [ a:c_white ] inline-block"
        	href="/clinical-topics">Clinical
        	Topics</a>
        					<div class="dropdown-menu font_copy br-t_0 br_none br_solid:lg br_square 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="p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md">
        										<ul class="ul_none lh_2">
        											<li class="relative m-x_2:md m-x_3">
        												<a
        													href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
        													target="_blank"
        													class="transition_1 h:opacity opacity_8"
        													><img
        														src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
        														alt="QII" class="w_100 max-w_20"
        												/></a>
        											</li>
        											<li class="relative m-x_2:md m-x_3">
        												<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
        											</li>
        										</ul>	</div>
        							<div
        								class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md"
        							>
        									<ul class="ul_none lh_2"
        									    id="SubLinkCollapseParent">
        									    <li class="m-b_2">
        									        <a class="dropdown-item link transition_4 wrap"
        									           href="/clinical-topics/acute-coronary-syndromes"><span
        									                  class="text-indent_n1 inline-block m-l_4">Acute
        									                Coronary Syndromes</span></span></a>
        									    </li>
        									    <li class="m-b_2">
        									        <a class="dropdown-item link transition_4 wrap"
        									           href="/clinical-topics/anticoagulation-management"
        									           title="Anticoagulation Management"><span
        									                  class="text-indent_n1 inline-block m-l_4">Anticoagulation
        									                Management</span></a>
        									    </li>
        									    <li class="m-b_2">
        									        <div
        									             class="flex justify_start transition_4 dropdown-item link">
        									            <button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        									                    data-bs-toggle="collapse"
        									                    role="button"
        									                    aria-expanded="true"
        									                    aria-controls="learningCollapse"
        									                    data-bs-target="#learningCollapse"
        									                    onclick="event.stopPropagation()">
        									                <i
        									                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        									            </button>
        									            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        									               href="#">Online Learning Catalog</a>
        									        </div>
        									        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        									            id="learningCollapse">
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/earncredit"><span
        									                          class="text-indent_n1 inline-block m-l_5">Earn
        									                        Credit</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/board-prep-offerings"
        									                   title="Board Prep Offerings"><span
        									                          class="text-indent_n1 inline-block m-l_5">Board
        									                        Prep Offerings</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/education-catalog"><span
        									                          class="text-indent_n1 inline-block m-l_5">View
        									                        the Entire Catalog</span></a>
        									            </li>
        									        </ul>
        									    </li>
        									    <li class="m-b_2">
        									        <div
        									             class="flex justify_start transition_4 dropdown-item link">
        									            <a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        									                    data-bs-toggle="collapse"
        									                    role="button"
        									                    aria-expanded="true"
        									                    aria-controls="productsCollapse"
        									                    data-bs-target="#productsCollapse"
        									                    onclick="event.stopPropagation()">
        									                <i
        									                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        									            </a>
        									            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        									               href="/education-and-meetings/education-catalog">Products</a>
        									        </div>
        									        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        									            id="productsCollapse">
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/accsap"><span
        									                          class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/accel-audio"><span
        									                          class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
        									                          class="text-indent_n1 inline-block m-l_5">CardioSource
        									                        Plus for Institutions and
        									                        Practices</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/cathsap"><span
        									                          class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
        									                   title="ECG Drill and Practice"><span
        									                          class="text-indent_n1 inline-block m-l_5">ECG
        									                        Drill and Practice</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/echosap"><span
        									                          class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/epsap"><span
        									                          class="text-indent_n1 inline-block m-l_5">EP
        									                        SAP</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/heart-songs-5"><span
        									                          class="text-indent_n1 inline-block m-l_5">Heart
        									                        Songs</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/iscience"><span
        									                          class="text-indent_n1 inline-block m-l_5">iScience</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
        									                          class="text-indent_n1 inline-block m-l_5">Nuclear
        									                        Cardiology and Cardiac CT Meeting on
        									                        Demand</span></a>
        									            </li>
        									            <li class="">
        									                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        									                   href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
        									                          class="text-indent_n1 inline-block m-l_5">RightSTEPS
        									                        Optimizing Medical Therapy for
        									                        Chronic Heart
        									                        Failure</span></a>
        									            </li>
        									        </ul>
        									    </li>
        									</ul>	</div>
        						</div>					</div>
        				</li>
        				<li class="nav-item relative text_left text_center:lg  flex_auto ">
        					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="#">Latest In Cardiology</a>
        				</li>
        				<li class="nav-item relative text_left text_center:lg  flex_auto dropdown ">
        					<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [a:c_white] display_none:lg inline-block"
        						id="eduDropdown"
        						role="button"
        						data-bs-toggle="dropdown"
        						aria-haspopup="true"
        						aria-expanded="false"><i
        							class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i>
        					</a>
        					<a class="nav-link nowrap p-l_0  [a:c_white] inline-block"
        						href="/Edu-Edu">Education and Meetings</a>
        					<div class="dropdown-menu font_copy br-t_0 dropdown-menu-end  br_none br_solid:lg br_square 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="p-x_2 p-y_0 p-y_2:md dropdown_column">
        								<ul class="ul_none lh_2 m_0 max-w_25 w_100">
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/acute-coronary-syndromes.pdf"
        											><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/anticoagulation-management"
        											title="Anticoagulation Management"
        											target="_blank"
        											><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/arrhythmias-and-clinical-ep"
        											><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
        											><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/cardiac-surgery"
        											><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/cardio-oncology"
        											><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
        											><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
        											><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/dyslipidemia"
        											title="Dyslipidemia"
        											><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/geriatric-cardiology"
        											><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/heart-failure-and-cardiomyopathies"
        											title="Heart Failure and Cardiomyopathies"
        											><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
        										>
        									</li>
        								</ul>	</div>
        						</div>					</div>
        				</li>
        				<li class="nav-item relative text_left text_center:lg  flex_auto dropdown ">
        					<a class="nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [a:c_white] display_none:lg inline-block"
        						id="toolDropdown"
        						role="button"
        						data-bs-toggle="dropdown"
        						aria-haspopup="true"
        						aria-expanded="false"><i
        							class="far fa icon-toggle_plus-minus m-l_n2 m-r_2 "></i>
        					</a>
        					<a class="nav-link nowrap p-l_0  [a:c_white] inline-block"
        						href="/Edu-Edu">Tools &amp; Practice Support</a>
        					<div class="dropdown-menu font_copy br-t_0  dropdown-menu-end br_none br_solid:lg br_square 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="p-x_2 p-y_0 p-y_2:md dropdown_column w_50:md">
        								<ul class="ul_none lh_2 m_0 max-w_25 w_100">
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/acute-coronary-syndromes.pdf"
        											><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/anticoagulation-management"
        											title="Anticoagulation Management"
        											target="_blank"
        											><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/arrhythmias-and-clinical-ep"
        											><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
        											><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/cardiac-surgery"
        											><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/cardio-oncology"
        											><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
        											><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
        											><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/dyslipidemia"
        											title="Dyslipidemia"
        											><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/geriatric-cardiology"
        											><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
        										>
        									</li>
        									<li class="m-b_2">
        										<a
        											class="dropdown-item link transition_4 wrap"
        											href="/clinical-topics/heart-failure-and-cardiomyopathies"
        											title="Heart Failure and Cardiomyopathies"
        											><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
        										>
        									</li>
        								</ul>	</div>
        							<div
        								class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md dropdown_column w_50:md"
        							>
        								<ul class="ul_none lh_2"
        								    id="SubLinkCollapseParent">
        								    <li class="m-b_2">
        								        <a class="dropdown-item link transition_4 wrap"
        								           href="/clinical-topics/acute-coronary-syndromes"><span
        								                  class="text-indent_n1 inline-block m-l_4">Acute
        								                Coronary Syndromes</span></span></a>
        								    </li>
        								    <li class="m-b_2">
        								        <a class="dropdown-item link transition_4 wrap"
        								           href="/clinical-topics/anticoagulation-management"
        								           title="Anticoagulation Management"><span
        								                  class="text-indent_n1 inline-block m-l_4">Anticoagulation
        								                Management</span></a>
        								    </li>
        								    <li class="m-b_2">
        								        <div
        								             class="flex justify_start transition_4 dropdown-item link">
        								            <button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        								                    data-bs-toggle="collapse"
        								                    role="button"
        								                    aria-expanded="true"
        								                    aria-controls="learningCollapse"
        								                    data-bs-target="#learningCollapse"
        								                    onclick="event.stopPropagation()">
        								                <i
        								                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        								            </button>
        								            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        								               href="#">Online Learning Catalog</a>
        								        </div>
        								        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        								            id="learningCollapse">
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/earncredit"><span
        								                          class="text-indent_n1 inline-block m-l_5">Earn
        								                        Credit</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/board-prep-offerings"
        								                   title="Board Prep Offerings"><span
        								                          class="text-indent_n1 inline-block m-l_5">Board
        								                        Prep Offerings</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/education-catalog"><span
        								                          class="text-indent_n1 inline-block m-l_5">View
        								                        the Entire Catalog</span></a>
        								            </li>
        								        </ul>
        								    </li>
        								    <li class="m-b_2">
        								        <div
        								             class="flex justify_start transition_4 dropdown-item link">
        								            <a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        								                    data-bs-toggle="collapse"
        								                    role="button"
        								                    aria-expanded="true"
        								                    aria-controls="productsCollapse"
        								                    data-bs-target="#productsCollapse"
        								                    onclick="event.stopPropagation()">
        								                <i
        								                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        								            </a>
        								            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        								               href="/education-and-meetings/education-catalog">Products</a>
        								        </div>
        								        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        								            id="productsCollapse">
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/accsap"><span
        								                          class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/accel-audio"><span
        								                          class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
        								                          class="text-indent_n1 inline-block m-l_5">CardioSource
        								                        Plus for Institutions and
        								                        Practices</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/cathsap"><span
        								                          class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
        								                   title="ECG Drill and Practice"><span
        								                          class="text-indent_n1 inline-block m-l_5">ECG
        								                        Drill and Practice</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/echosap"><span
        								                          class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/epsap"><span
        								                          class="text-indent_n1 inline-block m-l_5">EP
        								                        SAP</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/heart-songs-5"><span
        								                          class="text-indent_n1 inline-block m-l_5">Heart
        								                        Songs</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/iscience"><span
        								                          class="text-indent_n1 inline-block m-l_5">iScience</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
        								                          class="text-indent_n1 inline-block m-l_5">Nuclear
        								                        Cardiology and Cardiac CT Meeting on
        								                        Demand</span></a>
        								            </li>
        								            <li class="">
        								                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        								                   href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
        								                          class="text-indent_n1 inline-block m-l_5">RightSTEPS
        								                        Optimizing Medical Therapy for
        								                        Chronic Heart
        								                        Failure</span></a>
        								            </li>
        								        </ul>
        								    </li>
        								</ul>	</div>
        						</div>					</div>
        				</li>
        				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
        					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/membership" title="Access exclusive member features and groups or learn about ACC membership">Membership</a>
        				</li>
        				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
        					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="//www.acc.org/about-acc" title="Learn about the ACC organization">About ACC</a>
        				</li>
        				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
        					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org">JACC</a>
        				</li>
        				<li class="display_none:lg nav-item relative text_left text_center:lg  flex_auto ">
        					<a class="nav-link expanded-click-area nowrap p-l_4 p-l_0:lg" href="http://accscientificsession.acc.org" target="_blank" title="ACC Annual Scientific Session Website">ACC.19</a>
        				</li>
        			</ul>
        		</div>
        	</nav>
        	<nav class="font_1 absolute bg_primary br-t_1 br_primary br_solid br_none flex_shrink font_0 font_0:lg m-l_auto navbar navbar-dark navbar-expand p-y_2 r_0 t_0 b_0:lg relative:lg" >
        		<ul class="navbar-nav">
        			<li class="nav-item relative flex_shrink dropdown">
        				<a class="nav-link expanded-click-area [a:c_white] h:c_white nowrap"
        					 role="button"
        					 id="dropdownMyACC"
        					 data-bs-toggle="dropdown"
        					 aria-expanded="false"
        					>My ACC <i class="far icon-toggle_chevron-up-down"></i></a>
        				<div
        				class="dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg m-t_0 m-t_2:lg font_0" aria-labelledby="dropdownMyACC"
        				>
        					<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
        						<div class="p-x_2 p-y_0 dropdown_column">
        							<ul class="ul_none lh_2 m_0">
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-profile">My Profile</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-training-program">My Training Programs</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-membership">My Membership</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-library">My Library</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/dashboard">My Learning Dashboard</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/grades">My Transcript</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/ncdr-physician-dashboard">NCDR Physician Dashboard</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-communication-preferences">My Communication Preferences</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="https://memberhub.acc.org/">ACC Member Hub</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-purchase-history">My Purchases</a>
        								</li>
        								<li>
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/personalization">Personalize ACC.org</a>
        								</li>
        								<div class="dropdown-divider m-y_3"></div>
        								<li class="">
        									<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/RemoteLogOff"> Logout</a>
        								</li>
        							</ul>
        						</div>
        					</div>
        				</div>
        			</li>
        			<li class="nav-item">
        				<a class=" nav-link nowrap" href="#"><i class="far fa-shopping-cart"></i></a>
        			</li>
        			<!--<li class="nav-item">
        				<a class=" nav-link nowrap" href="#"><i class="fas fa-sign-out-alt"></i></a>
        			</li>-->
        			<!--<li class="nav-item">
        				<a href="@loginlink" class="nav-link nowrap"><i class="fas fa-sign-in-alt"></i> Log in to MyACC </a>
        			</li>-->
        		</ul>
        	</nav></div>
        Copy Code

        Example

        Default styling

        <div class="relative"><button class="br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navBarMainNav" aria-controls="navBarMainNav" aria-expanded="false" aria-label="Toggle navigation">
        	<i class="icon-toggle_bars-times fas fa a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white p-x_3 uppercase font_accent">Menu</span>
        </button>
        </div>
        Copy Code

        Example

        Default styling

        <script>
        document.addEventListener("DOMContentLoaded", function(){
        // make it as accordion for smaller screens
        if (window.innerWidth > 992) {
        	document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){
        		everyitem.addEventListener('mouseover', function(e){
        			let el_link = this.querySelector('a[data-bs-toggle]');
        			if(el_link != null){
        				let nextEl = this.querySelector('.dropdown-menu');
        				el_link.classList.add('show');
        				nextEl.classList.add('show');
        				nextEl.setAttribute("data-bs-popper", "none")
        			}
        		});
        		everyitem.addEventListener('mouseleave', function(e){
        			let el_link = this.querySelector('a[data-bs-toggle]');
        			if(el_link != null){
        				let nextEl = this.querySelector('.dropdown-menu');
        				el_link.classList.remove('show');
        				nextEl.classList.remove('show');
        				nextEl.removeAttribute('data-bs-popper');
        			}
        		})
        	});
        }
        // end if innerWidth
        });
        </script>
        Copy Code
        <nav class="navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1">
        	<div class="relative"><button class="br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navBarMainNav" aria-controls="navBarMainNav" aria-expanded="false" aria-label="Toggle navigation">
        		<i class="icon-toggle_bars-times fas fa a:c_acc-2 c_white"></i><span class="a:c_acc-2 c_white p-x_3 uppercase font_accent">Menu</span>
        	</button>
        	</div>	<div class="collapse navbar-collapse" id="navBarMainNav">
        		<ul class="navbar-nav">
        			<li class="display_none:lg nav-item">
        				<a class="nav-link" href="//www.acc.org/" title="Home of the American College of Cardiology<span class="text-indent_n1 inline-block m-l_4"><i class="fas fa-home"></i><span class="display_none:lg">&nbsp;Home</span></a
        				>
        			</li>
        			<li class="display_none:lg nav-item">
        				<a
        					class="nav-link" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources" >Guidelines</a
        				>
        			</li>
        			<li class="nav-item">
        				<a class="nav-link" href="/clinical-topics" >Clinical Topics</a
        				>
        			</li>
        			<li class="nav-item">
        				<a class="nav-link" href="#">Latest In Cardiology</a>
        			</li>
        			<li class="display_none:lg nav-item">
        				<a
        					class="nav-link"
        					href="//www.acc.org/membership"
        					title="Access exclusive member features and groups or learn about ACC membership"
        					>Membership</a
        				>
        			</li>
        			<li class="display_none:lg nav-item">
        				<a class="nav-link" href="//www.acc.org/about-acc" title="Learn about the ACC organization"
        					>About ACC</a
        				>
        			</li>
        			<li class="display_none:lg nav-item">
        				<a class="nav-link" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org">JACC <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a>
        			</li>
        			<li class="display_none:lg nav-item">
        				<a
        					class="nav-link"
        					href="http://accscientificsession.acc.org"
        					target="_blank"
        					title="ACC Annual Scientific Session Website"
        					>ACC.19 <i class="c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2" style="text-indent: 0;"></i></a
        				>
        			</li>
        		</ul>
        	</div>
        </nav>
        Copy Code
        <div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
        	<div class="p-x_2 p-y_0 p-y_2:md dropdown_column">
        		<ul class="ul_none lh_2 m_0 max-w_25 w_100">
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/acute-coronary-syndromes.pdf"
        					><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/anticoagulation-management"
        					title="Anticoagulation Management"
        					target="_blank"
        					><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/arrhythmias-and-clinical-ep"
        					><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
        					><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/cardiac-surgery"
        					><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/cardio-oncology"
        					><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
        					><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
        					><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/dyslipidemia"
        					title="Dyslipidemia"
        					><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/geriatric-cardiology"
        					><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/heart-failure-and-cardiomyopathies"
        					title="Heart Failure and Cardiomyopathies"
        					><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
        				>
        			</li>
        		</ul>	</div>
        </div>
        Copy Code

        Example

        Default styling

        • QII
        • NCDR
        <ul class="ul_none lh_2">
        	<li class="relative m-x_2:md m-x_3">
        		<a
        			href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
        			target="_blank"
        			class="transition_1 h:opacity opacity_8"
        			><img
        				src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
        				alt="QII" class="w_100 max-w_20"
        		/></a>
        	</li>
        	<li class="relative m-x_2:md m-x_3">
        		<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
        	</li>
        </ul>
        Copy Code
        <ul class="ul_none lh_2 m_0 max-w_25 w_100">
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/acute-coronary-syndromes.pdf"
        			><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/anticoagulation-management"
        			title="Anticoagulation Management"
        			target="_blank"
        			><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/arrhythmias-and-clinical-ep"
        			><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
        			><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/cardiac-surgery"
        			><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/cardio-oncology"
        			><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
        			><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
        			><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/dyslipidemia"
        			title="Dyslipidemia"
        			><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/geriatric-cardiology"
        			><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
        		>
        	</li>
        	<li class="m-b_2">
        		<a
        			class="dropdown-item link transition_4 wrap"
        			href="/clinical-topics/heart-failure-and-cardiomyopathies"
        			title="Heart Failure and Cardiomyopathies"
        			><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
        		>
        	</li>
        </ul>
        Copy Code

        Example

        Default styling

        <div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
        	<div class="p-x_2 p-y_0 p-y_2:md dropdown_column w_50:md">
        		<ul class="ul_none lh_2 m_0 max-w_25 w_100">
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/acute-coronary-syndromes.pdf"
        					><span class="text-indent_n1 inline-block m-l_4">Acute Coronary Syndromes</span></span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/anticoagulation-management"
        					title="Anticoagulation Management"
        					target="_blank"
        					><span class="text-indent_n1 inline-block m-l_4">Anticoagulation Management</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/arrhythmias-and-clinical-ep"
        					><span class="text-indent_n1 inline-block m-l_4">Arrhythmias and Clinical EP</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad"
        					><span class="text-indent_n1 inline-block m-l_4">Atherosclerotic Disease (CAD/PAD)</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/cardiac-surgery"
        					><span class="text-indent_n1 inline-block m-l_4">Cardiac Surgery</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/cardio-oncology"
        					><span class="text-indent_n1 inline-block m-l_4">Cardio-Oncology</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/congenital-heart-disease-pediatric-cardiology"
        					><span class="text-indent_n1 inline-block m-l_4">Congenital Heart Disease and Pediatric Cardiology</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/diabetes-and-cardiometabolic-disease.zip"
        					><span class="text-indent_n1 inline-block m-l_4">Diabetes and Cardiometabolic Disease</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/dyslipidemia"
        					title="Dyslipidemia"
        					><span class="text-indent_n1 inline-block m-l_4">Dyslipidemia</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/geriatric-cardiology"
        					><span class="text-indent_n1 inline-block m-l_4">Geriatric Cardiology</span></a
        				>
        			</li>
        			<li class="m-b_2">
        				<a
        					class="dropdown-item link transition_4 wrap"
        					href="/clinical-topics/heart-failure-and-cardiomyopathies"
        					title="Heart Failure and Cardiomyopathies"
        					><span class="text-indent_n1 inline-block m-l_4">Heart Failure and Cardiomyopathies</span></a
        				>
        			</li>
        		</ul>	</div>
        	<div
        		class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md dropdown_column w_50:md"
        	>
        		<ul class="ul_none lh_2"
        		    id="SubLinkCollapseParent">
        		    <li class="m-b_2">
        		        <a class="dropdown-item link transition_4 wrap"
        		           href="/clinical-topics/acute-coronary-syndromes"><span
        		                  class="text-indent_n1 inline-block m-l_4">Acute
        		                Coronary Syndromes</span></span></a>
        		    </li>
        		    <li class="m-b_2">
        		        <a class="dropdown-item link transition_4 wrap"
        		           href="/clinical-topics/anticoagulation-management"
        		           title="Anticoagulation Management"><span
        		                  class="text-indent_n1 inline-block m-l_4">Anticoagulation
        		                Management</span></a>
        		    </li>
        		    <li class="m-b_2">
        		        <div
        		             class="flex justify_start transition_4 dropdown-item link">
        		            <button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        		                    data-bs-toggle="collapse"
        		                    role="button"
        		                    aria-expanded="true"
        		                    aria-controls="learningCollapse"
        		                    data-bs-target="#learningCollapse"
        		                    onclick="event.stopPropagation()">
        		                <i
        		                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        		            </button>
        		            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        		               href="#">Online Learning Catalog</a>
        		        </div>
        		        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        		            id="learningCollapse">
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/earncredit"><span
        		                          class="text-indent_n1 inline-block m-l_5">Earn
        		                        Credit</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/board-prep-offerings"
        		                   title="Board Prep Offerings"><span
        		                          class="text-indent_n1 inline-block m-l_5">Board
        		                        Prep Offerings</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/education-catalog"><span
        		                          class="text-indent_n1 inline-block m-l_5">View
        		                        the Entire Catalog</span></a>
        		            </li>
        		        </ul>
        		    </li>
        		    <li class="m-b_2">
        		        <div
        		             class="flex justify_start transition_4 dropdown-item link">
        		            <a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        		                    data-bs-toggle="collapse"
        		                    role="button"
        		                    aria-expanded="true"
        		                    aria-controls="productsCollapse"
        		                    data-bs-target="#productsCollapse"
        		                    onclick="event.stopPropagation()">
        		                <i
        		                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        		            </a>
        		            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        		               href="/education-and-meetings/education-catalog">Products</a>
        		        </div>
        		        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        		            id="productsCollapse">
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/accsap"><span
        		                          class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/accel-audio"><span
        		                          class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
        		                          class="text-indent_n1 inline-block m-l_5">CardioSource
        		                        Plus for Institutions and
        		                        Practices</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/cathsap"><span
        		                          class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
        		                   title="ECG Drill and Practice"><span
        		                          class="text-indent_n1 inline-block m-l_5">ECG
        		                        Drill and Practice</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/echosap"><span
        		                          class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/epsap"><span
        		                          class="text-indent_n1 inline-block m-l_5">EP
        		                        SAP</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/heart-songs-5"><span
        		                          class="text-indent_n1 inline-block m-l_5">Heart
        		                        Songs</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/iscience"><span
        		                          class="text-indent_n1 inline-block m-l_5">iScience</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
        		                          class="text-indent_n1 inline-block m-l_5">Nuclear
        		                        Cardiology and Cardiac CT Meeting on
        		                        Demand</span></a>
        		            </li>
        		            <li class="">
        		                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        		                   href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
        		                          class="text-indent_n1 inline-block m-l_5">RightSTEPS
        		                        Optimizing Medical Therapy for
        		                        Chronic Heart
        		                        Failure</span></a>
        		            </li>
        		        </ul>
        		    </li>
        		</ul>	</div>
        </div>
        Copy Code
        <div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
        	<div class="p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md">
        				<ul class="ul_none lh_2">
        					<li class="relative m-x_2:md m-x_3">
        						<a
        							href="http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133"
        							target="_blank"
        							class="transition_1 h:opacity opacity_8"
        							><img
        								src="https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png"
        								alt="QII" class="w_100 max-w_20"
        						/></a>
        					</li>
        					<li class="relative m-x_2:md m-x_3">
        						<a href="http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133" target="_blank" class="transition_1 h:opacity opacity_8"><img src="https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png" alt="NCDR" class="w_100 max-w_20"></a>
        					</li>
        				</ul>	</div>
        	<div
        		class="p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md"
        	>
        			<ul class="ul_none lh_2"
        			    id="SubLinkCollapseParent">
        			    <li class="m-b_2">
        			        <a class="dropdown-item link transition_4 wrap"
        			           href="/clinical-topics/acute-coronary-syndromes"><span
        			                  class="text-indent_n1 inline-block m-l_4">Acute
        			                Coronary Syndromes</span></span></a>
        			    </li>
        			    <li class="m-b_2">
        			        <a class="dropdown-item link transition_4 wrap"
        			           href="/clinical-topics/anticoagulation-management"
        			           title="Anticoagulation Management"><span
        			                  class="text-indent_n1 inline-block m-l_4">Anticoagulation
        			                Management</span></a>
        			    </li>
        			    <li class="m-b_2">
        			        <div
        			             class="flex justify_start transition_4 dropdown-item link">
        			            <button class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        			                    data-bs-toggle="collapse"
        			                    role="button"
        			                    aria-expanded="true"
        			                    aria-controls="learningCollapse"
        			                    data-bs-target="#learningCollapse"
        			                    onclick="event.stopPropagation()">
        			                <i
        			                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        			            </button>
        			            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        			               href="#">Online Learning Catalog</a>
        			        </div>
        			        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        			            id="learningCollapse">
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/earncredit"><span
        			                          class="text-indent_n1 inline-block m-l_5">Earn
        			                        Credit</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/board-prep-offerings"
        			                   title="Board Prep Offerings"><span
        			                          class="text-indent_n1 inline-block m-l_5">Board
        			                        Prep Offerings</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/education-catalog"><span
        			                          class="text-indent_n1 inline-block m-l_5">View
        			                        the Entire Catalog</span></a>
        			            </li>
        			        </ul>
        			    </li>
        			    <li class="m-b_2">
        			        <div
        			             class="flex justify_start transition_4 dropdown-item link">
        			            <a class="flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg"
        			                    data-bs-toggle="collapse"
        			                    role="button"
        			                    aria-expanded="true"
        			                    aria-controls="productsCollapse"
        			                    data-bs-target="#productsCollapse"
        			                    onclick="event.stopPropagation()">
        			                <i
        			                   class="far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2"></i>
        			            </a>
        			            <a class="flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3"
        			               href="/education-and-meetings/education-catalog">Products</a>
        			        </div>
        			        <ul class="ul_none lh_3 font-size_down collapse transition_4 block:lg"
        			            id="productsCollapse">
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/accsap"><span
        			                          class="text-indent_n1 inline-block m-l_5">ACCSAP</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/accel-audio"><span
        			                          class="text-indent_n1 inline-block m-l_5">ACCEL</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/cardiosource-plus"><span
        			                          class="text-indent_n1 inline-block m-l_5">CardioSource
        			                        Plus for Institutions and
        			                        Practices</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/cathsap"><span
        			                          class="text-indent_n1 inline-block m-l_5">CathSAP</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/ecg-drill-and-practice"
        			                   title="ECG Drill and Practice"><span
        			                          class="text-indent_n1 inline-block m-l_5">ECG
        			                        Drill and Practice</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/echosap"><span
        			                          class="text-indent_n1 inline-block m-l_5">EchoSAP</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/epsap"><span
        			                          class="text-indent_n1 inline-block m-l_5">EP
        			                        SAP</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/heart-songs-5"><span
        			                          class="text-indent_n1 inline-block m-l_5">Heart
        			                        Songs</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/iscience"><span
        			                          class="text-indent_n1 inline-block m-l_5">iScience</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod"><span
        			                          class="text-indent_n1 inline-block m-l_5">Nuclear
        			                        Cardiology and Cardiac CT Meeting on
        			                        Demand</span></a>
        			            </li>
        			            <li class="">
        			                <a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5"
        			                   href="/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure"><span
        			                          class="text-indent_n1 inline-block m-l_5">RightSTEPS
        			                        Optimizing Medical Therapy for
        			                        Chronic Heart
        			                        Failure</span></a>
        			            </li>
        			        </ul>
        			    </li>
        			</ul>	</div>
        </div>
        Copy Code

        Source: dist/css/acc_boot.css, line 12922

        4.5.1.5 Login Nav

        The ACC.org Nav has a shade nav that houses the login and profile nav with a shade color. To make sure it doesn't resize when the main nav expands the login nav needs to be placed absolutely.

        <nav class="font_1 absolute bg_primary br-t_1 br_primary br_solid br_none flex_shrink font_0 font_0:lg m-l_auto navbar navbar-dark navbar-expand p-y_2 r_0 t_0 b_0:lg relative:lg" >
        	<ul class="navbar-nav">
        		<li class="nav-item relative flex_shrink dropdown">
        			<a class="nav-link expanded-click-area [a:c_white] h:c_white nowrap"
        				 role="button"
        				 id="dropdownMyACC"
        				 data-bs-toggle="dropdown"
        				 aria-expanded="false"
        				>My ACC <i class="far icon-toggle_chevron-up-down"></i></a>
        			<div
        			class="dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg m-t_0 m-t_2:lg font_0" aria-labelledby="dropdownMyACC"
        			>
        				<div class="flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg">
        					<div class="p-x_2 p-y_0 dropdown_column">
        						<ul class="ul_none lh_2 m_0">
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-profile">My Profile</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-training-program">My Training Programs</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-membership">My Membership</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-library">My Library</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/dashboard">My Learning Dashboard</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="http://edu.acc.org/diweb/grades">My Transcript</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/ncdr-physician-dashboard">NCDR Physician Dashboard</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-communication-preferences">My Communication Preferences</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="https://memberhub.acc.org/">ACC Member Hub</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/my-purchase-history">My Purchases</a>
        							</li>
        							<li>
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/my-acc/personalization">Personalize ACC.org</a>
        							</li>
        							<div class="dropdown-divider m-y_3"></div>
        							<li class="">
        								<a class="dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2" href="/RemoteLogOff"> Logout</a>
        							</li>
        						</ul>
        					</div>
        				</div>
        			</div>
        		</li>
        		<li class="nav-item">
        			<a class=" nav-link nowrap" href="#"><i class="far fa-shopping-cart"></i></a>
        		</li>
        		<!--<li class="nav-item">
        			<a class=" nav-link nowrap" href="#"><i class="fas fa-sign-out-alt"></i></a>
        		</li>-->
        		<!--<li class="nav-item">
        			<a href="@loginlink" class="nav-link nowrap"><i class="fas fa-sign-in-alt"></i> Log in to MyACC </a>
        		</li>-->
        	</ul>
        </nav>
        Copy Code

        Source: dist/css/acc_boot.css, line 7884

        4.5.2 Toggle

        Toggle elements of a collapse with user feed back of the icon rotating.

        Example s

        #targetName

        the name of the target of the collapse

        <div class="flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
                <i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
        </div>
        Copy Code

        Example s

        #targetName

        the name of the target of the collapse

        <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
                <span class="fa-stack">
                <i class="fas fa-minus fa-stack-1x"></i>
                <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                </span>
        </div>
        Copy Code

        Example s

        #targetName

        the name of the target of the collapse

        <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]">
                <span class="fa-stack">
                <i class="fas fa-square fa-stack-2x"></i>
                <i class="fas fa-minus fa-stack-1x c_white"></i>
                <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white"></i>
                </span>
        </div>
        Copy Code

        Source: dist/css/acc_boot.css, line 7902

        4.5.2.3 Toggle Chevron

        Toggle elements of a collapse with user feed back of the icon rotating.

        Example s

        #targetName

        the name of the target of the collapse

        <div class="a:bg_black-3 h:bg_black-4 flex_none p_2" data-bs-toggle="collapse" data-bs-target="[modifier class]" aria-controls="[modifier class]" aria-expanded="true">
                <i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
        </div>
        Copy Code

        Source: dist/css/acc_boot.css, line 7849

        4.5.2.4 Bootstrap Toggle Rotation

        The toggles for bootstrap collapses use a + icon that twists to an x when the elements doesn't have collapsed or show as a class. to reduce confusion the class has a set rotation and speed attached to it. a:rotation is applied to the tow specific icons fa-times and fa-chevron-up only.

        These classes are effected by the parent having collapsed state.

        Example s

        expanded

        when the associated content is expanded the toggle will look like this

        collapsed

        when the associated content is collapsed the class is added to the toggle and it will look like this.

        <div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                <i class="a:rotation c_primary fa-fw fa-times fas self_center text_center"></i>
        </div>
        <div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                <i class="a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center"></i>
        </div>
        <div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                <span class="fa-stack fa-2x">
                <i class="fas fa-minus fa-stack-1x"></i>
                <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                </span>
        </div>
        <div class="flex_none p_2 [modifier class]" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                <span class="fa-stack fa-2x">
                <i class="fas fa-square fa-stack-2x c_black"></i>
                <i class="fas fa-minus fa-stack-1x c_white"></i>
                <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white"></i>
                </span>
        </div>
        Copy Code

        Source: dist/css/acc_boot.css, line 8459

        4.5.3 Page Hub

        A collection of links that collapses the children of the nav item.

        Example

        Default styling

        NOTE:
        Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
        <nav class="flex flex_row:md flex_column gap-x_4 gap-y_4 gap_4">
            <div class="flex flex_column gap-y_4 flex_none:md w_50:md">
            <ul class="c_primary font_copy ul_none font_1">
                <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                          <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                            <div class="flex_none" >
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                            <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                                <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                            </div>
                                        </div>
                                    </li>                    </ul>
                            </nav>
                        </div>
                    </div>
                </li>
            </ul>    <ul class="c_primary font_copy ul_none font_1">
                <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                          <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                            <div class="flex_none" >
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                            <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                                <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                            </div>
                                        </div>
                                    </li>                    </ul>
                            </nav>
                        </div>
                    </div>
                </li>
            </ul>    <ul class="c_primary font_copy ul_none font_1">
                <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                          <div class="opacity_0 flex flex_column flex_none font-size_down p-y_2 justify_start" aria-expanded="false">
                            <div class="flex_none " >
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                        </div>
                    </div>
                </li>
            </ul>    <ul class="c_primary font_copy ul_none font_1">
                <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                          <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                            <div class="flex_none" >
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                            <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                                <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                            </div>
                                        </div>
                                    </li>                    </ul>
                            </nav>
                        </div>
                    </div>
                </li>
            </ul>    </div>
            <div class="flex flex_column gap-y_4 flex_none:md w_50:md">
            <ul class="c_primary font_copy ul_none font_1">
                <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                          <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                            <div class="flex_none" >
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                            <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                                <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                            </div>
                                        </div>
                                    </li>                    </ul>
                            </nav>
                        </div>
                    </div>
                </li>
            </ul>    <ul class="c_primary font_copy ul_none font_1">
                <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                          <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                            <div class="flex_none" >
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                            <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                                <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                            </div>
                                        </div>
                                    </li>                    </ul>
                            </nav>
                        </div>
                    </div>
                </li>
            </ul>    <ul class="c_primary font_copy ul_none font_1">
                <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                          <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                            <div class="flex_none" >
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                            <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                                <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                            </div>
                                        </div>
                                    </li>                        <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex_auto self_center p-l_3">
                                                <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                            </div>
                                        </div>
                                    </li>                    </ul>
                            </nav>
                        </div>
                    </div>
                </li>
            </ul>    </div>
        </nav>
        Copy Code

        Source: dist/css/acc_boot.css, line 8516

        4.5.3.2 Page Hub Group

        A collection of links that collapses the children of the nav item.

        NOTE:
        Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
        <ul class="c_primary font_copy ul_none font_1">
            <li class="nav-item active" data-nav="child">
                <div class="flex flex_row">
                      <div class="flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed" aria-expanded="false" data-bs-toggle="collapse" data-bs-target="#pageHubChild" aria-controls="#pageHubChild">
                        <div class="flex_none" >
                                <span class="fa-stack">
                                <i class="fas fa-minus fa-stack-1x"></i>
                                <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                </span>
                        </div>
                    </div>
                    <div class="flex_auto self_center">
                        <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                        <nav class="nav-sub-child font-size_down collapse " id="pageHubChild">
                            <ul class="ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1">
                                <li class="nav-item" data-nav="child">
                                    <div class="flex flex_row">
                                        <div class="flex_auto self_center p-l_3">
                                            <a class="c_primary h:c_primary-n2 h:underline link self_center ">Child Link</a>
                                        </div>
                                    </div>
                                </li>                        <li class="nav-item" data-nav="child">
                                    <div class="flex flex_row">
                                        <div class="flex_auto self_center p-l_3">
                                            <a class="c_primary h:c_primary-n2 h:underline link self_center ">Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. </a>
                                        </div>
                                    </div>
                                </li>                        <li class="nav-item" data-nav="child">
                                    <div class="flex flex_row">
                                        <div class="flex_auto self_center p-l_3">
                                            <a class="c_primary h:c_primary-n2 h:underline link self_center ">Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.</a>
                                        </div>
                                    </div>
                                </li>                        <li class="nav-item" data-nav="child">
                                    <div class="flex flex_row">
                                        <div class="flex_auto self_center p-l_3">
                                            <a class="c_primary h:c_primary-n2 h:underline link self_center "> Est dolor recusandae aut exercitationem occaecati deleniti.</a>
                                        </div>
                                    </div>
                                </li>                    </ul>
                        </nav>
                    </div>
                </div>
            </li>
        </ul>
        Copy Code

        Source: dist/css/acc_boot.css, line 8486

        4.5.3.3 Page Hub Single

        A collection of links that collapses the children of the nav item.

        NOTE:
        Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
        <ul class="c_primary font_copy ul_none font_1">
            <li class="nav-item active" data-nav="child">
                <div class="flex flex_row">
                      <div class="opacity_0 flex flex_column flex_none font-size_down p-y_2 justify_start" aria-expanded="false">
                        <div class="flex_none " >
                                <span class="fa-stack">
                                <i class="fas fa-minus fa-stack-1x"></i>
                                <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                </span>
                        </div>
                    </div>
                    <div class="flex_auto self_center">
                        <a class="active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3">Parent Nav</a>
                    </div>
                </div>
            </li>
        </ul>
        Copy Code

        Source: dist/css/acc_boot.css, line 7649

        4.5.5 Sidebar Nav

        Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.

        NOTE:
        Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
        <nav class="nav-sub bg_primary c_white font_2 font_ui ">
            <ul class="ul_none flex_column flex">
                <li class="nav-item font-size_up" data-nav="parent">
                    <div class="bg_black-4 ">
                        <a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
                    </div>
                </li>        <li class="nav-item " data-nav="child">
                    <div class="flex flex_row">
                        <div class="flex flex_column flex_none justify_start">
                            <div class="flex_none">
                                <span class="fa-stack">
                                    <i class="fas fa-spacer fa-stack-1x"></i>
                                </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                        </div>
                    </div>
                </li>        <li class="nav-item " data-nav="child">
                    <div class="flex flex_row">
                        <div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div></div>        <div class="flex_auto self_center">
                            <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                            <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
                                <ul class="ul_none flex_column flex">
                                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                </ul>
                            </nav>
                        </div>
                    </div>
                </li>        <li class="nav-item " data-nav="child">
                    <div class="flex flex_row">
                        <div class="flex flex_column flex_none justify_start">
                            <div class="flex_none">
                                <span class="fa-stack">
                                    <i class="fas fa-spacer fa-stack-1x"></i>
                                </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                        </div>
                    </div>
                </li>        <li class="nav-item " data-nav="child">
                    <div class="flex flex_row">
                        <div class="flex flex_column flex_none justify_start">
                            <div class="flex_none">
                                <span class="fa-stack">
                                    <i class="fas fa-spacer fa-stack-1x"></i>
                                </span>
                            </div>
                        </div>
                        <div class="flex_auto self_center">
                            <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                        </div>
                    </div>
                </li>        <li class="nav-item active" data-nav="child">
                    <div class="flex flex_row">
                        <div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                                    <span class="fa-stack">
                                    <i class="fas fa-minus fa-stack-1x"></i>
                                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                            </div></div>        <div class="flex_auto self_center">
                            <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                            <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
                                <ul class="ul_none flex_column flex">
                                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                    <li class="nav-item " data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none">
                                                    <span class="fa-stack">
                                                        <i class="fas fa-spacer fa-stack-1x"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                            </div>
                                        </div>
                                    </li>                    <li class="nav-item  active " data-nav="grandchild">
                                        <div class="flex flex_row">
                                            <div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                                                <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                                                        <span class="fa-stack">
                                                        <i class="fas fa-minus fa-stack-1x"></i>
                                                        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                                        </span>
                                                </div></div>                            <div class="flex_auto self_center">
                                                <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                                                <nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
                                                    <ul class="ul_none flex_column flex">
                                                        <li class="nav-item  " data-nav="greatGrandChild">
                                                            <div class="flex flex_row">
                                                                <div class="flex_auto self_center">
                                                                    <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                                </div>
                                                            </div>
                                                        </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                                            <div class="flex flex_row">
                                                                <div class="flex_auto self_center">
                                                                    <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                                </div>
                                                            </div>
                                                        </li>                                        <li class="nav-item active " data-nav="greatGrandChild">
                                                            <div class="flex flex_row">
                                                                <div class="flex_auto self_center">
                                                                    <a class=" active text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                                </div>
                                                            </div>
                                                        </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                                            <div class="flex flex_row">
                                                                <div class="flex_auto self_center">
                                                                    <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                                </div>
                                                            </div>
                                                        </li>                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </li>    </ul>
        </nav>
        Copy Code

        Source: dist/css/acc_boot.css, line 7676

        4.5.5.1 Parent NavItem

        Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.

        <li class="nav-item font-size_up" data-nav="parent">
            <div class="bg_black-4 ">
                <a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
            </div>
        </li>
        Copy Code

        Source: dist/css/acc_boot.css, line 7724

        4.5.5.2 Toggle Child

        Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.

        Example s

        default

        the toggle when it doesn't have an active class still shades on hover

        active

        shade the toggle

        NOTE:
        Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
        <div class="[modifier class] br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                    <span class="fa-stack">
                    <i class="fas fa-minus fa-stack-1x"></i>
                    <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                    </span>
            </div></div>
        Copy Code

        Source: dist/css/acc_boot.css, line 7694

        4.5.5.3 Child NavItem

        Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.

        Example s

        active

        Nav Item changes its decoration if this the page the user is on.

        <li class="nav-item [modifier class]" data-nav="child">
            <div class="flex flex_row">
                <div class="flex flex_column flex_none justify_start">
                    <div class="flex_none">
                        <span class="fa-stack">
                            <i class="fas fa-spacer fa-stack-1x"></i>
                        </span>
                    </div>
                </div>
                <div class="flex_auto self_center">
                    <a class="text-shadow_black-1 [modifier class] c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                </div>
            </div>
        </li>
        Copy Code

        Source: dist/css/acc_boot.css, line 7746

        4.5.5.4 Child NavItem With Children

        Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.

        NOTE:
        Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
        <li class="nav-item " data-nav="child">
            <div class="flex flex_row">
                <div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                    <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div></div>        <div class="flex_auto self_center">
                    <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                    <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
                        <ul class="ul_none flex_column flex">
                            <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                    <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                    <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                    <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                </ul>
                    </nav>
                </div>
            </div>
        </li>
        Copy Code

        Source: dist/css/acc_boot.css, line 7779

        4.5.5.5 Child NavItem With Grand Children

        Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.

        NOTE:
        Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
        <li class="nav-item active" data-nav="child">
            <div class="flex flex_row">
                <div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                    <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                            <span class="fa-stack">
                            <i class="fas fa-minus fa-stack-1x"></i>
                            <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                            </span>
                    </div></div>        <div class="flex_auto self_center">
                    <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                    <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
                        <ul class="ul_none flex_column flex">
                            <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                    <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                    <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                    <li class="nav-item " data-nav="child">
                                <div class="flex flex_row">
                                    <div class="flex flex_column flex_none justify_start">
                                        <div class="flex_none">
                                            <span class="fa-stack">
                                                <i class="fas fa-spacer fa-stack-1x"></i>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1  c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child Link</a>
                                    </div>
                                </div>
                            </li>                    <li class="nav-item  active " data-nav="grandchild">
                                <div class="flex flex_row">
                                    <div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                                        <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
                                                <span class="fa-stack">
                                                <i class="fas fa-minus fa-stack-1x"></i>
                                                <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                                </span>
                                        </div></div>                            <div class="flex_auto self_center">
                                        <a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3">Child with Children Links</a>
                                        <nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
                                            <ul class="ul_none flex_column flex">
                                                <li class="nav-item  " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                        <li class="nav-item active " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class=" active text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                        <li class="nav-item  " data-nav="greatGrandChild">
                                                    <div class="flex flex_row">
                                                        <div class="flex_auto self_center">
                                                            <a class="  text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                                                        </div>
                                                    </div>
                                                </li>                                    </ul>
                                        </nav>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </li>
        Copy Code

        Source: dist/css/acc_boot.css, line 7826

        4.5.5.6 Great Grandchild NavItem

        Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.

        <li class="nav-item [modifier class] " data-nav="greatGrandChild">
            <div class="flex flex_row">
                <div class="flex_auto self_center">
                    <a class=" [modifier class] text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
                </div>
            </div>
        </li>
        Copy Code

        Source: dist/css/acc_boot.css, line 13771

        4.6.1 Page Layout

        Descripition:

        1. Overall Structure:
          • Design the layout to incorporate columns for content and sidebars.
          • [sidebar] [content] [sidebar]
          • the parent uses `grid-template="page-layout"`
          • the children uses `grid-area="content|sidebar-primary|sidebar-secondary"`
        2. Column Configuration:
          • Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.
          • Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.
        3. Sidebar Specifications:
          • Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)
          • Sidebars do not respect the page margin but adhere to margins between themselves and content.
          • Sidebars placed on the edge will extend to the edge of the container.
            Responsive Design:
          • `Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.
          • `Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.
          • The sidebar widths are constant when aligned with the content and changes its width to the above content based on media breakpoints.
        4. Content Area:
          • Allocate remaining space on the page for the content area, respecting a page margin.

        Example

        Default styling

        Document(fullscreen)

        Document

        Content No Sidebars

        Content

        Content with Primary Sidebar

        sidebar primary
        content

        Content with Primary Sidebar - Reverse template-option="reverse"

        sidebar primary (reverse)
        content (reverse)

        Content with Secondary Sidebar

        sidebar secondary
        content

        Content with Secondary Sidebar - Reverse template-option="reverse"

        sidebar secondary
        content

        Both Sidebars

        sidebar secondary
        content center
        sidebar primary

        Both Sidebars

        sidebar secondary
        content center
        sidebar primary
        <h4>Document(fullscreen)</h4>
        <section grid-template="page-layout" >
            <div grid-area="fullscreen">Document</div>
        </section>
        <h4>Content No Sidebars</h4>
        <section grid-template="page-layout" >
            <div grid-area="content">Content</div>
        </section>
        <h4>Content with Primary Sidebar</h4>
        <section grid-template="page-layout" >
            <div grid-area="sidebar-primary">sidebar primary</div>
            <div grid-area="content">content</div>
        </section>
        <h4>Content with Primary Sidebar - Reverse <code>template-option="reverse"</code></h4>
        <section grid-template="page-layout" template-option="reverse" >
            <div grid-area="sidebar-primary">sidebar primary (reverse)</div>
            <div grid-area="content">content (reverse)</div>
        </section>
        <h4>Content with Secondary Sidebar</h4>
        <section grid-template="page-layout" >
            <div grid-area="sidebar-secondary">sidebar secondary</div>
            <div grid-area="content">content</div>
        </section>
        <h4>Content with Secondary Sidebar - Reverse <code>template-option="reverse"</code></h4>
        <section grid-template="page-layout" template-option="reverse" >
            <div grid-area="sidebar-secondary">sidebar secondary</div>
            <div grid-area="content">content</div>
        </section>
        <h4>Both Sidebars</h4>
        <section grid-template="page-layout" >
            <div grid-area="sidebar-secondary">sidebar secondary</div>
            <div grid-area="content">content center</div>
            <div grid-area="sidebar-primary">sidebar primary</div>
        </section>
        <h4>Both Sidebars</h4>
        <section grid-template="page-layout" template-option="reverse" >
            <div grid-area="sidebar-secondary">sidebar secondary</div>
            <div grid-area="content">content center</div>
            <div grid-area="sidebar-primary">sidebar primary</div>
        </section>
        <!-- Needed for Style Guide Only -->
        <style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
        .space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
        .colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
        .colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
        .colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
        .colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
        </style>
        <!-- Needed for Style Guide Only -->
        Copy Code

        Example

        Default styling

        Clinical Trials Research Pathway

        The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles. ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop instrumental roles, including clinical research coordinator, investigator and principle investigators.

        The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150 learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and funding opportunities in clinical trials research.

        Education

        ACC Award Opportunities

        Publications & Articles


        Explore Cardiovascular Pathways:Physician|CV Team|Clinical Trials Research

        advertisment
        <div grid-template="page-layout">
            <main grid-area="content" class="reading-typography">
                <h1 id="clinical-trials-research-pathway">Clinical Trials Research Pathway</h1>
                <p>The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles.
                    ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop
                    instrumental roles, including clinical research coordinator, investigator and principle investigators.</p>
                <p>The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical
                    Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150
                    learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and
                    funding opportunities in clinical trials research.</p>
                <h3 id="education">Education</h3>
                <ul>
                    <li><a href="#">Webinar: ACC Research, Clinical Trials and Publishing Series</a></li>
                    <li><a href="#">Live Education: How to Become a CV Investigator</a></li>
                    <li><a href="#">Live Education: Clinical Trials Research: Upping Your Game Program</a></li>
                </ul>
                <h3 id="acc-award-opportunities">ACC Award Opportunities</h3>
                <ul>
                    <li><a href="#">Douglas P. Zipes Distinguished Young Scientist Award</a></li>
                    <li><a href="#">Young Investigator Awards at ACC.23/WCC</a></li>
                    <li><a href="#">ACC/ABC Merck Research Fellowship Awards</a></li>
                    <li><a href="#">ACC/ABC Bristol Myers Squibb Research Fellowship Awards</a></li>
                </ul>
                <h3 id="publications--articles">Publications &amp; Articles</h3>
                <ul>
                    <li><a href="#">Gender Diversity in Cardiovascular Trial Research Begins at the Top (JACC)</a></li>
                    <li><a href="#">Clinical Research in a Big Data, High-Tech World (Cardiology)</a></li>
                </ul>
                <hr>
                <p><strong>Explore Cardiovascular Pathways:</strong><a href="../CardiologyCareers_Physician/">Physician</a><code
                        class="language-plaintext highlighter-rouge">|</code><a href="../CardiologyCareers_CVTeam/">CV
                        Team</a><code class="language-plaintext highlighter-rouge">|</code><a
                        href="../CardiologyCareers_ClinicalTrial/">Clinical Trials Research</a></p>
            </main>
            <section grid-area="sidebar-primary">
                <nav class="nav-sub bg_primary c_white font_2 font_ui">
                    <ul class="ul_none flex_column flex">
                        <li class="nav-item font-size_up" data-nav="parent">
                            <div class="bg_black-4"><a href="../CardiologyCareers"
                                    class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">A
                                    Career in Cardiology</a></div>
                        </li>
                        <li class="nav-item" data-nav="child">
                            <div class="flex flex_row">
                                <div
                                    class="br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                                    <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse"
                                        data-bs-target=".howToStart" aria-controls=".howToStart"><span class="fa-stack"><i
                                                class="fas fa-minus fa-stack-1x" aria-hidden="true"></i><i
                                                class="fas fa-minus rotate_90 a:rotation fa-stack-1x"
                                                aria-hidden="true"></i></span></div>
                                </div>
                                <div class="flex_auto self_center"><a href="../CardiologyCareers_Start/"
                                        class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">How
                                        to Start</a>
                                    <nav class="nav-sub-child bg_white-2 font-size_down collapse howToStart show">
                                        <ul class="ul_none flex_column flex">
                                            <li class="nav-item" data-nav="child">
                                                <div class="flex flex_row">
                                                    <div class="flex flex_column flex_none justify_start">
                                                        <div class="flex_none"><span class="fa-stack"><i
                                                                    class="fas fa-spacer fa-stack-1x"
                                                                    aria-hidden="true"></i></span></div>
                                                    </div>
                                                    <div class="flex_auto self_center"><a href="../CardiologyCareers_Physician/"
                                                            class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Physician
                                                            Pathway</a></div>
                                                </div>
                                            </li>
                                            <li class="nav-item" data-nav="child">
                                                <div class="flex flex_row">
                                                    <div class="flex flex_column flex_none justify_start">
                                                        <div class="flex_none"><span class="fa-stack"><i
                                                                    class="fas fa-spacer fa-stack-1x"
                                                                    aria-hidden="true"></i></span></div>
                                                    </div>
                                                    <div class="flex_auto self_center"><a href="../CardiologyCareers_CVTeam/"
                                                            class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">CV
                                                            Team Pathway</a></div>
                                                </div>
                                            </li>
                                            <li class="nav-item" data-nav="child">
                                                <div class="flex flex_row">
                                                    <div class="flex flex_column flex_none justify_start">
                                                        <div class="flex_none"><span class="fa-stack"><i
                                                                    class="fas fa-spacer fa-stack-1x"
                                                                    aria-hidden="true"></i></span></div>
                                                    </div>
                                                    <div class="flex_auto self_center"><a
                                                            href="../CardiologyCareers_ClinicalTrial/"
                                                            class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Clinical
                                                            Trial Pathway</a></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item" data-nav="child">
                            <div class="flex flex_row">
                                <div class="flex flex_column flex_none justify_start">
                                    <div class="flex_none"><span class="fa-stack"><i class="fas fa-spacer fa-stack-1x"
                                                aria-hidden="true"></i></span></div>
                                </div>
                                <div class="flex_auto self_center"><a href="../CardiologyCareers_Development"
                                        class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Development
                                        &amp; Leadership Programs</a></div>
                            </div>
                        </li>
                        <li class="nav-item" data-nav="child">
                            <div class="flex flex_row">
                                <div
                                    class="br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                                    <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse"
                                        data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse"><span
                                            class="fa-stack"><i class="fas fa-minus fa-stack-1x" aria-hidden="true"></i><i
                                                class="fas fa-minus rotate_90 a:rotation fa-stack-1x"
                                                aria-hidden="true"></i></span></div>
                                </div>
                                <div class="flex_auto self_center"><a
                                        class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Resources</a>
                                    <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
                                        <ul class="ul_none flex_column flex">
                                            <li class="nav-item" data-nav="child">
                                                <div class="flex flex_row">
                                                    <div class="flex flex_column flex_none justify_start">
                                                        <div class="flex_none"><span class="fa-stack"><i
                                                                    class="fas fa-spacer fa-stack-1x"
                                                                    aria-hidden="true"></i></span></div>
                                                    </div>
                                                    <div class="flex_auto self_center"><a href="../CardiologyCareers_Gallery/"
                                                            class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Video
                                                            Gallery</a></div>
                                                </div>
                                            </li>
                                            <li class="nav-item" data-nav="child">
                                                <div class="flex flex_row">
                                                    <div class="flex flex_column flex_none justify_start">
                                                        <div class="flex_none"><span class="fa-stack"><i
                                                                    class="fas fa-spacer fa-stack-1x"
                                                                    aria-hidden="true"></i></span></div>
                                                    </div>
                                                    <div class="flex_auto self_center"><a
                                                            href="../CardiologyCareers_PersonalStory/"
                                                            class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Personal
                                                            Stories</a></div>
                                                </div>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item" data-nav="child">
                            <div class="flex flex_row">
                                <div class="flex flex_column flex_none justify_start">
                                    <div class="flex_none"><span class="fa-stack"><i class="fas fa-spacer fa-stack-1x"
                                                aria-hidden="true"></i></span></div>
                                </div>
                                <div class="flex_auto self_center"><a href="../CardiologyCareers_ContactUs"
                                        class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Contact
                                        Us</a></div>
                            </div>
                        </li>
                    </ul>
                </nav>
                <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
                    <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
                    <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"></a>
                    </div>
                    <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
                    </div>
            </section>
            <div grid-area="sidebar-secondary" zone-label="sidebar" class="columns-max_20 grid flex:md flex_column gap_4">
                <aside class="suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative reading-typography">
                    <h2 class="c_primary font_1 font_bold relative t_n4 m-b_4 text_center"><span class="bg_white p-x_3">Related
                            Content</span></h2>
                    <ul class="font-size_down-1 m-t_n4 ul_none">
                        <li class="m-b_4"><a href="/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar">Rosuvastatin
                                vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>
                        <li class="m-b_4"><a href="/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline">New
                                in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society
                                Guideline</a></li>
                        <li class="m-b_4"><a href="/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd">2023
                                Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>
                    </ul>
                </aside>
                <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
                <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
                <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"></a>
                </div>
                <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
                </div>
                <aside id="recommended-for-you" class="tabgroup br_1 br_solid br_black-6 m-b_4 p-x_3 relative">
                    <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Recommended Content for You</span></h2>
                    <div class="tab-content authenticated-nothing-selected active">
                        <article class="article-recommended-tease flex font_unset">
                            <div class="main-image"><img src="https://picsum.photos/53/53"></div>
                            <div class="article-content p-l_3 font-size_down-2">
                                <p class="font-size_up-1">Looking for content tailored to your interests?</p>
                                <p><a href="/My-ACC/My-Profile#ClinicalTopics">Add some topics</a>to receive personalized
                                    recommendations.</p>
                            </div>
                        </article>
                    </div>
                </aside>
                <aside class="suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative">
                    <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Similar
                            Articles from ACC.org</span></h2>
                    <ul class="CoveoResultList font-size_down-1 m-t_n4 ul_none" data-layout="list" data-wait-animation="fade" data-enable-infinite-scroll="false">
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Feb 06, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024">ACCEL Lite:
                                    Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 23, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024">ACCEL Lite: AHA
                                    Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity
                                    Who Do Not Have Diabetes</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 16, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024">ACCEL Lite: From
                                    JACC: Managing Patients with Moderate Aortic Stenosis</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 09, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024">ACCEL Lite: Top
                                    Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 03, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024">ACCEL Lite:
                                    Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>
                            <div>&nbsp;</div>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>
        <!-- Needed for Style Guide Only -->
        <style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
        .space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
        .colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
        .colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
        .colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
        .colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
        </style>
        <!-- Needed for Style Guide Only -->
        Copy Code

        Example

        Default styling

        ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the Practicing Clinician

        To improve our understanding of the basic principles in the treatment and management of patients with chronic heart disease, in this interview, Salim S. Virani, MD, PhD, FACC, and Roger S. Blumenthal, MD, FACC, discuss top takeaways from the ACC 2023 Guideline for Chronic CAD.

        Related References:

        1. Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer, L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S., Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A. M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for the Management of Patients With Chronic Coronary Disease: A Report of the American Heart Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines. Journal of the American College of Cardiology, 82(9), 833–955. https://doi.org/10.1016/j.jacc.2023.04.003

        Clinical Topics:Acute Coronary Syndromes, Dyslipidemia, Invasive Cardiovascular Angiography and Intervention

        Keywords:ACCELLite, Statins


        < Back to Listings
        <div grid-template="page-layout">
            <article grid-area="content" id="archesArticle" class="reading-typography">
                <h1>ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the
                    Practicing Clinician</h1>
                <div class="article-meta">
                    <p class="date m-y_2 font_n1 font_medium">Feb 13, 2024 &nbsp;&nbsp;|&nbsp;&nbsp;<a
                            href="http://www.acc.org/Membership/Person?id=f57aa35c-1898-4282-9223-d3703d9ee35c">Alison
                            Bailey, MD, FACC</a>; <a
                            href="http://www.acc.org/Membership/Person?id=d49209b7-1a04-42c4-aed2-3a773acce82b">Salim S.
                            Virani, MD, FACC</a>; <a
                            href="http://www.acc.org/Membership/Person?id=0e80b517-78fe-4960-9a3e-6a54fcb201f6">Roger S.
                            Blumenthal, MD, FACC</a></p>
                    <h5 class="m-y_0 font_bold" style="clear: left;">Podcast</h5>
                   <div class="flex flex_auto flex_row items_center p-t_0:md p-x_4 bg_secondary-5">
                        <section class="font_n2 self_center social">
                            <ul class="flex items_center m_0 social-bar ul_none">
                                <li class="flex_shrink m_0"><a class="bg_shade-4 font-size_down-1 block c_shade-n2 font-size_down h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0 twitter"><i class="fab fa-square-x-twitter" aria-hidden="true"></i></a></li>
                                <li class="flex_shrink"><a class="facebook c_shade-n2 bg_shade-4 font-size_down-1 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" aria-hidden="true"></i></a></li>
                                <li class="flex_shrink"><a class="linkedin c_shade-n2 bg_shade-4 font-size_down-1 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" aria-hidden="true"></i></a></li>
                                <li class="flex_shrink"><a class="youtube c_shade-n2 bg_shade-4 font-size_down-1 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" aria-hidden="true"></i></a></li>
                                <li class="flex_shrink"><a class="google-play c_shade-n2 bg_shade-4 font-size_down-1 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" aria-hidden="true"></i></a></li>
                                <li class="flex_shrink"><a class="apple-store c_shade-n2 bg_shade-4 font-size_down-1 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" aria-hidden="true"></i></a></li>
                            </ul>
                        </section>
                            <div class="flex flex_auto self_center m-l_4">
                                <div id="print-page" class="c_primary cursor_pointer flex" onclick="window.print()" ontouchstart="window.print()"><span class="fa fa-print flex items_center m-r_2" aria-hidden="true"></span><span class="flex font_n2 items_center">Print</span></div>
                            </div>
                            <dl id="font-resizer" class="display_none flex:md items_baseline items_center m-y_0 p-t_1">
                                <dt class="font_n2 m-r_2">Font Size</dt>
                                <dd class="font_unset"><span onclick="changeFontSize('font_unset')" class="flex font_n3 m-b_n2 m-t_3 p-x_1 lh_4 cursor_pointer">A</span></dd>
                                <dd class="font-size_down"><span onclick="changeFontSize('font-size_down')" class="flex font_n1 m-t_3 p-x_1 lh_1 cursor_pointer">A</span></dd>
                                <dd class="font-size_up"><span onclick="changeFontSize('font-size_up')" class="flex font_1 m-t_2 p-x_1 lh_1 cursor_pointer">A</span></dd>
                            </dl>
                        </div>
                </div>
                <div class="the-text">
                    <div>
                        <p>To improve our understanding of the basic principles in the treatment and management of patients
                            with chronic heart disease, in this interview, <strong>Salim S. Virani, MD, PhD, FACC</strong>,
                            and <strong>Roger S. Blumenthal, MD, FACC</strong>, discuss top takeaways from the ACC 2023
                            Guideline for Chronic CAD. </p>
                        <h3>Related References:</h3>
                        <ol>
                            <li>Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer,
                                L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S.,
                                Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A.
                                M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for
                                the Management of Patients With Chronic Coronary Disease: A Report of the American Heart
                                Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines.
                                Journal of the American College of Cardiology, 82(9), 833–955. <a
                                    href="https://doi.org/10.1016/j.jacc.2023.04.003"
                                    target="_blank">https://doi.org/10.1016/j.jacc.2023.04.003</a></li>
                        </ol>
                        <div
                            class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
                            <audio class="w_100" controls="" id="html5_audio_jvtpc43x2e">
                                <source src="http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3"
                                    type="audio/mp3">
                                <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank"
                                        href="http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3">link to
                                        the audio</a>instead.</p>
                            </audio>
                            <div class="grid items_center justify_center"><a href="/Latest-in-Cardiology/Features/Podcasts"
                                    class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe to
                                    the ACCEL Lite Podcast</a></div>
                        </div>
                    </div>
                    <p class="topics-list font_n1"><b>Clinical Topics:</b><a
                            href="/Clinical-Topics/Acute-Coronary-Syndromes">Acute Coronary Syndromes, </a><a
                            href="/Clinical-Topics/Dyslipidemia">Dyslipidemia, </a><a
                            href="/Clinical-Topics/Invasive-Cardiovascular-Angiography-and-Intervention">Invasive
                            Cardiovascular Angiography and Intervention</a></p>
                    <p class="keywords-list font_n1"><b>Keywords:</b><i>ACCELLite, </i><i>Statins</i></p><br><a href="#"
                        id="backToListings" class="parent back-to-listing display_none:print">&lt; Back to Listings</a><br>
                </div>
            </article>
            <div grid-area="sidebar-secondary" zone-label="sidebar" class="columns-max_20 grid flex:md flex_column gap_4">
                <aside class="suggested-materials br_1 br_solid m-b_4 p-x_3 relative reading-typography">
                    <h2 class="c_primary font_1 font_bold relative t_n4 m-b_4 text_center"><span class="bg_white p-x_3">Related
                            Content</span></h2>
                    <ul class="font-size_down-1 m-t_n4 ul_none">
                        <li class="m-b_4"><a href="/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar">Rosuvastatin
                                vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>
                        <li class="m-b_4"><a
                                href="/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline">New
                                in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society
                                Guideline</a></li>
                        <li class="m-b_4"><a
                                href="/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd">2023
                                Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>
                    </ul>
                </aside>
                <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
                <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
                <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"/></a>
                </div>
                <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
                </div>
                <aside id="recommended-for-you" class="tabgroup br_1 br_solid m-b_4 p-x_3 relative">
                    <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span
                            class="bg_white p-x_2">Recommended Content for You</span></h2>
                    <div class="tab-content authenticated-nothing-selected active">
                        <article class="article-recommended-tease flex font_unset">
                            <div class="main-image"><img src="https://picsum.photos/53/53"/></div>
                            <div class="article-content p-l_3 font-size_down-2">
                                <p class="font-size_up-1">Looking for content tailored to your interests?</p>
                                <p><a href="/My-ACC/My-Profile#ClinicalTopics">Add some topics</a>to receive personalized
                                    recommendations.</p>
                            </div>
                        </article>
                    </div>
                </aside>
                <aside class="suggested-materials br_1 br_solid m-b_4 p-x_3 relative">
                    <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Similar
                            Articles from ACC.org</span></h2>
                    <ul class="CoveoResultList font-size_down-1 m-t_n4 ul_none" data-layout="list" data-wait-animation="fade"
                        data-enable-infinite-scroll="false">
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                                    class="similar-article-date">Feb 06, 2024</span><span>| </span><span
                                    class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                                    class="CoveoResultLink"
                                    href="/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024">ACCEL Lite:
                                    Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                                    class="similar-article-date">Jan 23, 2024</span><span>| </span><span
                                    class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                                    class="CoveoResultLink"
                                    href="/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024">ACCEL Lite: AHA
                                    Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity
                                    Who Do Not Have Diabetes</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                                    class="similar-article-date">Jan 16, 2024</span><span>| </span><span
                                    class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                                    class="CoveoResultLink"
                                    href="/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024">ACCEL Lite: From
                                    JACC: Managing Patients with Moderate Aortic Stenosis</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                                    class="similar-article-date">Jan 09, 2024</span><span>| </span><span
                                    class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                                    class="CoveoResultLink"
                                    href="/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024">ACCEL Lite: Top
                                    Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>
                            <div>&nbsp;</div>
                        </li>
                        <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                                    class="similar-article-date">Jan 03, 2024</span><span>| </span><span
                                    class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                                    class="CoveoResultLink"
                                    href="/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024">ACCEL Lite:
                                    Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>
                            <div>&nbsp;</div>
                        </li>
                    </ul>
                </aside>
            </div>
        </div>
        <!-- Needed for Style Guide Only -->
        <style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
        .space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
        .colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
        .colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
        .colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
        .colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
        </style>
        <!-- Needed for Style Guide Only -->
        Copy Code

        Source: dist/css/acc_boot.css, line 13867

        4.6.1.3 Demo Styles

        Descripition: Styles needed for demo and to not be included in enteprise styles

        Example

        Default styling

        <!-- Needed for Style Guide Only -->
        <style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
        .space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
        .colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
        .colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
        .colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
        .colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
        </style>
        <!-- Needed for Style Guide Only -->
        Copy Code

        Source: dist/css/acc_boot.css, line 7309

        4.6.2 Tabs

        experimental

        A simple way to show small groups of content that should have the same level of reading hierarchy.

        Sub.Component.Structures.Tabs.Tab.LinkActives - Active Tab Sub.Component.Structures.Tabs.Tab.Link - Tab Sub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab
        Sub Components in Design:

          Example

          Default styling

          caution:
          This item is not finalized and might be subject to change
          NOTE:
          Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
          <nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
              <ul class="flex_column flex_row:md  nav">
                  <li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
                      <a
                          id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink"  role="tab" aria-controls="ActiveLink" aria-selected="true"
                          class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
                          href="#">Active</a>
                  </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
                      <a
                      id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink"  role="tab" aria-controls="BasicLink" aria-selected="true"
                      class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
                  </li>        <li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
                      <a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>        </li>
              </ul>
          </nav>
          <div class="bg_black-_05 br-bl_radius br-br_radius m-x_3 p_4 reading-typography shadow_emboss-light tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
                  <h2 class="capitalize"> consectetur adipisicing elit </h2>
                  Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.</div>
              <div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
                  <h2 class="capitalize">Lorem ipsum dolor sit </h2>
                  Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.</div>
          </div>
          Copy Code

          Source: dist/css/acc_boot.css, line 7479

          4.6.3 UI Tabs

          experimental

          The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.

          Example

          Default styling

          caution:
          This item is not finalized and might be subject to change
          NOTE:
          Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
          <div class="br_solid br_1 br_black-3">
              <nav class="flex flex_row font_ui relative" id="tabContentLight" role="tablist">
                  <ul class="flex flex_auto flex_nowrap flex_row:md flex_column nav overflow_hidden font-size_up ul_none">
                      <li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <a
                              id="ActiveLinkUI-tab"
                              data-bs-toggle="tab"
                              data-bs-target="#ActiveLinkUI"
                              role="tab"
                              aria-controls="ActiveLinkUI"
                              aria-selected="true"
                              class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              href="#">Active</a>
                      </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <span
                               class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              >Link</span>
                      </li>            <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              href="#"
                              tabindex="-1"
                              aria-disabled="true">
                              Disabled</a>
                      </li>        </ul>
              </nav>
              <div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
                  <div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
                      <div class="reading-typography ">
                          <h1>Lorem Ipsum</h1>
                          <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                          <h2>Header Level 2</h2>
                          <ol>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ol>
                          <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
                          <h3>Header Level 3</h3>
                          <ul>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ul>
                          <button class="btn btn-primary">Button</button>
                      	<details>
                              <summary ><strong>Table of Contents</strong></summary>
                              <div>
                                  <ol>
                                      <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                                      <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                                      </li>
                                      <li data-line="2" dir="auto">Arrhythmias</li>
                                      <li data-line="3" dir="auto">Coronary Artery Disease</li>
                                      <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                                      <li data-line="5" dir="auto">Valvular Disease</li>
                                      <li data-line="6" dir="auto">Pericardial Disease</li>
                                      <li data-line="7" dir="auto">Congenital Heart Disease</li>
                                      <li data-line="8" dir="auto">Vascular Diseases</li>
                                      <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                                      <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                                      <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                                          System</li>
                                      <li data-line="12" dir="auto">
                                          Miscellaneous
                                          <ul>
                                              <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                                              <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                                              <li data-line="15" dir="auto">Cardiac Critical Care</li>
                                              <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                                              <li data-line="17" dir="auto">Sports Cardiology</li>
                                              <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                                              <li data-line="19" dir="auto">Cardiovascular Operative Management
                                              </li>
                                              <li data-line="20" dir="auto">Pharmacology</li>
                                              <li data-line="21" dir="auto">General Principles of Cardiovascular
                                                  Medicine</li>
                                          </ul>
                                      </li>
                                  </ol>
                              </div>
                          </details>
                      </div>        </div>
                  <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
                      <div class="reading-typography ">
                          <h1>Lorem Ipsum</h1>
                          <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                          <h2>Header Level 2</h2>
                          <ol>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ol>
                          <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
                          <h3>Header Level 3</h3>
                          <ul>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ul>
                          <button class="btn btn-primary">Button</button>
                      	<details>
                              <summary ><strong>Table of Contents</strong></summary>
                              <div>
                                  <ol>
                                      <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                                      <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                                      </li>
                                      <li data-line="2" dir="auto">Arrhythmias</li>
                                      <li data-line="3" dir="auto">Coronary Artery Disease</li>
                                      <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                                      <li data-line="5" dir="auto">Valvular Disease</li>
                                      <li data-line="6" dir="auto">Pericardial Disease</li>
                                      <li data-line="7" dir="auto">Congenital Heart Disease</li>
                                      <li data-line="8" dir="auto">Vascular Diseases</li>
                                      <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                                      <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                                      <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                                          System</li>
                                      <li data-line="12" dir="auto">
                                          Miscellaneous
                                          <ul>
                                              <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                                              <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                                              <li data-line="15" dir="auto">Cardiac Critical Care</li>
                                              <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                                              <li data-line="17" dir="auto">Sports Cardiology</li>
                                              <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                                              <li data-line="19" dir="auto">Cardiovascular Operative Management
                                              </li>
                                              <li data-line="20" dir="auto">Pharmacology</li>
                                              <li data-line="21" dir="auto">General Principles of Cardiovascular
                                                  Medicine</li>
                                          </ul>
                                      </li>
                                  </ol>
                              </div>
                          </details>
                      </div>        </div>
              </div>
          </div>
          Copy Code

          Source: dist/css/acc_boot.css, line 7513

          4.6.3.1 UI Tabs Overflow

          experimental

          The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.

          Example

          Default styling

          caution:
          This item is not finalized and might be subject to change
          NOTE:
          Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.
          <div class="br_solid br_1 br_black-3">
              <nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist">
                  <a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                          <i class="flex_auto self_center far fa-chevron-left"></i>
                  </a>
                  <ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
                      <li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <a
                              id="ActiveLinkUI-tab"
                              data-bs-toggle="tab"
                              data-bs-target="#ActiveLinkUI"
                              role="tab"
                              aria-controls="ActiveLinkUI"
                              aria-selected="true"
                              class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              href="#">Active</a>
                      </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <span
                               class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              >Link</span>
                      </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <span
                               class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              >Link</span>
                      </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <span
                               class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              >Link</span>
                      </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <span
                               class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              >Link</span>
                      </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <span
                               class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              >Link</span>
                      </li>            <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                          <a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                              href="#"
                              tabindex="-1"
                              aria-disabled="true">
                              Disabled</a>
                      </li>        </ul>
                  <a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                          <i class="flex_auto self_center far fa-chevron-right"></i>
                  </a>
              </nav>
              <div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
                  <div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
                      <div class="reading-typography ">
                          <h1>Lorem Ipsum</h1>
                          <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                          <h2>Header Level 2</h2>
                          <ol>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ol>
                          <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
                          <h3>Header Level 3</h3>
                          <ul>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ul>
                          <button class="btn btn-primary">Button</button>
                      	<details>
                              <summary ><strong>Table of Contents</strong></summary>
                              <div>
                                  <ol>
                                      <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                                      <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                                      </li>
                                      <li data-line="2" dir="auto">Arrhythmias</li>
                                      <li data-line="3" dir="auto">Coronary Artery Disease</li>
                                      <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                                      <li data-line="5" dir="auto">Valvular Disease</li>
                                      <li data-line="6" dir="auto">Pericardial Disease</li>
                                      <li data-line="7" dir="auto">Congenital Heart Disease</li>
                                      <li data-line="8" dir="auto">Vascular Diseases</li>
                                      <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                                      <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                                      <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                                          System</li>
                                      <li data-line="12" dir="auto">
                                          Miscellaneous
                                          <ul>
                                              <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                                              <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                                              <li data-line="15" dir="auto">Cardiac Critical Care</li>
                                              <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                                              <li data-line="17" dir="auto">Sports Cardiology</li>
                                              <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                                              <li data-line="19" dir="auto">Cardiovascular Operative Management
                                              </li>
                                              <li data-line="20" dir="auto">Pharmacology</li>
                                              <li data-line="21" dir="auto">General Principles of Cardiovascular
                                                  Medicine</li>
                                          </ul>
                                      </li>
                                  </ol>
                              </div>
                          </details>
                      </div>        </div>
                  <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
                      <div class="reading-typography ">
                          <h1>Lorem Ipsum</h1>
                          <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                          <h2>Header Level 2</h2>
                          <ol>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ol>
                          <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
                          <h3>Header Level 3</h3>
                          <ul>
                              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                              <li>Aliquam tincidunt mauris eu risus.</li>
                          </ul>
                          <button class="btn btn-primary">Button</button>
                      	<details>
                              <summary ><strong>Table of Contents</strong></summary>
                              <div>
                                  <ol>
                                      <li data-line="0" dir="auto">How to Prepare for the Boards</li>
                                      <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
                                      </li>
                                      <li data-line="2" dir="auto">Arrhythmias</li>
                                      <li data-line="3" dir="auto">Coronary Artery Disease</li>
                                      <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
                                      <li data-line="5" dir="auto">Valvular Disease</li>
                                      <li data-line="6" dir="auto">Pericardial Disease</li>
                                      <li data-line="7" dir="auto">Congenital Heart Disease</li>
                                      <li data-line="8" dir="auto">Vascular Diseases</li>
                                      <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
                                      <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
                                      <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
                                          System</li>
                                      <li data-line="12" dir="auto">
                                          Miscellaneous
                                          <ul>
                                              <li data-line="13" dir="auto">Cardiovascular Genetics</li>
                                              <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
                                              <li data-line="15" dir="auto">Cardiac Critical Care</li>
                                              <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
                                              <li data-line="17" dir="auto">Sports Cardiology</li>
                                              <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
                                              <li data-line="19" dir="auto">Cardiovascular Operative Management
                                              </li>
                                              <li data-line="20" dir="auto">Pharmacology</li>
                                              <li data-line="21" dir="auto">General Principles of Cardiovascular
                                                  Medicine</li>
                                          </ul>
                                      </li>
                                  </ol>
                              </div>
                          </details>
                      </div>        </div>
              </div>
          </div>
          Copy Code

          Example

          Default styling

          Markup:
          caution:
          This item is not finalized and might be subject to change
          Markup:
          Copy Code

          Source: dist/css/acc_boot.css, line 9693

          4.7 Content List Item

          This is how content items should be displayed in list form.

          Sub.Component.ContentList.Item.Credits - Credits Sub.Component.ContentList.Item.Thumbnail - Thumbnail
          Sub Components in Design:

            Example

            Default styling

            editor’s pick
            Cardiovascular Team Section

            Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology

            On Demand Till:June 11, 2022
            • CNE 1
            • CME 1
            • COP 1

            The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...

            • Keywords:
            • Acute Coronary Syndrome
            • Cardiac Surgical Procedures
            • Coronary Artery Bypass
            • Heart Arrest
            • Heart Failure
            • Hemorrhage
            • Hospital Mortality
            • Ischemic Attack, Transient
            • Lower Extremity
            • Myocardial Infarction
            • Myocardial Revascularization
            • Patient Care Team
            • Percutaneous Coronary Intervention
            • Peripheral Arterial Disease
            • Risk Factors
            • Secondary Prevention
            • Shock, Cardiogenic
            • Stroke
            • Vascular Diseases
            • Webinars: Live
            • Online: Yes
            • Access Type: Paid
            • Price: $888
            • Document Type: Guidelines
            • Publish Date: Mar 28, 2014
            • Focused Update: Jan 28, 2019 (Open Update)
            Summary iCal PDF PDF JACC Search
            NOTE:
            Merge all the things.
            <article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
                <div class="absolute r_n1 t_3 text_center flex flex_column:md justify_end align-right font_n2:md font_n3 overflow_hidden">
                    <div class="flex flex_row justify_end c_white"><span class="flex_shrink p-y_2 p-x_3 br_1 br_solid br_white-7 bg_acc-1"><span class="p-x_2 m-t_1 m-b_2">editor’s pick</span> <i class="fas fa-fw m-t_1 m-b_2 fa-thumbs-up"></i></span></div>
                </div>
                <div class="flex flex_row:md flex_column gap-x_4">
                    <div class="aspect_1x1 flex_none" style="width: clamp(75px, 10vw, 125px);">
                    	<img src="https://picsum.photos/110/110" alt="" class="w_100">
                    </div>        <div class="flex_auto m-r_4:md">
                        <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Cardiovascular Team Section</span>
                        <h2 class="article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2">Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology</h2>
                        <div class="meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold">
                            <span class="c_black-7 m-r_3">Apr 11, 2022</span>
                            <a href="/">Julianne Fallon, PharmD</a>
                        </div>
                        <div class="font-size_down font_bold m-b_0:md m-b_3 m-l_0:md m-l_3 meta">
                            <span class="c_black-6 font_italic m-r_3"><strong class="p-r_3">On Demand Till:</strong>June 11, 2022</span>
                        </div>
                        <div class="credits">
                        	<ul class="ul_none flex flex_wrap font_n2 font_n1:md font_n1:print self_end">
                        		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                        			<div class="inline-block br_1 br_radius c_white  br_CNE-n1 bg_CNE br_solid">
                        				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                        					<span class="flex_auto">CNE</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                        				</div>
                        			</div>
                        		</li>		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                        			<div class="inline-block br_1 br_radius c_white  br_CME-n1 bg_CME br_solid">
                        				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                        					<span class="flex_auto">CME</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                        				</div>
                        			</div>
                        		</li>		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                        			<div class="inline-block br_1 br_radius c_white  br_COP-n1 bg_COP br_solid">
                        				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                        					<span class="flex_auto">COP</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                        				</div>
                        			</div>
                        		</li>	</ul>
                        </div>        </div>
                </div>
                <div class="flex flex_row:md flex_column gap-x_4">
                    <div class="flex flex_column-reverse flex_row:md gap-x_4">
                        <div class="article-content">
                            <p class="excerpt font_copy font_0 lh_2 m-b_3 m-t_2 z_1">The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...</p>
                            <div class="authors-list p-y_1 font_n2:md font_n3">
                                <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Ty J. Gluckman, MD, MHA, FACC</a>
                                <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Nicole M. Bhave, MD, FACC</a>
                                <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Larry A. Allen, MD, MHS, FACC</a>
                                <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Eugene H. Chung, MD, MSc, FACC</a>
                                <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Erica S. Spatz, MD, MHS, FACC</a>
                                <span class="collapse" id="authorToggle">
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Enrico Ammirati, MD, PhD</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Aaron L. Baggish, MD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Biykem Bozkurt, MD, PhD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>William K. Cornwell, III, MD, MSCS</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Kimberly G. Harmon, MD</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Jonathan H. Kim, MD, MSc, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Anuradha Lala, MD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Benjamin D. Levine, MD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Matthew W. Martinez, MD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Oyere Onuma, MD, MSc</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Dermot Phelan, MD, PhD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Valentina O. Puntmann, MD, PhD</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Saurabh Rajpal, MD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Pam R. Taub, MD, FACC</a>
                                    <a class="link z_3 inline-block p-x_2  h:underline cursor_pointer"><i class="fa fa-user p-r_2 opacity_5"></i>Amanda K. Verma, MD, FACC</a>
                                </span>
                                <a class="font_bold" data-bs-toggle="collapse" href="#authorToggle" role="button" aria-expanded="false" aria-controls="authorToggle">Show More</a>
                            </div>
                            <div class="topics-list p-y_1 font_n2:md font_n3">
                                <ul class="ul_inline-comma">
                                    <li class="no-after font_bold">Clinical Topics: </li>
                                    <li><a href="/">Acute Coronary Syndromes</a></li>
                                    <li><a href="/">Arrhythmias and Clinical EP</a></li>
                                    <li><a href="/">Cardiac Surgery</a></li>
                                    <li><a href="/">Heart Failure and Cardiomyopathies</a></li>
                                    <li><a href="/">Invasive Cardiovascular Angiography and Intervention</a></li>
                                    <li><a href="/">Prevention</a></li>
                                </ul>
                                <div class="collapse" id="topicsToggle">
                                    <ul class="ul_inline-comma">
                                        <li><a href="/">Vascular Medicine</a></li>
                                        <li><a href="/">Atherosclerotic Disease (CAD/PAD)</a></li>
                                        <li><a href="/">Implantable Devices</a></li>
                                        <li><a href="/">SCD/Ventricular Arrhythmias</a></li>
                                        <li><a href="/">Aortic Surgery</a></li>
                                        <li><a href="/">Cardiac Surgery and Arrhythmias</a></li>
                                        <li><a href="/">Cardiac Surgery and Heart Failure</a></li>
                                        <li><a href="/">Acute Heart Failure</a></li>
                                        <li><a href="/">Interventions and ACS</a></li>
                                        <li><a href="/">Interventions and Vascular Medicine</a></li>
                                    </ul>
                                </div>
                                <a class="font_bold" data-bs-toggle="collapse" href="#topicsToggle" role="button" aria-expanded="false" aria-controls="topicsToggle">Show More</a>
                            </div>
                            <div class="keywords-list p-y_1 font_n2:md font_n3">
                                <ul class="ul_inline-comma">
                                    <li class="no-after font_bold">Keywords: </li>
                                    <li>Acute Coronary Syndrome</li>
                                    <li>Cardiac Surgical Procedures</li>
                                    <li>Coronary Artery Bypass</li>
                                    <li>Heart Arrest</li>
                                    <li>Heart Failure</li>
                                </ul>
                                <div class="collapse" id="keywordsToggle">
                                    <ul class="ul_inline-comma">
                                        <li>Hemorrhage</li>
                                        <li>Hospital Mortality</li>
                                        <li>Ischemic Attack, Transient</li>
                                        <li>Lower Extremity</li>
                                        <li>Myocardial Infarction</li>
                                        <li>Myocardial Revascularization</li>
                                        <li>Patient Care Team</li>
                                        <li>Percutaneous Coronary Intervention</li>
                                        <li>Peripheral Arterial Disease</li>
                                        <li>Risk Factors</li>
                                        <li>Secondary Prevention</li>
                                        <li>Shock, Cardiogenic</li>
                                        <li>Stroke</li>
                                        <li>Vascular Diseases</li>
                                    </ul>
                                </div>
                                <a class="font_bold" data-bs-toggle="collapse" href="#keywordsToggle" role="button" aria-expanded="false" aria-controls="keywordsToggle">Show More</a>
                            </div>
                            <div>
                                <ul class="additional-details ul_none font_n1">
                                    <li><span class="font_bold">Webinars: </span> Live</li>
                                    <li><span class="font_bold">Online: </span> Yes</li>
                                    <li><span class="font_bold">Access Type:</span> Paid</li>
                                    <li><span class="font_bold">Price: </span> $888</li>
                                    <li><span class="font_bold">Document Type:</span> Guidelines</li>
                                    <li><span class="font_bold">Publish Date:</span> Mar 28, 2014</li>
                                    <li><span class="font_bold">Focused Update:</span> Jan 28, 2019 <a class="link c_primary h:c_primary-n2" href="/" target="_blank">(Open Update)</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="article-tools m-l_0 m-l_4:md m-y_2">
                            <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-volume m-r_3"></i> <span class="nowrap text">Summary</span></a>
                            <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-calendar m-r_3"></i> <span class="nowrap text">iCal</span></a>
                            <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-file-pdf m-r_3"></i> <span class="nowrap text">PDF</span></a>
                            <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-file-pdf m-r_3"></i> <span class="nowrap text">PDF</span></a>
                            <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-book-open m-r_3"></i> <span class="nowrap text">JACC</span></a>
                            <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-search alt m-r_3"></i> <span class="nowrap text">Search</span></a>
                        </div>
                    </div>
                </div>
            </article>
            Copy Code

            Source: dist/css/acc_boot.css, line 9838

            4.7.1 Content List Item: Event

            Sub.Component.ContentList.Item.Calendar - Calendar Sub.Component.ContentList.Item.Credits - Credits
            Sub Components in Design:

              Example

              Default styling

              Live Meetings

              ACC Anywhere is a comprehensive digital library of more than 220 sessions from ACC.22. Purchase today and start expanding your knowledge of the field!

              April 22, 2022 - March 01, 2023
              On Demand Till:June 11, 2022
              • CNE 1
              • CME 1
              • COP 1

              The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...

              • Meeting Type: Live Meetings
              • Meeting Venue: Virtual (On Demand)
              • Price: $888
              • Access Type: Free
              iCal
              <article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
                  <div class="flex flex_row:md flex_column gap-x_4">
                      <div class="flex_none" style="width: clamp(75px, 10vw, 125px);">
                      	<div class="cal-date text_center font_3">
                      		<a class="bg_primary block c_white flex_column flex justify_stretch h:bg_pimary-n2 h:undecorated" href="">
                      			<span class="block flex_none font-size_down p-y_1">Apr</span>
                      			<span class="block br-b_2 br-t_2 br_solid flex_auto font-size_up-1 font_xbold grid items_center p-x_4 text_center aspect_16x9 "><span class="nowrap">22 - 23
                      			</span></span>
                      			<span class="block flex_none font-size_down p-y_1">2022</span>
                      		</a>
                      	</div>
                      </div>        <div class="flex_auto m-r_4:md">
                          <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Live Meetings</span>
                          <h2 class="article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2">ACC Anywhere is a comprehensive digital library of more than 220 sessions from ACC.22. Purchase today and start expanding your knowledge of the field!</h2>
                          <div class="meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold">
                              <span class="c_black-7 m-r_3">April 22, 2022 - March 01, 2023</span>
                          </div>
                          <div class="font-size_down font_bold m-b_0:md m-b_3 m-l_0:md m-l_3 meta">
                              <span class="c_black-6 font_italic m-r_3"><strong class="p-r_3">On Demand Till:</strong>June 11, 2022</span>
                          </div>
                          <div class="credits">
                          	<ul class="ul_none flex flex_wrap font_n2 font_n1:md font_n1:print self_end">
                          		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                          			<div class="inline-block br_1 br_radius c_white  br_CNE-n1 bg_CNE br_solid">
                          				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                          					<span class="flex_auto">CNE</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                          				</div>
                          			</div>
                          		</li>		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                          			<div class="inline-block br_1 br_radius c_white  br_CME-n1 bg_CME br_solid">
                          				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                          					<span class="flex_auto">CME</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                          				</div>
                          			</div>
                          		</li>		<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
                          			<div class="inline-block br_1 br_radius c_white  br_COP-n1 bg_COP br_solid">
                          				<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
                          					<span class="flex_auto">COP</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
                          				</div>
                          			</div>
                          		</li>	</ul>
                          </div>        </div>
                  </div>
                  <div class="flex flex_row:md flex_column gap-x_4">
                      <div class="flex flex_column-reverse flex_row:md gap-x_4">
                          <div class="article-content">
                              <p class="excerpt font_copy font_0 lh_2 m-b_3 m-t_2 z_1">The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...</p>
                              <div>
                                  <ul class="additional-details list-unstyled font_n1">
                                      <li><span class="font_bold">Meeting Type: </span> Live Meetings</li>
                                      <li><span class="font_bold">Meeting Venue: </span> Virtual (On Demand)</li>
                                      <li><span class="font_bold">Price: </span> $888</li>
                                      <li><span class="font_bold">Access Type: </span> Free</li>
                                  </ul>
                              </div>
                          </div>
                          <div class="article-tools m-l_0 m-l_4:md m-y_2">
                              <a href="/" class="font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5"><i class="fas fa-calendar m-r_3"></i> <span class="nowrap text">iCal</span></a>
                          </div>
                      </div>
                  </div>
              </article>
              Copy Code
              NOTE:
              This has only one content row, headline is moved down into the rest of the content area.
              <article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
                  <div class="flex flex_row:md flex_column gap-x_4">
                      <div class="flex flex_column flex_row:md gap-x_4 w_100">
                          <div class="article-content flex-grow_1">
                              <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Guidelines</span>
                              <h2 class="article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2">Atrial Fibrillation: Guideline For the Management of Patients</h2>
                              <div class="meta m-t_2:md m-l_0 m-b_3 m-b_0:md font_bold">
                                  <span class="c_black-7 m-r_3">Mar 28, 2014</span>
                              </div>
                              <div>
                                  <ul class="additional-details list-unstyled font_n1">
                                      <li><span class="font_bold">Focused Update:</span> Jan 28, 2019 <a class="link c_primary h:c_primary-n2" href="/" target="_blank">(Open Update)</a></li>
                                  </ul>
                              </div>
                          </div>
                          <div class="article-tools flex flex_nowrap:lg flex_wrap m-l_0 m-l_4:md m-y_2 self_start:md self_stretch text_center">
                              <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                                  <i class="fas fa-book-open font_5 font_9:lg m-b_2:md"></i>
                                  <span class="text block lh_2">JACC</span>
                              </a>
                              <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                                  <i class="fas fa-file-pdf font_5 font_9:lg m-b_2:md"></i>
                                  <span class="text block lh_2">PDF</span>
                              </a>
                              <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                                  <i class="fab fa-hubspot font_5 font_9:lg m-b_2:md"></i>
                                  <span class="text block lh_2">Hub</span>
                              </a>
                              <a href="/" class="br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5">
                                  <i class="fas fa-search alt font_5 font_9:lg m-b_2:md"></i>
                                  <span class="text block lh_2 max-w_10:md">Search within Guidelines</span>
                              </a>
                          </div>
                      </div>
                  </div>
              </article>
              Copy Code

              Example

              Default styling

              Slides

              Slide Set | 2022 AHA/ACC/HFSA Guideline for the Management of Heart Failure

              Apr 11, 2022
              <article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
                  <div class="flex flex_row:md flex_column gap-x_4">
                      <div class="aspect_1x1 flex_none" style="width: clamp(75px, 10vw, 125px);">
                      	<img src="https://picsum.photos/110/110" alt="" class="w_100">
                      </div>        <div class="flex_auto m-r_4:md">
                          <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Slides</span>
                          <h2 class="article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2">Slide Set | 2022 AHA/ACC/HFSA Guideline for the Management of Heart Failure</h2>
                          <div class="meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold">
                              <span class="c_black-7 m-r_3">Apr 11, 2022</span>
                          </div>
                      </div>
                  </div>
              </article>
              Copy Code

              Example

              Default styling

              Cardiovascular Team Section

              Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology

              The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...

              <article class="br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui">
                  <div class="flex flex_row:md flex_column gap-x_4">
                      <div class="aspect_1x1 flex_none" style="width: clamp(75px, 10vw, 125px);">
                      	<img src="https://picsum.photos/110/110" alt="" class="w_100">
                      </div>        <div class="flex_auto m-r_4:md">
                          <span class="journal-title c_accent-2 font_bold uppercase wrap block:md font_n1">Cardiovascular Team Section</span>
                          <h2 class="article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2">Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology</h2>
                          <div class="meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold">
                              <span class="c_black-7 m-r_3">Apr 11, 2022</span>
                              <a href="/">Julianne Fallon, PharmD</a><br>
                          </div>
                      </div>
                  </div>
                  <div class="flex flex_row:md flex_column gap-x_4 w_100">
                      <div class="flex flex_column-reverse flex_row:md gap-x_4 flex-grow_1">
                          <div class="article-content">
                              <p class="excerpt font_copy font_0 lh_2 m-b_3 m-t_2 z_1">The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...</p>
                          </div>
                      </div>
                  </div>
              </article>
              Copy Code