Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Component

Source: dist/css/virtual_boot.css, line 7961

5.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/virtual_boot.css, line 7991

5.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/virtual_boot.css, line 8021

5.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/virtual_boot.css, line 6718

5.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/virtual_boot.css, line 6807

5.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/virtual_boot.css, line 7882

5.4.1 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]" aria-controls="[modifier]" aria-expanded="true">
        <i class="a:rotation fa-fw fa-times fas self_center text_center"></i>
</div>
Copy Code

Source: dist/css/virtual_boot.css, line 13485

5.4.1 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]" aria-controls="[modifier]" 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]" aria-controls="[modifier]">
        <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]" aria-controls="[modifier]">
        <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]" aria-controls="[modifier]">
        <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

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]" aria-controls="[modifier]">
        <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/virtual_boot.css, line 7900

5.4.1.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]" aria-controls="[modifier]" aria-expanded="true">
        <i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
Copy Code

Source: dist/css/virtual_boot.css, line 13503

5.4.1.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]" aria-controls="[modifier]" aria-expanded="true">
        <i class="a:rotation fa-fw fa-chevron-up fas self_center text_center"></i>
</div>
Copy Code

Source: dist/css/virtual_boot.css, line 7847

5.4.1.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]" 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]" 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]" 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]" 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/virtual_boot.css, line 13450

5.4.1.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]" 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]" 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]" 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]" 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/virtual_boot.css, line 8722

5.4.2 Header Nav

The header nav for the website.

Component.Navigation.HeaderNav.MobileButton - Primary Component.Navigation.HeaderNav.Active - Primary: Active Component.Navigation.HeaderNav.Disabled - Primary: Disabled Component.Navigation.HeaderNav.MobileToggle - Mobile Menu Toggle Component.Navigation.HeaderNav.MobileHidden - Secondary Component.Navigation.HeaderNav.MobileHiddenDisabled - Secondary: Disabled Component.Navigation.HeaderNav.ExpandMobileLinks - Mobile Menu Link Component.Navigation.HeaderNav.ExpandMobileLinksDisabled - Mobile Menu Link: Disabled
Sub Components in Design:
    <div class="sticky t_0 flex l_0 r_0 relative:md z_4 bg_acc justify_center">
    <nav class="flex_auto max-w_90 font_n1 font_1:md font_2:lg font_display font_medium m-l_0 navbar navbar-dark navbar-expand-lg p_0 text_center:lg text_left">
        <!-- Primary Nav that expands on mobile and reveals extra nav items when on desktop. -->
        <ul class="navbar-nav flex flex_row w_100">
            <!-- When Nav is Active add the [ active ] classes to all locations to the basic design -->
            <li class="nav-item flex_auto [ active ]">
                <a class="[ active ][ text-shadow_black-1 ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/" target="_self">
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-home-heart display_none:lg"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">Primary: Active</span>
                </a>
            </li>            <!-- All areas that have `[ ]` in the design are areas where classes might be added or removed. -->
            <li class="nav-item flex_auto [~]">
                <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/program" target="_self">
                    <!-- icon is needed for the Primary Button Nav -->
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-calendar-alt display_none:lg"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">
                    <!--  []  -->
                    Primary
                    </span>
                </a>
            </li>            <li class="nav-item flex_auto ">
                <!-- If Button Disabled add the classes in the bracket to the Base Design and remove [ text-shadow_black-1 ] -->
                <a class="[ bg_secondary-2 c_secondary-3 disabled ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/faculty" target="_blank">
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-users display_none:lg"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md  text_center">
                        <!-- If Button Disabled Add This Icon --><i class="fas fa-lock p-r_3"></i>
                        Primary: Disabled
                    </span>
                </a>
            </li>            <!-- MENU toggle for mobile is a unique pattern -->
            <li class="nav-item flex_auto block display_none:lg">
                <a class="bg_secondary h:bg_secondary-n2 flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 font_medium h:c_white text-shadow_black-1 h:c_white justify_center nav-link text_center p-y_3:md" aria-expanded="false" aria-label="Toggle Extra Nav" data-bs-toggle="collapse" data-bs-target="#ExpandingMobileMenu" aria-controls="ExpandingMobileMenu"
                >
                    <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-ellipsis-h-alt"></i>
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">More</span>
                </a>
            </li>
            <!-- MENU toggle for mobile is a unique pattern -->            <!-- menu items that hide when in mobile under the expanded area -->
            <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
            <li class="nav-item flex_auto [ display_none block:lg ]">
                <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
                    <!-- [~] -->
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
                </a>
            </li>            <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
            <li class="nav-item flex_auto [ display_none block:lg ]">
                <a class="a:bg_accent [ bg_secondary-2 c_secondary-3 disabled  ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">
                        <!-- If Button Disabled Add This Icon -->
                        <i class="fas fa-lock p-r_3"></i>
                        Secondary: Disabled
                    </span>
                </a>
            </li>            <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
            <li class="nav-item flex_auto [ display_none block:lg ]">
                <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
                    <!-- [~] -->
                    <span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
                </a>
            </li>        </ul>
        <!-- Expanding Mobile Menu -->
        <div class="collapse navbar-collapse" id="ExpandingMobileMenu">
            <ul class="navbar-nav flex shadow_emboss-light flex_column w_100 font_1 bg_black-2 display_none:lg" >
                <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
                    <a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
                        <!-- [~] -->
                        Mobile Menu Link
                    </a>
                </li>                <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
                    <!-- if disabled add these classes to the a tag -->
                    <a class=" [ bg_secondary-2 c_secondary-3 disabled ]  a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg" href="/convocation" target="_self">
                        <!-- If Button Disabled Add This Icon -->
                        <i class="fas fa-lock p-l_3"></i>
                        Mobile Menu Link: Disablled
                    </a>
                </li>                <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
                    <a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
                        <!-- [~] -->
                        Mobile Menu Link
                    </a>
                </li>            </ul>
        </div>
    </nav>
