Source: dist/css/cardiosmart_boot.css, line 7994
4.1 Accordion
When accordion items share the same group name, they function as a traditional accordion where only one item in the group can be open at a time. In Sitecore, the group name defaults to the accordion group template's display name.
Component.Accordion.Group - Accordion Group
Component.Accordion.Standalone - Accordion Standalone
Sub Components in Design:
Example s
(default)
Full Width - Takes full width of the container without the need for a modifier class
Header 1
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Header 2
Rerum libg dero pariatur (40 Characters)
.w_third-2
Two-thirds width
Header 1
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Header 2
Rerum libg dero pariatur (40 Characters)
.w_third-1
One-third width
Header 1
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Header 2
Rerum libg dero pariatur (40 Characters)
<div class="relative [modifier class]">
<section aria-label="GroupedAccordion">
<details accordion name="GroupedAccordion" class="isolation_isolate m-b_3">
<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
<hgroup class="flex flex_row">
<span class="fa-stack flex_shrink m_2 br_radius">
<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
</span>
<h3 class="flex_auto m-y_2 inline-block self_center">Header 1</h3>
</hgroup>
</summary>
<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
<div data-content>
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters) </div>
</div>
</details>
<details accordion name="GroupedAccordion" class="isolation_isolate m-b_3">
<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
<hgroup class="flex flex_row">
<span class="fa-stack flex_shrink m_2 br_radius">
<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
</span>
<h3 class="flex_auto m-y_2 inline-block self_center">Header 2</h3>
</hgroup>
</summary>
<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
<div data-content>
Rerum libg dero pariatur (40 Characters) </div>
</div>
</details>
</section>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 8047
4.1.1 Modern Accordion - Group
When accordion items share the same group name, they function as a traditional accordion where only one item in the group can be open at a time. In Sitecore, the group name defaults to the accordion group template's display name after santizing it and for the aria-label it takes the display name making it readable for screen readers.
To build an accordion group, use the "Accordion Group" template as the parent component and add multiple "Accordion Item" templates as children within it.
HTML "name" attribute value is set by default in sitecore which takes the name of the accordion group template. For example, if the accordion group template is named "About ACC Accordion", the value would be "about-acc-accordion". Changing the display name in sitecore will change the name attribute value accordingly.
Example
Default styling
Learn about ACC
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Table of Contents
- How to Prepare for the Boards
- General Principles of Cardiovascular Medicine
- Arrhythmias
- Coronary Artery Disease
- Heart Failure & Cardiomyopathy
- Valvular Disease
- Pericardial Disease
- Congenital Heart Disease
- Vascular Diseases
- Systemic Hypertension and Hypotension
- Pulmonary Circulation Disorders
- Systemic Disorders Affecting the Circulatory System
-
Miscellaneous
- Cardiovascular Genetics
- CPR, Post-Resuscitation Care
- Cardiac Critical Care
- Sleep Disordered Breathing
- Sports Cardiology
- Pregnancy and Cardiac Disease
- Cardiovascular Operative Management
- Pharmacology
- General Principles of Cardiovascular Medicine
Become a member
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Table of Contents
- How to Prepare for the Boards
- General Principles of Cardiovascular Medicine
- Arrhythmias
- Coronary Artery Disease
- Heart Failure & Cardiomyopathy
- Valvular Disease
- Pericardial Disease
- Congenital Heart Disease
- Vascular Diseases
- Systemic Hypertension and Hypotension
- Pulmonary Circulation Disorders
- Systemic Disorders Affecting the Circulatory System
-
Miscellaneous
- Cardiovascular Genetics
- CPR, Post-Resuscitation Care
- Cardiac Critical Care
- Sleep Disordered Breathing
- Sports Cardiology
- Pregnancy and Cardiac Disease
- Cardiovascular Operative Management
- Pharmacology
- General Principles of Cardiovascular Medicine
<div class="relative">
<section aria-label="About ACC Accordion">
<details accordion name="about-acc-accordion" class="isolation_isolate m-b_3">
<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
<hgroup class="flex flex_row">
<span class="fa-stack flex_shrink m_2 br_radius">
<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
</span>
<h3 class="flex_auto m-y_2 inline-block self_center">Learn about ACC</h3>
</hgroup>
</summary>
<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
<div data-content>
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
</div>
</details>
<details accordion name="about-acc-accordion" class="isolation_isolate m-b_3">
<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
<hgroup class="flex flex_row">
<span class="fa-stack flex_shrink m_2 br_radius">
<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
</span>
<h3 class="flex_auto m-y_2 inline-block self_center">Become a member</h3>
</hgroup>
</summary>
<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
<div data-content>
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
</div>
</details>
</section>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 8096
4.1.2 Modern Accordion - Standalone
Each standalone accordion item operates independently, so multiple items can be open at the same time. To have independent behavior, use "Accordion Item" template.
Example
Default styling
Learn about ACC
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Table of Contents
- How to Prepare for the Boards
- General Principles of Cardiovascular Medicine
- Arrhythmias
- Coronary Artery Disease
- Heart Failure & Cardiomyopathy
- Valvular Disease
- Pericardial Disease
- Congenital Heart Disease
- Vascular Diseases
- Systemic Hypertension and Hypotension
- Pulmonary Circulation Disorders
- Systemic Disorders Affecting the Circulatory System
-
Miscellaneous
- Cardiovascular Genetics
- CPR, Post-Resuscitation Care
- Cardiac Critical Care
- Sleep Disordered Breathing
- Sports Cardiology
- Pregnancy and Cardiac Disease
- Cardiovascular Operative Management
- Pharmacology
- General Principles of Cardiovascular Medicine
Become a member
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Table of Contents
- How to Prepare for the Boards
- General Principles of Cardiovascular Medicine
- Arrhythmias
- Coronary Artery Disease
- Heart Failure & Cardiomyopathy
- Valvular Disease
- Pericardial Disease
- Congenital Heart Disease
- Vascular Diseases
- Systemic Hypertension and Hypotension
- Pulmonary Circulation Disorders
- Systemic Disorders Affecting the Circulatory System
-
Miscellaneous
- Cardiovascular Genetics
- CPR, Post-Resuscitation Care
- Cardiac Critical Care
- Sleep Disordered Breathing
- Sports Cardiology
- Pregnancy and Cardiac Disease
- Cardiovascular Operative Management
- Pharmacology
- General Principles of Cardiovascular Medicine
<div class="relative">
<section aria-label="">
<details accordion name="" class="isolation_isolate m-b_3">
<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
<hgroup class="flex flex_row">
<span class="fa-stack flex_shrink m_2 br_radius">
<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
</span>
<h3 class="flex_auto m-y_2 inline-block self_center">Learn about ACC</h3>
</hgroup>
</summary>
<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
<div data-content>
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
</div>
</details>
<details accordion name="" class="isolation_isolate m-b_3">
<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
<hgroup class="flex flex_row">
<span class="fa-stack flex_shrink m_2 br_radius">
<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
</span>
<h3 class="flex_auto m-y_2 inline-block self_center">Become a member</h3>
</hgroup>
</summary>
<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
<div data-content>
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
</div>
</details>
</section>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6731
4.2 Advertisment Spaces
Advertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.
Example
Default styling
<div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
<div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
<a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"/></a>
</div>
<small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 6820
4.3 Cookie Banner
Description: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.
- The system will present user a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
- The system will allow the user to dismiss the pop up by clicking the Accept/OK button
- The system will allow the ACC Admin to "reset" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
- The system will track and record the users date/time when they accepted the pop up.
Example
Default styling
This site uses cookies to improve your experience.
By continuing to use our site, you agree to our Cookie Policy, Privacy Policy and Terms of Service
NOTE:
This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.<div class="'fixed' b_0 r_0 l_0 grid justify-content-center bg_acc opacity_8 z_5">
<div class="flex_row:md flex_column flex">
<div class="flex_auto c_white p_3 p_4:md">
<h1>This site uses cookies to improve your experience. </h1>
<p>By continuing to use our site, you agree to our <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/cookie-policy" target="_blank">Cookie Policy</a>, <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/privacy-policy">Privacy Policy</a> and <a target="_blank" class="link c_white underline h:undecorated" href="https://www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a></p></div>
<div class="flex_none grid justify_center p_5:md p_4 text_center">
<a class="btn btn-primary self_center p-x_5 shadow_overlap-light">OK</a>
</div>
</div>
</div>Code Sample
4.5 Component.Structures
Source: dist/css/cardiosmart_boot.css, line 7340
4.5.1 Tabs
experimental
A simple way to show small groups of content that should have the same level of reading hierarchy.
Sub.Component.Structures.Tabs.Tab.LinkActives - Active Tab
Sub.Component.Structures.Tabs.Tab.Link - Tab
Sub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab
Sub Components in Design:
Example
Default styling
caution:
This item is not finalized and might be subject to changeNOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light" id="tabContentLight" role="tablist">
<ul class="flex_column flex_row:md nav">
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink" role="tab" aria-controls="ActiveLink" aria-selected="true"
class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
href="#">Active</a>
</li> <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink" role="tab" aria-controls="BasicLink" aria-selected="true"
class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li> <li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
<a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li> </li>
</ul>
</nav>
<div class="bg_black-_05 br-bl_radius br-br_radius m-x_3 p_4 reading-typography shadow_emboss-light tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLink" role="tabpanel" aria-labelledby="ActiveLink">
<h2 class="capitalize"> consectetur adipisicing elit </h2>
Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.</div>
<div class="tab-pane fade" id="BasicLink" role="tabpanel" aria-labelledby="BasicLink">
<h2 class="capitalize">Lorem ipsum dolor sit </h2>
Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 7510
4.5.2 UI Tabs
experimental
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Example
Default styling
caution:
This item is not finalized and might be subject to changeNOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.<div class="br_solid br_1 br_black-3">
<nav class="flex flex_row font_ui relative" id="tabContentLight" role="tablist">
<ul class="flex flex_auto flex_nowrap flex_row:md flex_column nav overflow_hidden font-size_up ul_none">
<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#"
tabindex="-1"
aria-disabled="true">
Disabled</a>
</li> </ul>
</nav>
<div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
<div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 7544
4.5.2.1 UI Tabs Overflow
experimental
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Example
Default styling
caution:
This item is not finalized and might be subject to changeNOTE:
Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.<div class="br_solid br_1 br_black-3">
<nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist">
<a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-left"></i>
</a>
<ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#"
tabindex="-1"
aria-disabled="true">
Disabled</a>
</li> </ul>
<a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-right"></i>
</a>
</nav>
<div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
<div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
<div class="reading-typography ">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
<details>
<summary ><strong>Table of Contents</strong></summary>
<div>
<ol>
<li data-line="0" dir="auto">How to Prepare for the Boards</li>
<li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
</li>
<li data-line="2" dir="auto">Arrhythmias</li>
<li data-line="3" dir="auto">Coronary Artery Disease</li>
<li data-line="4" dir="auto">Heart Failure & Cardiomyopathy</li>
<li data-line="5" dir="auto">Valvular Disease</li>
<li data-line="6" dir="auto">Pericardial Disease</li>
<li data-line="7" dir="auto">Congenital Heart Disease</li>
<li data-line="8" dir="auto">Vascular Diseases</li>
<li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
<li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
<li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
System</li>
<li data-line="12" dir="auto">
Miscellaneous
<ul>
<li data-line="13" dir="auto">Cardiovascular Genetics</li>
<li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
<li data-line="15" dir="auto">Cardiac Critical Care</li>
<li data-line="16" dir="auto">Sleep Disordered Breathing</li>
<li data-line="17" dir="auto">Sports Cardiology</li>
<li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
<li data-line="19" dir="auto">Cardiovascular Operative Management
</li>
<li data-line="20" dir="auto">Pharmacology</li>
<li data-line="21" dir="auto">General Principles of Cardiovascular
Medicine</li>
</ul>
</li>
</ol>
</div>
</details>
</div> </div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 7665
4.5.2.2 Scroll Overflow Script
experimental
Description: Javascript is needed to make the scrolls work on the page
Example
Default styling
Markup:
caution:
This item is not finalized and might be subject to changeMarkup: