Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Structures

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

8.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.
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="">
        <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>
    </div>    </main>
</div>
Copy Code

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

8.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.
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="">
        <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>
    </div>    </main>
</div>
Copy Code

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

8.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.
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="">
        <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>
    </div>    </main>
</div>
Copy Code

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

8.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.
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="">
        <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>
    </div>    </main>
</div>
Copy Code

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

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

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.
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="">
                <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>
            </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="">
                <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>
            </div>    </main>
        </div>    </main>
</div>
Copy Code

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

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

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.
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="">
                <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>
            </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="">
                <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>
            </div>    </main>
        </div>    </main>
</div>
Copy Code

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

8.2 Page Layout

Descripition:

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

Example

Default styling

Document(fullscreen)

Document

Content No Sidebars

Content

Content with Primary Sidebar

sidebar primary
content

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

sidebar primary (reverse)
content (reverse)

Content with Secondary Sidebar

sidebar secondary
content

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

sidebar secondary
content

Both Sidebars

sidebar secondary
content center
sidebar primary

Both Sidebars

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

Example

Default styling

Clinical Trials Research Pathway

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

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

Education

ACC Award Opportunities

Publications & Articles


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

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

Example

Default styling

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

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

Related References:

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

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

Keywords:ACCELLite, Statins


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

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

8.2.3 Demo Styles

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

Example

Default styling

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

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

8.3 Tabs

experimental

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

Example

Default styling

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

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

8.3 Tabs

experimental

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

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
<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">
    <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_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>    </ul>
</nav>
Copy Code
<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">
    <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_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>    </ul>
</nav>
Copy Code

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

8.3.1.2 Tab: Active

Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

Example

Default styling

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

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

8.3.1.2 Tab: Active

Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

Example

Default styling

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

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

8.3.1.3 Tab: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

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

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

8.3.1.3 Tab: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

<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>
Copy Code
<div class="m-y_4 bg_acc p_4" id="nav_jump">
    <nav class="bg_black-2 c_white br_3 br_radius br_solid br_white-5 font_0 font_bold font_ui p-x_0 p-x_4:md shadow_overlap-light">
        <ul class="flex_column flex_row:md ul_none nav">
        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
                Active
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
                Link
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
                Link
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
            <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
                Disabled
            </a>
        </li>        </ul>
    </nav>
</div>
Copy Code
<div class="m-y_4 bg_acc p_4" id="nav_jump">
    <nav class="bg_black-2 c_white br_3 br_radius br_solid br_white-5 font_0 font_bold font_ui p-x_0 p-x_4:md shadow_overlap-light">
        <ul class="flex_column flex_row:md ul_none nav">
        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
                Active
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
                Link
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
                Link
            </a>
        </li>        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
            <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
                Disabled
            </a>
        </li>        </ul>
    </nav>
</div>
Copy Code

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

8.3.2.2 Tab Dark: Active

Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
        Active
    </a>
</li>
Copy Code

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

8.3.2.2 Tab Dark: Active

Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
        Active
    </a>
</li>
Copy Code

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

8.3.2.3 Tab Dark: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
        Disabled
    </a>
</li>
Copy Code

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

8.3.2.3 Tab Dark: Disabled

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
    <a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
        Disabled
    </a>
</li>
Copy Code

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

8.4 UI Tabs

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

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="">
                <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>
            </div>        </div>
        <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
            <div class="">
                <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>
            </div>        </div>
    </div>
</div>
Copy Code

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

8.4 UI Tabs

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

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="">
                <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>
            </div>        </div>
        <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
            <div class="">
                <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>
            </div>        </div>
    </div>
</div>
Copy Code

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

8.4.1 UI Tabs Overflow

experimental

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

Example

Default styling

caution:
This item is not finalized and might be subject to change
NOTE:
Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.
<div class="br_solid br_1 br_black-3">
    <nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist">
        <a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                <i class="flex_auto self_center far fa-chevron-left"></i>
        </a>
        <ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
            <li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <a
                    id="ActiveLinkUI-tab"
                    data-bs-toggle="tab"
                    data-bs-target="#ActiveLinkUI"
                    role="tab"
                    aria-controls="ActiveLinkUI"
                    aria-selected="true"
                    class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    href="#">Active</a>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    href="#"
                    tabindex="-1"
                    aria-disabled="true">
                    Disabled</a>
            </li>        </ul>
        <a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                <i class="flex_auto self_center far fa-chevron-right"></i>
        </a>
    </nav>
    <div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
        <div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
            <div class="">
                <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>
            </div>        </div>
        <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
            <div class="">
                <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>
            </div>        </div>
    </div>
</div>
Copy Code

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

8.4.1 UI Tabs Overflow

experimental

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

Example

Default styling

caution:
This item is not finalized and might be subject to change
NOTE:
Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.
<div class="br_solid br_1 br_black-3">
    <nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist">
        <a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                <i class="flex_auto self_center far fa-chevron-left"></i>
        </a>
        <ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
            <li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <a
                    id="ActiveLinkUI-tab"
                    data-bs-toggle="tab"
                    data-bs-target="#ActiveLinkUI"
                    role="tab"
                    aria-controls="ActiveLinkUI"
                    aria-selected="true"
                    class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    href="#">Active</a>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI"  role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <span
                     class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    >Link</span>
            </li>            <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
                <a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
                    href="#"
                    tabindex="-1"
                    aria-disabled="true">
                    Disabled</a>
            </li>        </ul>
        <a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
                <i class="flex_auto self_center far fa-chevron-right"></i>
        </a>
    </nav>
    <div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
        <div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
            <div class="">
                <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>
            </div>        </div>
        <div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
            <div class="">
                <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>
            </div>        </div>
    </div>
</div>
Copy Code

Example

Default styling

Markup:
Markup:
Copy Code

Example

Default styling

Markup:
Markup:
Copy Code

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

8.4.3 Tab: Default

experimental

Description: Active State of Tab. Add and remove the active is-active class from the li-tag toggle the active effect

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

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

8.4.3 Tab: Default

experimental

Description: Active State of Tab. Add and remove the active is-active class from the li-tag toggle the active effect

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

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

8.4.3.1 Tab: Active

experimental

Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

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

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

8.4.3.1 Tab: Active

experimental

Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect

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

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

8.4.3.2 Tab: Disabled

experimental

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

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

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

8.4.3.2 Tab: Disabled

experimental

Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.

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