</div>
    Copy Code

    Source: dist/css/virtual_boot.css, line 8895

    5.4.2.1 Nav Active

    Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.

    <!-- When Nav is Active add the [ active ] classes to all locations to the basic design -->
<li class="nav-item flex_auto [ active ]">
    <a class="[ active ][ text-shadow_black-1 ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/" target="_self">
        <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-home-heart display_none:lg"></i>
        <span class="block lh_0 p-y_0 p-y_2:md text_center">Primary: Active</span>
    </a>
</li>
    Copy Code

    Source: dist/css/virtual_boot.css, line 8855

    5.4.2.2 Mobile Menu Link

    Header Nav in mobile view has an expanded more list that hides the secondary nav items.

    <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
    <a class="[~] a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg text-shadow_black-1 " href="/convocation" target="_self">
        <!-- [~] -->
        Mobile Menu Link
    </a>
</li>
    Copy Code 
    <li class="nav-item flex_auto br-b_1 br_solid br_black-2">
    <!-- if disabled add these classes to the a tag -->
    <a class=" [ bg_secondary-2 c_secondary-3 disabled ]  a:bg_accent-n1 nav-link font_medium h:bg_acc-n2 h:c_white text_left text_center:lg p-l_4 p-l_0:lg" href="/convocation" target="_self">
        <!-- If Button Disabled Add This Icon -->
        <i class="fas fa-lock p-l_3"></i>
        Mobile Menu Link: Disablled
    </a>
</li>
    Copy Code

    Source: dist/css/virtual_boot.css, line 8766

    5.4.2.4 Base Header Nav (Primary)

    Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.

    <!-- All areas that have `[ ]` in the design are areas where classes might be added or removed. -->
<li class="nav-item flex_auto [~]">
    <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/program" target="_self">
        <!-- icon is needed for the Primary Button Nav -->
        <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-calendar-alt display_none:lg"></i>
        <span class="block lh_0 p-y_0 p-y_2:md text_center">
        <!--  []  -->
        Primary
        </span>
    </a>
</li>
    Copy Code

    Source: dist/css/virtual_boot.css, line 8812

    5.4.2.5 Base Header Nav (Secondary)

    Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.

    <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
    <a class="a:bg_accent [ text-shadow_black-1 ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
        <!-- [~] -->
        <span class="block lh_0 p-y_0 p-y_2:md text_center">Secondary</span>
    </a>
</li>
    Copy Code

    Source: dist/css/virtual_boot.css, line 8832

    5.4.2.6 Mobile Hidden Header Nav Disabled

    Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.

    <!-- if button shouldn't show in the main area on mobile add in classes `display_none block:lg` to hide on mobile so they only show up in the mobile expand area. -->
<li class="nav-item flex_auto [ display_none block:lg ]">
    <a class="a:bg_accent [ bg_secondary-2 c_secondary-3 disabled  ] flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/convocation" target="_self">
        <span class="block lh_0 p-y_0 p-y_2:md text_center">
            <!-- If Button Disabled Add This Icon -->
            <i class="fas fa-lock p-r_3"></i>
            Secondary: Disabled
        </span>
    </a>
</li>
    Copy Code

    Example

    Default styling

    • <!-- MENU toggle for mobile is a unique pattern -->
