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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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>
Code Sample
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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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>
Code Sample
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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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>
Code Sample
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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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>
Code Sample
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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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>
Code Sample
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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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>
Code Sample
Source: dist/css/acc_boot.css, line 14897
8.2 Page Layout
Descripition:
-
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"`
-
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'.
-
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.
-
Content Area:
- Allocate remaining space on the page for the content area, respecting a page margin.
Example
Default styling
Document(fullscreen)
Content No Sidebars
Content with Primary Sidebar
Content with Primary Sidebar - Reverse template-option="reverse"
Content with Secondary Sidebar
Content with Secondary Sidebar - Reverse template-option="reverse"
Both Sidebars
Both Sidebars
<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>
Code Sample
Source: dist/css/acc_boot.css, line 15193
8.2.1 Advanced Double Sidebar
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
- Webinar: ACC Research, Clinical Trials and Publishing Series
- Live Education: How to Become a CV Investigator
- Live Education: Clinical Trials Research: Upping Your Game Program
ACC Award Opportunities
- Douglas P. Zipes Distinguished Young Scientist Award
- Young Investigator Awards at ACC.23/WCC
- ACC/ABC Merck Research Fellowship Awards
- ACC/ABC Bristol Myers Squibb Research Fellowship Awards
Publications & Articles
- Gender Diversity in Cardiovascular Trial Research Begins at the Top (JACC)
- Clinical Research in a Big Data, High-Tech World (Cardiology)
Explore Cardiovascular Pathways:Physician|
CV
Team|
Clinical Trials Research
<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 & 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
& 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> </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> </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> </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> </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> </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>
Code Sample
Source: dist/css/acc_boot.css, line 15015
8.2.2 Page Layout: Article
here is a short demo of how the content will work with the page layouts.
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:
- 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 | <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">< 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> </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> </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> </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> </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> </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>
Code Sample
Source: dist/css/acc_boot.css, line 14993
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>
Code Sample
Source: dist/css/acc_boot.css, line 5973
8.3 Tabs
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 changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 7275
8.3 Tabs
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 changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 6004
8.3.1 Simple Tabs
Simple in page tabs
Example
Default styling
<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>
Code Sample
Source: dist/css/acc_boot.css, line 7306
8.3.1 Simple Tabs
Simple in page tabs
Example
Default styling
<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>
Code Sample
Source: dist/css/acc_boot.css, line 6119
8.3.1.1 Tab: Basic
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="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>
Code Sample
Source: dist/css/acc_boot.css, line 7421
8.3.1.1 Tab: Basic
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="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>
Code Sample
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>
Code Sample
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>
Code Sample
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.
Example
Default styling
<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>
Code Sample
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.
Example
Default styling
<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>
Code Sample
Source: dist/css/acc_boot.css, line 6022
8.3.2 Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Example
Default styling
<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>
Code Sample
Source: dist/css/acc_boot.css, line 7324
8.3.2 Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Example
Default styling
<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>
Code Sample
Source: dist/css/acc_boot.css, line 6061
8.3.2.1 Tab Dark: Basic
Description: Dark Tab Basic Nav
Example
Default styling
<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>
Code Sample
Source: dist/css/acc_boot.css, line 7363
8.3.2.1 Tab Dark: Basic
Description: Dark Tab Basic Nav
Example
Default styling
<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>
Code Sample
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
Example
Default styling
<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>
Code Sample
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
Example
Default styling
<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>
Code Sample
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.
Example
Default styling
<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>
Code Sample
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.
Example
Default styling
<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>
Code Sample
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>
Code Sample
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>
Code Sample
Source: dist/css/acc_boot.css, line 6186
8.4.1 UI Tabs Overflow
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 changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 7488
8.4.1 UI Tabs Overflow
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 changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 6302
8.4.2 Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Example
Default styling
Markup:
Code Sample
Source: dist/css/acc_boot.css, line 7604
8.4.2 Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Example
Default styling
Markup:
Code Sample
Source: dist/css/acc_boot.css, line 6228
8.4.3 Tab: Default
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 changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 7530
8.4.3 Tab: Default
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 changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 6250
8.4.3.1 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
caution:
This item is not finalized and might be subject to changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 7552
8.4.3.1 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
caution:
This item is not finalized and might be subject to changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 6278
8.4.3.2 Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Example
Default styling
caution:
This item is not finalized and might be subject to changeNOTE:
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>
Code Sample
Source: dist/css/acc_boot.css, line 7580
8.4.3.2 Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Example
Default styling
caution:
This item is not finalized and might be subject to changeNOTE:
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>