Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

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

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