<li class="nav-item flex_auto block display_none:lg">
    <a class="bg_secondary h:bg_secondary-n2 flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 font_medium h:c_white text-shadow_black-1 h:c_white justify_center nav-link text_center p-y_3:md" aria-expanded="false" aria-label="Toggle Extra Nav" data-bs-toggle="collapse" data-bs-target="#ExpandingMobileMenu" aria-controls="ExpandingMobileMenu"
    >
        <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-ellipsis-h-alt"></i>
        <span class="block lh_0 p-y_0 p-y_2:md text_center">More</span>
    </a>
</li>
<!-- MENU toggle for mobile is a unique pattern -->
    Copy Code

    Source: dist/css/virtual_boot.css, line 8915

    5.4.2.8 Nav Disabled

    Disabled Header Nav is used when the conference site is open but all pages should be accessible. This is limited to the early stages of the conference before the site is fully open.

    <li class="nav-item flex_auto ">
    <!-- If Button Disabled add the classes in the bracket to the Base Design and remove [ text-shadow_black-1 ] -->
    <a class="[ bg_secondary-2 c_secondary-3 disabled ] a:bg_accent flex flex_column flex_row:lg font_medium gap-x_4 gap-y_3 h:bg_acc-n2 h:c_white justify_center nav-link text_center p-y_3:md " href="/faculty" target="_blank">
        <i class="font-size_up fa-fw fas p_2 inline-block m_auto fa-users display_none:lg"></i>
        <span class="block lh_0 p-y_0 p-y_2:md  text_center">
            <!-- If Button Disabled Add This Icon --><i class="fas fa-lock p-r_3"></i>
            Primary: Disabled
        </span>
    </a>
</li>
    Copy Code

    Source: dist/css/virtual_boot.css, line 6669

    5.4.3 Quick Utility Links

    Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra.

    <nav data-attr="utility-nav">
	<ul class="flex ul_none justify_end">
		<li class="p-x_3 flex_shrink">
			<a class="h:underline c_primary h:c_secondary-n1"
				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="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1" href="http://www.onlinejacc.org/" target="_blank" title="JACC.org"
				>JACC</a
			>
		</li>
		<li class="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1"
				href="http://accscientificsession.acc.org"
				target="_blank"
				title="ACC Annual Scientific Session Together With World Congress of Cardiology Website"
				>ACC.20/WCC</a
			>
		</li>
		<li class="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1"
				href="https://www.acc.org/membership/current-members?promo_creative=current_members&amp;promo_position=utility&amp;promo_name=navigation"
				>Members</a
			>
		</li>
		<li class="p-x_3 flex_shrink br-l_1 br_solid br_black-4">
			<a class="h:underline c_primary h:c_secondary-n1"
				href="https://www.acc.org/membership/join-us?promo_creative=joinacc&amp;promo_position=utility&amp;promo_name=navigation"
				>Join ACC</a
			>
		</li>
	</ul>
