Source: dist/css/virtual_boot.css, line 7802
12.1 Header Branding Area
Conferences can have a header branding area which gives the design team the ability to add a logo, graphics, and or text to the header or the site.
Source: dist/css/virtual_boot.css, line 7923
12.1.1 Header Brand Area - Logged Out
Description: This is the logged Out header brand area.
Example
<div class="relative">
<div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Login <i class="fas fa-sign-in p-l_2"></i></a>
<a class="btn bg_primary-n1 h:bg_primary-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Register</a>
</div>
<picture class="w_100">
<source class="w_100" srcset="https://via.placeholder.com/1440x200.png?text=Desktop+Large" media="(min-width: 1200px)">
<source class="w_100" srcset="https://via.placeholder.com/1200x200.png?text=Desktop" media="(min-width: 1024px)">
<source class="w_100" srcset="https://via.placeholder.com/768x200.png?text=Tablet" media="(min-width: 768px)">
<source class="w_100" srcset="https://via.placeholder.com/600x250.png?text=Mobile" media="(min-width: 400px)"> <source class="w_100" srcset="https://via.placeholder.com/400x300.png?text=Mobile" media="(min-width: 400px)">
<img src="https://via.placeholder.com/400x300.png?text=Mobile" class="w_100" alt="">
</picture>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 7814
12.1.2 Header Brand Area - Logged in
Description: This is the logged in header brand area.
Example
<div class="relative">
<div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
<div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
<span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
</div>
</div> <picture class="w_100">
<source class="w_100" srcset="https://via.placeholder.com/1440x200.png?text=Desktop+Large" media="(min-width: 1200px)">
<source class="w_100" srcset="https://via.placeholder.com/1200x200.png?text=Desktop" media="(min-width: 1024px)">
<source class="w_100" srcset="https://via.placeholder.com/768x200.png?text=Tablet" media="(min-width: 768px)">
<source class="w_100" srcset="https://via.placeholder.com/600x250.png?text=Mobile" media="(min-width: 400px)"> <source class="w_100" srcset="https://via.placeholder.com/400x300.png?text=Mobile" media="(min-width: 400px)">
<img src="https://via.placeholder.com/400x300.png?text=Mobile" class="w_100" alt="">
</picture>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 7839
12.1.2.1 Logged Buttons
Description: The logged in buttons.
Example
<div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
<div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
<span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 7858
12.1.3 Unsafe Area
Description: Because the UI is floats on top of the images there are area that are unsafe to contain text.
Example
<div class="relative m-t_4 overflow-hidden" style="width:1400px">
<div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
<div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
<span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
</div>
</div><div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center t_0 text_center" style="width:250px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
<img
class="w_100"
src="https://via.placeholder.com/1440x200.png?text=Desktop+Large+1440x200"
/>
</div>
<div class="relative m-t_4 overflow-hidden" style="width:1200px">
<div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
<div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
<span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
</div>
</div><div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center t_0 text_center" style="width:250px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
<img
class="w_100"
src="https://via.placeholder.com/1200x200.png?text=Desktop+1200x200"
/>
</div>
<div class="relative m-t_4 overflow-hidden" style="width:768px">
<div class="absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4">
<div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
<span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
</div>
</div><div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center t_0 text_center" style="width:250px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
<img
class="w_100"
src="https://via.placeholder.com/768x200.png?text=Tablet+768x200"
/>
</div>
<div class="relative m-t_4 overflow-hidden" style="width:600px">
<div class="absolute r_4 l_auto b_4 t_auto justify_center flex flex_column gap-x_4 gap-y_4">
<div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
<span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
</div>
</div>
<div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center l_0 text_center" style="height:100px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
<img
class="w_100"
src="https://via.placeholder.com/600x250.png?text=Mobile+600x250"
/>
</div>
<div class="relative m-t_4 overflow-hidden" style="width:400px">
<div class="absolute b_4 r_4 l_4 justify_center flex flex_row flex_column gap-x_4 gap-y_4">
<div class="bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light">
<span class="font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3">User Name</span>
<a class="btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white h:c_white uppercase shadow_overlap-light font_ui font_bold" href="#">Log Out <i class="fas fa-sign-out p-l_2"></i></a>
</div>
</div>
<div class="absolute b_0 bg_alert font_5 font_xbold grid justify_center opacity_5 r_0 self_center l_0 text_center" style="height:100px"><span class="self_center c_black font-blend_color-burn">UNSAFE</span></div>
<img
class="w_100"
src="https://via.placeholder.com/400x300.png?text=Mobile+400x300"
/>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 6799
12.2 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
Accordion Header Level 3
HTML Ipsum Presents
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 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" >
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </main>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 6829
12.2.1 Accordion Child
Description: Sometimes the content needs be collapsed at a secondary level to make it scannable.
Example
Nested Accordion Header Level 4
HTML Ipsum Presents
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 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" >
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </main>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 6859
12.2.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
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
HTML Ipsum Presents
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 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
HTML Ipsum Presents
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero 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" >
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </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" >
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </main>
</div> </main>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 9549
12.3 Alpha List
Long list of alpha ordered items with quick link jumping to the letter.
Example
Alpha List
- Rafi Iles Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Rhiann Best Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Romana Ibarra Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Roseanne Bridges Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Roy Squires Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sammy Christie Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sanjeev Hatfield Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Scarlett-Rose Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sioned Enriquez Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sophia-Rose Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sorcha Avery Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sulayman Wells Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sumaiya Millington Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sammy Christie Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sanjeev Hatfield Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Scarlett-Rose Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sioned Enriquez Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sophia-Rose Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sorcha Avery Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sulayman Wells Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sumaiya Millington Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sammy Christie Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sanjeev Hatfield Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Scarlett-Rose Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sioned Enriquez Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sophia-Rose Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sorcha Avery Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sulayman Wells Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Sumaiya Millington Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tatiana Buchanan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Terrell Healy Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tolga Monaghan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tyriq Perry Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tatiana Buchanan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Terrell Healy Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tolga Monaghan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tyriq Perry Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tatiana Buchanan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Terrell Healy Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tolga Monaghan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tyriq Perry Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tatiana Buchanan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Terrell Healy Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tolga Monaghan Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
- Tyriq Perry Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital New York, NY, USA
<h1 id="AlphaNavTop" class="font_4 c_primary" >Alpha List</h1>
<section class="relative p-t_2">
<div class=" sticky t_0 r_0 z_1">
<div class="absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3">
<!-- Helper Jump links -->
<a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#AlphaNavTop">
<span><i class="fas fa-arrow-up"></i> top</span>
</a>
<!-- Helper Jump links -->
</div>
</div>
<nav class="bg_white br_radius grid items_center p_3 p_4:lg relative shadow_overlap-light z_2 m-t_n2">
<ul class="c_secondary-2 flex:lg flex_row font_bold gap_4 grid grid-col_5 justify_around:lg justify_center m-x_4 m-y_3 ul_none">
<li class="c_black-7 text_center">A</li>
<li class="c_black-7 text_center">B</li>
<li class="c_black-7 text_center">C</li>
<li class="c_black-7 text_center">D</li>
<li class="c_black-7 text_center">E</li>
<li class="c_black-7 text_center">F</li>
<li class="c_black-7 text_center">G</li>
<li class="c_black-7 text_center">H</li>
<li class="c_black-7 text_center">I</li>
<li class="c_black-7 text_center">J</li>
<li class="c_black-7 text_center">K</li>
<li class="c_black-7 text_center">L</li>
<li class="c_black-7 text_center">M</li>
<li class="c_black-7 text_center">N</li>
<li class="c_black-7 text_center">O</li>
<li class="c_black-7 text_center">P</li>
<li class="c_black-7 text_center">Q</li>
<li class="c_black-7 text_center"><a class="bg_primary-4 br_radius h:c_white h:bg_primary-n3 p-x_3 block h:undecorated"href="#R">R</a></li>
<li class="c_black-7 text_center"><a class="bg_primary-4 br_radius h:c_white h:bg_primary-n3 p-x_3 block h:undecorated"href="#S">S</a></li>
<li class="c_black-7 text_center"><a class="bg_primary-4 br_radius h:c_white h:bg_primary-n3 p-x_3 block h:undecorated"href="#T">T</a></li>
<li class="c_black-7 text_center">U</li>
<li class="c_black-7 text_center">V</li>
<li class="c_black-7 text_center">W</li>
<li class="c_black-7 text_center">X</li>
<li class="c_black-7 text_center">Y</li>
<li class="c_black-7 text_center">Z</li>
</ul>
</nav>
<div id="R" class="relative br-t_1 br_dotted br_primary-3 w_100 p-y_4 font_0 flex_row flex" >
<div class="flex_none"><div class="c_white font_8 font_accent font_bold inline-block uppercase shadow_overlap-light bg_primary-n2 lh_0 br_radius p_2 p-x_4 m-x_3 sticky t_4 flex_none">R</div></div>
<ul class="flex_auto gap-x_5 gap-y_4 grid grid-col_1 grid-col_2:md grid-col_3:lg p-t_0 p_4 ul_none">
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Rafi Iles
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Rhiann Best
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Romana Ibarra
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Roseanne Bridges
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Roy Squires
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
</ul>
</div>
<div id="S" class="relative br-t_1 br_dotted br_primary-3 w_100 p-y_4 font_0 flex_row flex" >
<div class="flex_none"><div class="c_white font_8 font_accent font_bold inline-block uppercase shadow_overlap-light bg_primary-n2 lh_0 br_radius p_2 p-x_4 m-x_3 sticky t_4 flex_none">S</div></div>
<ul class="flex_auto gap-x_5 gap-y_4 grid grid-col_1 grid-col_2:md grid-col_3:lg p-t_0 p_4 ul_none">
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sammy Christie
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sanjeev Hatfield
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Scarlett-Rose
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sioned Enriquez
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sophia-Rose
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sorcha Avery
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sulayman Wells
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sumaiya Millington
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sammy Christie
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sanjeev Hatfield
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Scarlett-Rose
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sioned Enriquez
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sophia-Rose
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sorcha Avery
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sulayman Wells
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sumaiya Millington
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sammy Christie
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sanjeev Hatfield
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Scarlett-Rose
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sioned Enriquez
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sophia-Rose
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sorcha Avery
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sulayman Wells
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Sumaiya Millington
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
</ul>
</div>
<div id="T" class="relative br-t_1 br_dotted br_primary-3 w_100 p-y_4 font_0 flex_row flex" >
<div class="flex_none"><div class="c_white font_8 font_accent font_bold inline-block uppercase shadow_overlap-light bg_primary-n2 lh_0 br_radius p_2 p-x_4 m-x_3 sticky t_4 flex_none">T</div></div>
<ul class="flex_auto gap-x_5 gap-y_4 grid grid-col_1 grid-col_2:md grid-col_3:lg p-t_0 p_4 ul_none">
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tatiana Buchanan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Terrell Healy
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tolga Monaghan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tyriq Perry
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tatiana Buchanan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Terrell Healy
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tolga Monaghan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tyriq Perry
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tatiana Buchanan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Terrell Healy
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tolga Monaghan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tyriq Perry
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tatiana Buchanan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Terrell Healy
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tolga Monaghan
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
<li><span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
Tyriq Perry
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span></li>
</ul>
</div>
</section>
Code Sample
Source: dist/css/virtual_boot.css, line 9664
12.3.1 Style - Container Classes
Example
relative br-t_1 br_dotted br_primary-3 w_100 p-y_4 font_0 flex_row flex
Code Sample
Source: dist/css/virtual_boot.css, line 9682
12.3.2 Style - List Item Nav Classes
Example
c_black-7 text_center
Code Sample
Source: dist/css/virtual_boot.css, line 9691
12.3.3 Style - List Item Nav Link Classes
Example
bg_primary-4 br_radius h:c_white h:bg_primary-n3 p-x_3 block h:undecorated
Code Sample
Source: dist/css/virtual_boot.css, line 9719
12.3.4 Style - List Item Container Classes
Example
flex_auto gap-x_5 gap-y_4 grid grid-col_1 grid-col_2:md grid-col_3:lg p-t_0 p_4 ul_none
Code Sample
Source: dist/css/virtual_boot.css, line 9700
12.3.5 Sub - List Item Name
Example
<span class="p-y_3 lh_1">
<span data-name="newMember__name" class="block font_display c_primary-n2 font-size_up lh_0 m-b_3">
</span>
<span data-name="newMember__title" class="block font-size_down-1 lh_1 m-b_2 c_black-8">
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital</span>
<span data-name="newMember__location" class="block font-size_down-2 c_black-6">
New York, NY, USA</span>
</span>
Code Sample
Source: dist/css/virtual_boot.css, line 9673
12.3.6 Style - Marker Classes
Example
c_white font_8 font_accent font_bold inline-block uppercase shadow_overlap-light bg_primary-n2 lh_0 br_radius p_2 p-x_4 m-x_3 sticky t_4 flex_none
Code Sample
Source: dist/css/virtual_boot.css, line 9510
12.4 Call-to-Action Card
Description: Some content areas are chunked out to drive usage through a call to action card.
Example
Member Section
Connect with ACC’s Sports and Exercise Member Section, THE home for sports and exercise professionals within the ACC, advocating for and advancing the priorities of the community, and serving as a College-wide resource for issues related to sports and exercise professionals.
Call to Action<div class="br_radius flex flex_column justify_between p-x_5:lg p_4 shadow_overlap-light br_black-3 br_solid br_1">
<h2 class="font_bold c_primary m-t_0 block">Member Section</h2>
<p class="lh_3">Connect with ACC’s Sports and Exercise Member Section, THE home for sports and exercise professionals within the ACC, advocating for and advancing the priorities of the community, and serving as a College-wide resource for issues related to sports and exercise professionals. </p>
<a class="block br_radius btn btn-block btn-lg btn-secondary btn_lg m-b_3 m_auto shadow_overlap-light w_100">Call to Action</a>
</div>
Code Sample
12.5 Structures.Evergreen
Source: dist/css/virtual_boot.css, line 7951
12.5.1 Certified Education Block
Description: This block is added to all sites that offer any level of certification. Most of it links to other area or products but the user must see it on pages.
Example
Certified Education Credit Claim
This section of Care of the Athletic Heart 2020 Virtual contains certified education content. If a session offers credit, it is indicated. Credit information and disclosures may be accessed by selecting the below button.
Credit must be claimed by December 31, 2020, 5:00 PM ET. You may only complete the evaluation and credit claim once; therefore, please do not proceed until you have finished your participation in the certified content for which you wish to claim credit.
<div class="br_round p_4 p-x_5:lg shadow_emboss-light texture_light m-b_5"><h2 class="font_medium c_primary">Certified Education Credit Claim
</h2><div class="font_0 font_copy"><p>This section of Care of the Athletic Heart 2020 Virtual contains certified education content. If a session offers credit, it is indicated. Credit information and disclosures may be accessed by selecting the below button.
</p><p><strong class="font_bold">Credit must be claimed by
December 31, 2020, 5:00 PM ET. </strong>You may only complete the evaluation and credit claim once; therefore, please do not proceed until you have finished your participation in the certified content for which you wish to claim credit.
</p></div><a class="btn br_radius max-w_20 m_auto m-b_3 block shadow_overlap-light btn-primary" href="#" target="_blank">Evaluation & Credit Claim</a>
<a href="#" class="btn br_radius max-w_20 m_auto m-b_3 block shadow_overlap-light btn-primary" target="_blank">Credit Information & Disclosures</a>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 9526
12.6 External Resource
External Sections of content that are helpful to cross promote other products from the conferences.
Example s
Default styling
primary
Change the color of the block to primary.
accent
Change the color of the block to accent.
<article class="aspect_21x9 bg-blend_luminosity relative bg_cover bg_no-repeat bg_[modifier]-2 br_1 br_black-3 br_radius br_solid flex_shrink generic_video generic_video-nolabel h:bg_secondary-n2 relative shadow_3 text_center c_[modifier]-4">
<em class="opacity_5 absolute t_1 r_2 fas font_4 fa-external-link-square-alt"></em>
<a class="block font_7 font_6:md font_9:lg font_display font_xbold h:undecorated m_0 p_4 p_5:lg text_left uppercase c_inherit expanded-click-area" style="line-height: .85em" href="https://www.acc.org/latest-in-cardiology/features/accs-coronavirus-disease-2019-covid-19-hub?_ga=2.121293644.574512269.1591713176-49927898.1591404069#sort=%40fcommonsortdate90022%20descending" target="_blank"><span class="font_3 font_4:md m_0 m-l_0 m-b_n2 lh_0 block m-b_2">ACC’s</span>
<span class=" block">COVID-19 HUB</span>
</a>
</article>
Code Sample
Source: dist/css/virtual_boot.css, line 9486
12.7 Image and content
Description:
Example
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?
Dolorem quo eos quibusdam illo eveniet. Eius repellendus totam nam atque aut dicta molestias et. Molestiae nobis rerum possimus voluptatem non. Natus soluta aliquam occaecati libero blanditiis sed sed non. Aut asperiores enim ut mollitia. Ea aliquam exercitationem consectetur temporibus laudantium harum voluptatem.Blanditiis sapiente accusantium in dolorem adipisci. Quibusdam nihil voluptates tempora. Itaque nihil iste nulla assumenda velit nam et corporis dolorem. Illo ea officia quibusdam harum. At quisquam ullam nam. Fugiat et debitis.
<div class="flex flex_row:lg flex_column">
<div class="flex_none:lg self_center self_start:lg"><img src="https://picsum.photos/260/240" alt="" class="w_100 max-w_25:lg"></div>
<div class="flex_auto p-x_5:lg p-y_4 p-y_0:lg ">
<main class="reading-typography">
<h3 class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?</p>
<p>Dolorem quo eos quibusdam illo eveniet. Eius repellendus totam nam atque aut dicta molestias et. Molestiae nobis rerum possimus voluptatem non. Natus soluta aliquam occaecati libero blanditiis sed sed non. Aut asperiores enim ut mollitia. Ea aliquam exercitationem consectetur temporibus laudantium harum voluptatem.Blanditiis sapiente accusantium in dolorem adipisci. Quibusdam nihil voluptates tempora. Itaque nihil iste nulla assumenda velit nam et corporis dolorem. Illo ea officia quibusdam harum. At quisquam ullam nam. Fugiat et debitis.</p>
</main>
<footer>
<a href="https://www.acc.org/-/media/Non-Clinical/Files-PDFs-Excel-MS-Word-etc/Meetings/2021/Agendas/NYCVS-2021-Agenda.pdf?la=en&hash=07D2FBA41852DA1B120569EAE9D96E8EEBB9F6B5&_ga=2.39127523.1324976227.1642517088-301418094.1638216724" class="btn br_radius max-w_30 m_auto m-b_3 block shadow_overlap-light btn-primary c_white h:undecorated" target="_blank">Download Agenda</a>
</footer>
</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 6144
12.8 Tabs
Description: A simple way to show small groups of content that should have the same level of reading hierarchy.
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
<ul class="flex_column flex_row:md nav">
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink" role="tab" aria-controls="ActiveLink" aria-selected="true"
class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
href="#">Active</a>
</li> <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink" role="tab" aria-controls="BasicLink" aria-selected="true"
class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li> <li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
<a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
</ul>
</nav>
<div class="bg_black-_05 br-bl_radius br-br_radius m-x_3 p_4 reading-typography shadow_emboss-light tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
<h2 class="capitalize"> consectetur adipisicing elit </h2>
Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.</div>
<div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
<h2 class="capitalize">Lorem ipsum dolor sit </h2>
Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 12737
12.8 Tabs
Description: A simple way to show small groups of content that should have the same level of reading hierarchy.
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
<ul class="flex_column flex_row:md nav">
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink" role="tab" aria-controls="ActiveLink" aria-selected="true"
class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
href="#">Active</a>
</li> <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink" role="tab" aria-controls="BasicLink" aria-selected="true"
class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li> <li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
<a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
</ul>
</nav>
<div class="bg_black-_05 br-bl_radius br-br_radius m-x_3 p_4 reading-typography shadow_emboss-light tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
<h2 class="capitalize"> consectetur adipisicing elit </h2>
Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.</div>
<div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
<h2 class="capitalize">Lorem ipsum dolor sit </h2>
Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 6175
12.8.1 Simple Tabs
Simple in page tabs
Example
<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/virtual_boot.css, line 12768
12.8.1 Simple Tabs
Simple in page tabs
Example
<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/virtual_boot.css, line 6290
12.8.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
<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/virtual_boot.css, line 12883
12.8.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
<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/virtual_boot.css, line 6271
12.8.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
<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/virtual_boot.css, line 12864
12.8.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
<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/virtual_boot.css, line 6309
12.8.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
<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/virtual_boot.css, line 12902
12.8.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
<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/virtual_boot.css, line 6193
12.8.2 Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Example
<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/virtual_boot.css, line 12786
12.8.2 Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Example
<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/virtual_boot.css, line 6232
12.8.2.1 Tab Dark: Basic
Description: Dark Tab Basic Nav
Example
<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/virtual_boot.css, line 12825
12.8.2.1 Tab Dark: Basic
Description: Dark Tab Basic Nav
Example
<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/virtual_boot.css, line 6214
12.8.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
<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/virtual_boot.css, line 12807
12.8.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
<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/virtual_boot.css, line 6252
12.8.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
<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/virtual_boot.css, line 12845
12.8.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
<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/virtual_boot.css, line 6325
12.9 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
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">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
<div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 12577
12.9 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
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">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
<div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 6357
12.9.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.
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.<div class="br_solid br_1 br_black-3">
<nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist">
<a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-left"></i>
</a>
<ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#"
tabindex="-1"
aria-disabled="true">
Disabled</a>
</li> </ul>
<a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-right"></i>
</a>
</nav>
<div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
<div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 12609
12.9.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.
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.<div class="br_solid br_1 br_black-3">
<nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist">
<a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-left"></i>
</a>
<ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#"
tabindex="-1"
aria-disabled="true">
Disabled</a>
</li> </ul>
<a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-right"></i>
</a>
</nav>
<div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
<div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
<h2>HTML Ipsum Presents</h2>
<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. Donec eu libero 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="#">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> </div>
</div>
</div>
Code Sample
Source: dist/css/virtual_boot.css, line 6473
12.9.2 Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Example
Markup:
Code Sample
Source: dist/css/virtual_boot.css, line 12725
12.9.2 Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Example
Markup:
Code Sample
Source: dist/css/virtual_boot.css, line 6399
12.9.3 Tab: Default
Description: Active State of Tab. Add and remove the active is-active
class from the li-tag toggle the active effect
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li>
Code Sample
Source: dist/css/virtual_boot.css, line 12651
12.9.3 Tab: Default
Description: Active State of Tab. Add and remove the active is-active
class from the li-tag toggle the active effect
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li>
Code Sample
Source: dist/css/virtual_boot.css, line 6421
12.9.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
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li>
Code Sample
Source: dist/css/virtual_boot.css, line 12673
12.9.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
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li>
Code Sample
Source: dist/css/virtual_boot.css, line 6449
12.9.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.
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#"
tabindex="-1"
aria-disabled="true">
Disabled</a>
</li>
Code Sample
Source: dist/css/virtual_boot.css, line 12701
12.9.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.
Experimental: This design is currently being reworked and might possibly change. (June 2021)
Example
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#"
tabindex="-1"
aria-disabled="true">
Disabled</a>
</li>