</nav>
    Copy Code

    Source: dist/css/virtual_boot.css, line 7647

    5.4.4 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/virtual_boot.css, line 13564

    5.4.4 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/virtual_boot.css, line 7674

    5.4.4.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/virtual_boot.css, line 13591

    5.4.4.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/virtual_boot.css, line 7722

    5.4.4.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] 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/virtual_boot.css, line 13639

    5.4.4.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] 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/virtual_boot.css, line 7692

    5.4.4.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.

  • Child Link 
    • <li class="nav-item [modifier]" 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] 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/virtual_boot.css, line 13609

    5.4.4.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.

  • Child Link 
    • <li class="nav-item [modifier]" 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] 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/virtual_boot.css, line 7744

    5.4.4.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/virtual_boot.css, line 13661

    5.4.4.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/virtual_boot.css, line 7777

    5.4.4.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/virtual_boot.css, line 13694

    5.4.4.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/virtual_boot.css, line 7824

    5.4.4.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] " data-nav="greatGrandChild">
    <div class="flex flex_row">
        <div class="flex_auto self_center">
            <a class=" [modifier] 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/virtual_boot.css, line 13741

    5.4.4.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] " data-nav="greatGrandChild">
    <div class="flex flex_row">
        <div class="flex_auto self_center">
            <a class=" [modifier] 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

    Example

    Default styling

    <section class="social p_4 m-y_2 bg_shade-n3 font_2">
    <ul class="flex social-bar ul_none c_white h:c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>
    Copy Code

    Example

    Default styling

    <section class="social p_4 m-y_2 font_n1 bg_white">
    <ul class="flex social-bar ul_none m_0">
        <li class="flex_shrink m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class=" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class=" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class=" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class=" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class=" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class=" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>
    Copy Code

    Example

    Default styling

    <section class="social p_4 m-y_2 font_0 max-w_20  bg_white">
    <ul class="flex social-bar ul_none c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-square-x-twitter"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>
    Copy Code

    Source: dist/css/virtual_boot.css, line 6395

    5.4.6 Generic Footer

    This defines the web footer.

    Sub.Component.Navigation.Footer.Address - Addresses Sub.Component.Navigation.Footer.Social - Social Links Sub.Component.Navigation.Footer.ACCProductLinks - Sister Sites Sub.Component.Navigation.Footer.Subfooter - Sub Footer Sub.Component.Navigation.Footer.Cite - Citation for the Site
    Sub Components in Design:

      Example

      Default styling

      <div class="footer">
    <div class="p-t_3 p-b_3 p_4 flex br_0 br-t_3 lh_2 br_solid br_shade-n1 c_shade-1 texture_light bg_shade-1">&nbsp;</div>
    <div class="flex flex_column flex_row:lg justify_between p_4 p_5-large texture_dark" style="">
        <div class="m_auto m-l_0:lg p-l_4:md p-r_5:md">
            <div class="logo_primary-alt  max-w_20"><span class="alt">logo_primary-alt max-w_10</span></div>
            <section class="address c_white">
                <h3 class="font_accent font_1 m-b_0 font_normal font_regular">American College of Cardiology</h3>
                <address>
                    <!-- http://microformats.org/wiki/hcard -->
                    <h4 class="m-b_0 font_bold font_copy font_normal font_1 m-t_4">Heart House</h4>
                    <div class="flex flex_column flex_row:md font_0 font_copy gap-x_5">
                    <div class="flex_auto">
                        <ul class="ul_none lh_0">
                            <li class="m-b_1 m-b_3:md font_normal">
                                <span class="street-address">2400 N St. NW</span>
                            </li>
                            <li class="m-b_1 m-b_3:md font_normal">
                                <span class="locality ">Washington</span>,
                                <span class="city-name ">
                            <abbr title="District of Colombia">DC</abbr>
                            </span>
                                <span class="postal-code">20037</span>
                            </li>
                            <li class="m-b_1 m-b_3:md font_normal">
                                <a href="mailto:MemberCare@acc.org" class="email c_white text_underline  h:c_white ">
                                    <strong class="p-r_2 inline block:md inline:lg">Email:</strong>
                                    <span class="inline block:md inline:lg">membercare@acc.org</span></a>
                            </li>
                        </ul>
                    </div>
                    <div class="flex_auto">
                    <ul class="ul_none lh_0">
                        <li class="m-b_1 m-b_3:md font_normal">
                            <a tel="+12023756000" href="tel:+12023756000" class="tel c_white h:c_white h:underline">
                            <strong class="p-r_2 block inline:lg">Phone:</strong><span class=" block inline:lg">1-202-375-6000</span></a>
                        </li>
                        <li class="m-b_1 m-b_3:md font_normal">
                            <a tel="+18002534636" href="tel:+18002534636" class="tel c_white h:c_white h:underline">
                            <strong class="p-r_2 block inline:lg">Toll Free:</strong><span class=" block inline:lg">1-800-253-4636</span></a>
                        </li>
                        <li class="m-b_1 m-b_3:md font_normal">
                            <a fax="+12023757000" href="fax:+12023757000" class="fax c_white h:c_white h:underline">
                            <strong class="p-r_2 block inline:lg">Fax:</strong>
                            <span class="block inline:lg">1202-375-7000</span>
                            </a>
                        </li>
                    </ul>
                    </div>
                    </div>
                </address>
            </section>            <!-- Social -->
            <h4 class="c_white font_regular font_accent m-b_3 m-b_4:lg text_center text_left:lg">Stay Connected
            </h4>
            <ul class="flex social-bar ul_none c_white h:c_white m_0">
                <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="bg_youtube social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-youtube"></i></a></li>
                <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="bg_linkedin social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-linkedin-in"></i></a></li>
                <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="bg_facebook social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-facebook-square"></i></a></li>
                <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="bg_twitter social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-square-x-twitter"></i></a></li>
                <li class="flex_auto m-r_2"><a href="https://www.instagram.com/americancollegeofcardiology" target="_blank" class="bg_instagram social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-instagram"></i></a></li>
                <!--<li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US" target="_blank" class="bg_google-play social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-google-play"></i></a></li>
                <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="bg_apple-store social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-apple"></i></a></li>-->
            </ul>
            <!-- Social -->        </div>
        <div class="flex_shrink p-l_4:md p-r_4:md w_100 w_auto:md">
            <!-- ACCProductLinks -->
            <section class="acc-websites flex_auto">
                    <ul class="ul_none lh_2 font_0">
                        <li class="c_white">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.jacc.org/">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">ACC.org</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                        <li class="c_white br_solid br_0 br-t_1 br_white-5">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.jacc.org/">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">JACC Journals</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                        <li class="c_white br_solid br_0 br-t_1 br_white-5">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://cvquality.acc.org/">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">Quality Improvement for Institutions</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                        <li class="c_white br_solid br_0 br-t_1  br_white-5">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://cvquality.acc.org/NCDR-Home">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">NCDR</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                        <li class="c_white br_solid br_0 br-t_1  br_white-5">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://cvquality.acc.org/accreditation">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">ACC Accreditation Services</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                        <li class="c_white br_solid br_0 br-t_1  br_white-5">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.cardiosmart.org/For-Clinicians">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">CardioSmart</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                        <li class="c_white br_solid br_0 br-t_1  br_white-5">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.medaxiom.com/">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">MedAxiom</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                        <li class="c_white br_solid br_0 br-t_1  br_white-5">
                            <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.acc.org/About-ACC/Contact-Us">
                                <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">Contact Us</span>
                                <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                            </a>
                        </li>
                    </ul>
                </section>
            <!-- /ACCProductLinks -->        </div>
    </div>
    <!-- subfooter -->
    <div id="subfooter" class="bg_primary c_white font_n1 p-x_4 p-y_4">
        <ul class="block footer-bottom-links ul_none">
            <li class="inline p-r_2 p-y_2"><a href="https://www.acc.org/Footer-Pages/Media-Center"
                        class="c_white-6 h:c_white">Media Center</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Quick-Start-Guide"
                        class="c_white-6 h:c_white">ACC.org Quick Start Guide</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Advertising-and-Sponsorship-Policy"
                        class="c_white-6 h:c_white">Advertising &amp; Sponsorship Policy</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Clinical-Content-Disclaimer"
                        class="c_white-6 h:c_white">Clinical Content Disclaimer</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Editorial-Board"
                        class="c_white-6 h:c_white">Editorial Board</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Privacy-Policy"
                        class="c_white-6 h:c_white">Privacy Policy</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Registered-User-Agreement"
                        class="c_white-6 h:c_white">Registered User Agreement</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Terms-and-Conditions"
                        class="c_white-6 h:c_white">Terms of Service</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Cookie-Policy"
                        class="c_white-6 h:c_white">Cookie Policy</a></li>
                <li class="inline p_2"><a href="https://www.acc.org/sitemap-acc.xml" class="c_white-6 h:c_white">Site
                        Map</a></li>
        </ul>
        <!-- /footer-bottom-links -->
    </div>
    <!-- /subfooter -->        <div class="texture_light bg_shade-1 p_4">
            <cite class="c_shade-1 font_italic font_bold font_n2 p_2 lh_2">&copy; 2023 American College of Cardiology Foundation. All rights reserved.</cite>
        </div></div>
      Copy Code

      Source: dist/css/virtual_boot.css, line 6540

      5.4.6.1 Fat Footers Links

      Footers in the ACC sometimes have fat footers with a list of categories and links.

      <section class="flex_auto p-x_3 p-y_4:lg w_1-third:lg w_50:md font_ui is-active_toggle-function">
    <h2 class="font_2 font_3:lg font_accent p-t_2 m-b_0:md m-b_2 br_none:md ">
        <span class="toggle display_none:md ">
        <i class="fas fa-minus-square c_white-8 p-r_4"></i></span>
        <a class="c_accent h:c_secondary-3" href="#">Conditions &amp; Topics</a>
    </h2>
    <ul class="block:md display_none font_0:lg font_n1 m-b_4 ul_none a:_block">
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Angina</a>
        </li>
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Aortic Aneurysm</a>
        </li>
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Atrial Fibrillation</a>
        </li>
        <li class="text-indent_n1 p-l_4">
            <a class="c_white h:c_secondary-3 h:underline" href="foo.html">Bradycardia</a>
        </li>
    </ul>
</section>
      Copy Code

      Source: dist/css/virtual_boot.css, line 7307

      5.5.1 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/virtual_boot.css, line 13934

        5.5.1 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/virtual_boot.css, line 7477

          5.5.2 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

          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

          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
          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/virtual_boot.css, line 13764

          5.5.2 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

          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

          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
          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/virtual_boot.css, line 7511

          5.5.2.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

          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

          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
          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

          Source: dist/css/virtual_boot.css, line 13798

          5.5.2.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

          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

          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
          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

          Example

          Default styling

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