Source: dist/css/acc_boot.css , line
7149
7
Subs
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as
sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data
points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone
but are composed into larger, reusable structures.
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,
or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials
({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
Common use cases: {{> 'Sub.Sub.Data.Duration'}} — Displays session duration{{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier{{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
Naming Convention: Sub.Type.Name — Organized by category (e.g., Data,
Credit, ActionButtons, ClassList)
NOTE:
Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.
Source: dist/css/acc_boot.css , line
6884
7.1.1.1
Read More Arrow
This stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.
Example
Default styling
<span class="fa-stack font_6 order_2">
<i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
<i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
</span>
Source: dist/css/acc_boot.css , line
9588
7.1.2
Content List
Content List Subcomponents
Source: dist/css/acc_boot.css , line
9599
7.1.2.1.1
Calendar Block
Calendars show the range of dates from start to end of the live moments of the date. It doesn't include the extended dates of on demand.
Example
Default styling
<div class="flex_none" style="width: clamp(75px, 10vw, 125px);">
<div class="cal-date text_center font_3">
<a class="bg_primary block c_white flex_column flex justify_stretch h:bg_pimary-n2 h:undecorated" href="">
<span class="block flex_none font-size_down p-y_1">Apr</span>
<span class="block br-b_2 br-t_2 br_solid flex_auto font-size_up-1 font_xbold grid items_center p-x_4 text_center aspect_16x9 "><span class="nowrap">22 - 23
</span></span>
<span class="block flex_none font-size_down p-y_1">2022</span>
</a>
</div>
</div>
Source: dist/css/acc_boot.css , line
9669
7.1.2.1.2
Credits
Credits are used to display the value of the content and what type of certification it offers.
Sub.Component.ContentList.Item.SingleCredit - Credit Chiclets
Example
Default styling
<div class="credits">
<ul class="ul_none flex flex_wrap font_n2 font_n1:md font_n1:print self_end">
<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
<div class="inline-block br_1 br_radius c_white br_CNE-n1 bg_CNE br_solid">
<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
<span class="flex_auto">CNE</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
</div>
</div>
</li> <li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
<div class="inline-block br_1 br_radius c_white br_CME-n1 bg_CME br_solid">
<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
<span class="flex_auto">CME</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
</div>
</div>
</li> <li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
<div class="inline-block br_1 br_radius c_white br_COP-n1 bg_COP br_solid">
<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
<span class="flex_auto">COP</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
</div>
</div>
</li> </ul>
</div>
Source: dist/css/acc_boot.css , line
9642
7.1.2.1.3
Credit Chiclets
This pattern is exactly the same with the needed markup class of the credit color.
Example s
CNE
Nursing Education
CME
Medical Education
NOTE:
This pattern relies on the the inclusion of the credit color codes style sheet.
<li class="block inline-block:md flex_shrink block:print m-y_2 m-x_2">
<div class="inline-block br_1 br_radius c_white br_[modifier class]-n1 bg_[modifier class] br_solid">
<div class="flex flex_nowrap p-y_2 p-x_3 lh_2">
<span class="flex_auto">[modifier class]</span> <span class="flex_shrink"><i class="fa-horizontal-rule fa-rotate-90 far"></i></span> <span class="flex_auto font_bold">1</span>
</div>
</div>
</li>
Source: dist/css/acc_boot.css , line
9624
7.1.2.1.4
Image Thumbnails
images thumbnails are used to display the images associated with the content. the aspect of the images are 1:1.
Example
Default styling
<div class="aspect_1x1 flex_none" style="width: clamp(75px, 10vw, 125px);">
<img src="https://picsum.photos/110/110" alt="" class="w_100">
</div>
Source: dist/css/acc_boot.css , line
7444
7.1.4.1.1.1
Tab: Basic
Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect
Example
Default styling
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink" role="tab" aria-controls="BasicLink" aria-selected="true"
class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">Link</a>
</li>
Source: dist/css/acc_boot.css , line
7425
7.1.4.1.1.2
Tab: Active
Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect
Example
Default styling
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink" role="tab" aria-controls="ActiveLink" aria-selected="true"
class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
href="#">Active</a>
</li>
Source: dist/css/acc_boot.css , line
7463
7.1.4.1.1.3
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Example
Default styling
<li class="br-t_3 br_white-0 br_solid:md m-l_1 nav-item">
<a class="br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
Source: dist/css/acc_boot.css , line
7347
7.1.4.1.2
Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Example
Default styling
<div class="m-y_4 bg_acc p_4" id="nav_jump">
<nav class="bg_black-2 c_white br_3 br_radius br_solid br_black-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>
Source: dist/css/acc_boot.css , line
7386
7.1.4.1.2.1
Tab Dark: Basic
Description: Dark Tab Basic Nav
Example
Default styling
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4">
Link
</a>
</li>
Source: dist/css/acc_boot.css , line
7368
7.1.4.1.2.2
Tab Dark: Active
Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect
Example
Default styling
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
<a class="a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active">
Active
</a>
</li>
Source: dist/css/acc_boot.css , line
7406
7.1.4.1.2.3
Tab Dark: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Example
Default styling
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item ">
<a class="bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md" href="/on-demand/industry-stage#nav_jump" target="_self">
Disabled
</a>
</li>
Source: dist/css/acc_boot.css , line
7557
7.1.4.2.1
Tab: Default
experimental
Description: Active State of Tab. Add and remove the active is-active class from the li-tag toggle the active effect
Example
Default styling
caution:
This item is not finalized and might be subject to change
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
<li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li>
Source: dist/css/acc_boot.css , line
7581
7.1.4.2.1.1
Tab: Active
experimental
Description: Active State of Dark Tab. Add and remove the active is-active class from the li-tag toggle the active effect
Example
Default styling
caution:
This item is not finalized and might be subject to change
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li>
Source: dist/css/acc_boot.css , line
7609
7.1.4.2.1.2
Tab: Disabled
experimental
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Example
Default styling
caution:
This item is not finalized and might be subject to change
NOTE:
Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
<li class="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>
Source: dist/css/acc_boot.css , line
7199
7.2
Data
There are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.
Source: dist/css/acc_boot.css , line
5973
7.2.1
Agenda Item
Description:
Agenda items are any event or sessions that are scheduled for a specific date, location, and time.
Source: dist/css/acc_boot.css , line
6027
7.2.1.1
Date
Description:
There is usually a delay to when recording will make it to on demand. This is the time that recording will be available.
Example
Default styling
FORMAT:
Day-of-Week, Month-Abbreviation. Day, Year
Source: dist/css/acc_boot.css , line
6041
7.2.1.2
Date and Time
Description:
This is when you need to show Date and Time
Sub.Data.Agenda.Date - Date
Sub.Data.Agenda.Time.Start - Start Time
Example
Default styling
Saturday, Nov. 20, 2021 @ 11:15 a.m.
EDT
FORMAT:
Day-of-Week, Month-Abbreviation. Day, Year @ Hour:Minute 'a.m.'/'p.m' Abbreviation-of-Timezone.
NOTE:
Use the simple abbreviation for the timezone without Daylight Savings Time. IE: ET not EDT or EST.
Saturday, Nov. 20, 2021 @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
Source: dist/css/acc_boot.css , line
6013
7.2.1.3.1
Time Moment Start End
Description:
The time at which a Agenda item is scheduled to end.
Example
Default styling
FORMAT:
12 hour with 'a.m.'/'p.m'.
Source: dist/css/acc_boot.css , line
5999
7.2.1.3.2
Time Moment
Description:
The time at which a Agenda is item is scheduled to be active, give access, or start playing.
Example
Default styling
FORMAT:
12 hour with 'a.m.'/'p.m'.
Source: dist/css/acc_boot.css , line
5983
7.2.1.4
Time Range
Description:
The range of time at which a Agenda item is in a certain state.
Example
Default styling
@ 11:15 a.m. – 12:15 p.m.
EDT
FORMAT:
12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.
NOTE:
The 'a.m.'/'p.m.' if the same should only occur on the last time mark. 11:15 a.m. - 11:30 a.m. should be shortened to 11:15 - 11:30 a.m.
@ 11:15 a.m. – 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
Source: dist/css/acc_boot.css , line
6061
7.2.2
Member
Description:
Often we need to represent a member as a Faculty or Chair who created or participated an initative.
Source: dist/css/acc_boot.css , line
6092
7.2.2.1
Full Name
The full name of the Member member
Example
Default styling
Pepper H. Soda III, MD, FACC
FORMAT:
First Name MI (if known) Last Name Suffix (Jr., Sr., the III ), Optional Degree, Optional ACC Honorifics, Optional Exceptions Honorifics
Pepper H. Soda III, MD, FACC
Source: dist/css/acc_boot.css , line
6106
7.2.2.2
Location
Description:
The location of the Member member
Example
Default styling
FORMAT:
City, State, Country
NOTE:
if the conference country is USA you can drop the country if it is USA.
Source: dist/css/acc_boot.css , line
6071
7.2.2.3
Photo
Description:
A photo of the member
Example
Default styling
FORMAT:
300px by 300px
<img
class="aspect_1x1 w_100 "
src="https://i.pravatar.cc/300"
alt="Pepper H. Soda III, MD, FACC"
/>
Source: dist/css/acc_boot.css , line
6122
7.2.2.4
Title
Description:
the roles of the Member member within the session
Example
Default styling
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital
FORMAT:
Institution Title, Institution Division, Institution
NOTE:
This format is currently not being enforced.
Physician-in-Chief, Department of Cardiology, Mount SugarLoaf Hospital
Source: dist/css/acc_boot.css , line
6141
7.2.2.4.1
Institution
Description:
Institution of the Member member where they hold a title
Example
Default styling
Source: dist/css/acc_boot.css , line
6154
7.2.2.4.2
Institution Division
Description:
The Division of the Institution of the Member member where they hold a title
Example
Default styling
Source: dist/css/acc_boot.css , line
6167
7.2.2.4.3
Institutional Title
Description:
the roles of the Member member within the session
Example
Default styling
Source: dist/css/acc_boot.css , line
7181
7.3
Recipe
Patterns that are used through out the refactors on ACC.org
Source: dist/css/acc_boot.css , line
9112
7.3.1.1.1
Grouping List Item
A flexible layout pattern used to present concise feature groupings or content benefits in a visually structured way. Each group includes icon, group heading, and a short list of actionable or informative bullet points. Use this pattern to highlight service categories, user benefits, or grouped resources.
The consistent visual hierarchy ensures scannability and reinforces clarity, making it effective for marketing pages and dashboards.
Sub.ClassList.Grid.Item - Gridlist Item Classes
Example
Default styling
Distinctio et Consequatur
NOTE:
Each list time should be distinct and Only ONE Link
<li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
<i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw" aria-hidden="true"></i>
<div class="font-size_up">
<div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
Distinctio et Consequatur
</div>
<ul class="ul_square marker_accent font-size_down opacity_8 c_black">
<li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
<li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
<li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
<li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
</ul>
</div>
</li>
Source: dist/css/acc_boot.css , line
8993
7.3.1.2.1
Icon and Description
The Compound Icon and Text List Item is a reusable component designed to present key content alongside a relevant visual icon. This pattern supports skimmability, clarity, and strong information hierarchy, making it ideal for benefit statements, feature lists, or modular marketing blocks.
Sub.ClassList.Grid.Item - Gridlist Item Classes
Example
Default styling
nihil amet distinctio
Rerum modi quis Nobis id a harum enim rem in ipsum. Natus rem est dolorem..
NOTE:
If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.
<li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
<i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears" aria-hidden="true"></i>
<div class="font-size_up text_center text_left:md">
<strong class="block font_bold font_display not-link c_inherit-all lh_2 m-b_3 m-b_0:md" style="text-wrap-style: balance;">
nihil amet distinctio
</strong>
<span class="block font-size_down opacity_8 c_black">
<strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
</span>
</div>
</li>
Source: dist/css/acc_boot.css , line
9022
7.3.1.2.2
Icon and Description with Link
The Compound Icon and Text List Item is a reusable component designed to present key content alongside a relevant visual icon. This pattern supports skimmability, clarity, and strong information hierarchy, making it ideal for benefit statements, feature lists, or modular marketing blocks.
Sub.ClassList.Grid.Item - Gridlist Item Classes
Example
Default styling
Pass Your Boards with Confidence
Nostrum et eveniet perspiciatis in mollitia et enim consequatur dolorem deserunt Action Link .
NOTE:
If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.
<li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
<i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap" aria-hidden="true"></i>
<div class="font-size_up text_center text_left:md">
<strong class="block font_bold font_display not-link c_inherit-all lh_2 m-b_3 m-b_0:md" style="text-wrap-style: balance;">
Pass Your Boards with Confidence
</strong>
<span class="block font-size_down opacity_8 c_black">
<strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt <a class="expanded-click-area link" href="#">Action Link</a></strong>.
</span>
</div>
</li>
Source: dist/css/acc_boot.css , line
9083
7.3.1.3.1
Linked Icon & Description
The Compound Icon and Text List Item that is linked an assoicated action is styled differently with a background hover effect.
Sub.ClassList.Grid.Item - Gridlist Item Classes
Example
Default styling
NOTE:
If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.
<li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius h:bg_primary-4">
<i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap" aria-hidden="true"></i>
<a class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
<strong class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
Pass Your Boards with Confidence
</strong>
<span class="block font-size_down opacity_8 c_black" >
<strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.
</span>
</a>
</li>
Source: dist/css/acc_boot.css , line
9051
7.3.1.3.2
Icon & Description: Read More
The Read More Icon and Description is intentionally designed differntly.
Sub.Component.Common.ReadMoreArrow - Read More Arrow
Sub.ClassList.Grid.Item - Gridlist Item Classes
Example
Default styling
NOTE:
This should be the design when you are including a read more action to go with a Grid List with Text and Descriptions.
<li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
<span class="fa-stack font_6 order_2">
<i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
<i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
</span> <div class="font-size_up text_center text_left:md order_1">
<strong class="block font_bold font_display not-link c_inherit-all lh_2 m-b_3 m-b_0:md" style="text-wrap-style: balance;">
Read More
</strong>
<span class="block font-size_down opacity_8 c_black">
about our <a class="expanded-click-area link" href="#">Member Benefits</a>.
</span>
</div>
</li>
Source: dist/css/acc_boot.css , line
8974
7.3.1.4
Icon and Header
The Compound Icon and Header is the most basic of the grid list content items and needs to have a link for each item.
Example
Default styling
<li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
<i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
<span class="font-size_up font_medium">
<a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
</span>
</li>
Source: dist/css/acc_boot.css , line
9268
7.3.2.1.1
Price Bento Price Card
The Bento Pricing Card is a flexible pricing presentation component designed for purchase plan options. It supports multiple price tiers and optional notes, accommodating varied member types and durations. This component ensures consistent styling, responsive behavior, and semantic clarity across different purchase contexts.
Use when: you need to visually present one or more pricing options with supporting content like membership type and terms.
Do not use when: displaying simple, single-line prices or ungrouped price information not related to purchasing tiers.
Example s
primary
Used for Member
$900 / 5 year
or
$300 / 1 year
secondary
Used for Non-Member
$900 / 5 year
or
$300 / 1 year
accent
Used for Any Reduced Pricing
$900 / 5 year
or
$300 / 1 year
NOTE:
This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!
<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_[modifier class]-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography color_inherit">
<header item-label="price-tier" class="items_top m-b_3:md m-b_4">
<h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">[modifier class]</h2>
</header>
<main class="m-t_auto">
<div item-label="price-cost-breakdown">
<h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
</div>
<div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
<span class="flex_auto grid">
<span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
</span>
<span class="flex_shrink p-x_3 lh_1 text_center">
or
</span>
<span class="flex_auto grid">
<span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
</span>
</div>
<div item-label="price-cost-breakdown">
<h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
</div>
</main>
<footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li>
Source: dist/css/acc_boot.css , line
9448
7.3.2.2.1
Price Table Card Dark
There is the preferred plan in the price table it is best to swap the colors and use the primary coloring.
Example
Default styling
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
<li data-element="data-table" class="flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold bg_-n2">
<header class="font_display font_4">
<h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 "></h2>
<h3 class="font-size_up-2 lh_2"><span class="font_bold c_white">$99</span><span>/Month</span></h3>
</header>
<main>
<p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)</p>
<ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9">
<li><i class="fas fa-check-circle m-r_2 c_primary-5"></i></li>
<li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Automated</li>
<li><i class="fas fa-check-circle m-r_2 c_primary-5"></i>Cross-platform</li>
</ul>
</main>
<footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn_primary bg_white h:bg_white-5 h:undecorated ">Choose Plan</a></footer>
</li>
Source: dist/css/acc_boot.css , line
9417
7.3.2.2.2
Price Table Card Light
A combination UI that shows the price point and value for a product with a nav button to start the purchase.
Example
Default styling
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
<li data-element="data-table" class="flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4 shadow_bevel-light ">
<header class="font_display font_4">
<h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 ">Basic</h2>
<h3 class="font-size_up-2 lh_2"><span class="font_bold c_black">$39</span><span>/Month</span></h3>
</header>
<main>
<p>Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)</p>
<ul class="ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9">
<li><i class="fas fa-check-circle m-r_2 c_primary"></i> Quality-focused</li>
<li><i class="fas fa-check-circle m-r_2 c_primary"></i> Phased</li>
<li><i class="fas fa-check-circle m-r_2 c_primary"></i> Automated</li>
<li><i class="fas fa-times-circle m-r_2 c_alert-n2"></i> Cross-platform</li>
</ul>
</main>
<footer class="m-b_n3:md m-t_auto"><a href="" class="btn btn-primary h:undecorated">Choose Plan</a></footer>
</li>
Source: dist/css/acc_boot.css , line
9479
7.3.2.2.3.1
Price Table SimpleCard Dark
Price tables can be simplified to but always should have the associated action button.
Example s
.primary
Used for Member
primary
$860
/Annual Dues
USD
.secondary
Used for Non-Member
secondary
$860
/Annual Dues
USD
.accent
Used for Any Reduced Pricing
<li data-element="data-table" class="bg_[modifier class]-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
<header class="font_display font_4">
<h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">[modifier class]</h2>
<h3 data-element="table-price" class="font-size_up-2 lh_2">
<span class="font_bold c_white">$860</span>
<span>/Annual Dues</span>
</h3>
</header>
<main>
</main>
<hr class="br_dashed br_solid br_white-4 m-t_2">
<ul class="c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
<li class="text-indent_n1">
<span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span> Application Fee
</li>
</ul>
<footer class="m-b_n3:md m-t_auto">
<a class="btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9" href="#">Join Now</a>
</footer>
<abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
</li>
Source: dist/css/acc_boot.css , line
9521
7.3.2.2.3.2
Price Table SimpleCard Light
Price tables can be simplified to but always should have the associated action button.
Example s
.primary
Used for Member
primary
$860
/Annual Dues
USD
.secondary
Used for Non-Member
secondary
$860
/Annual Dues
USD
.accent
Used for Any Reduced Pricing
<li data-element="data-table" class="bg_[modifier class]-4 c_black br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
<header class="font_display font_4">
<h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">[modifier class]</h2>
<h3 data-element="table-price" class="font-size_up-2 lh_2">
<span class="font_bold">$860</span>
<span>/Annual Dues</span>
</h3>
</header>
<main>
</main>
<hr class="br_dashed br_solid br_white-4 m-t_2">
<ul class="flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
<li class="text-indent_n1">
<span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span>Application Fee
</li>
</ul>
<footer class="m-b_n3:md m-t_auto">
<a class="btn btn-secondary" href="#">Join Now</a>
</footer>
<abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
</li>
Source: dist/css/acc_boot.css , line
7190
7.3.3
Articles
There are multiple sub components that are used through out the most common page type on ACC.org
Source: dist/css/acc_boot.css , line
10489
7.3.3.1.1
Podcast Player
A multimedia component designed specifically for audio playback. This player features controls for playing, pausing, adjusting volume, and more. It includes a fallback link for browsers that don't support HTML5 audio, as well as a prominent call to action to encourage podcast Subscription.
Example
Default styling
<div class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
<audio class="w_100" controls="">
<source src="http://traffic.libsyn.com/accelaccorg/00000000.mp3" type="audio/mp3">
<p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank" href="http://traffic.libsyn.com/accelaccorg/00000000.mp3">link to the audio</a> instead.</p>
</audio>
<div class="grid items_center justify_center">
<a href="/Latest-in-Cardiology/Features/Podcasts" class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe
to the ACCEL Lite Podcast</a>
</div>
</div>
Source: dist/css/acc_boot.css , line
10452
7.3.3.2.1.1
Twitter Link List
A list of Twitter profiles, each accompanied by a name. Provides an organized display for multiple Twitter links, which could be useful for events, authors, or featured users.
Sub.Recipe.Article.Podcasts.Twitter.Button - Twitter Button
Example
Default styling
<h3>Twitter Links:</h3>
<ul class="br-t_1 br_black-2 br_solid max-w_65 ul_none font_0">
<!-- START: Twitter Link: Duplicate as needed -->
<li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
<span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
<span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
<a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
<i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
<i class="fa-at fas opacity_8 p-r_1"></i>
Tweat_DrSoda
</a> </span>
</li>
<!-- END: Twitter Link -->
<!-- DELETE ME -->
<li class="br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative">
<span class="font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center"> Pepper H. Soda III, MD, FACC</span>
<span class="grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md">
<a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
<i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
<i class="fa-at fas opacity_8 p-r_1"></i>
Tweat_DrSoda
</a> </span>
</li>
<!-- END DELETE ME -->
</ul>
Source: dist/css/acc_boot.css , line
10434
7.3.3.2.1.2
Twitter Button
A styled button for linking to a Twitter profile. The button includes a Twitter icon and a username.
Example
Default styling
<a class="bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
<i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
<i class="fa-at fas opacity_8 p-r_1"></i>
Tweat_DrSoda
</a>
Source: dist/css/acc_boot.css , line
10415
7.3.3.2.2
Related References
An organized list of references or citations. This structure helps users to find additional resources or sources related to the content.
Example
Default styling
Related References:
0000000000000000000000
0000000000000000000000
0000000000000000000000
<h3>Related References:</h3>
<ol class="marker_primary">
<li>0000000000000000000000</li>
<li>0000000000000000000000</li>
<li>0000000000000000000000</li>
</ol>
Source: dist/css/acc_boot.css , line
7208
7.4
Class Lists
Arches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items
Source: dist/css/acc_boot.css , line
7087
7.4.1.1.1
Grid - Triple Card Holder
Example
Default styling
columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
NOTE:
Triple up cards with shaded background are used only in full screen pages
columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
Source: dist/css/acc_boot.css , line
7136
7.4.1.2
GridList Item Basic
Example
Default styling
flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
NOTE:
Icon and Header use differnt classes because they are a simpler component.
flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
Source: dist/css/acc_boot.css , line
7113
7.4.1.3
Grid - Card Holder - 50 split
Example
Default styling
columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
NOTE:
split layouts great for half page cards
columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
Source: dist/css/acc_boot.css , line
7100
7.4.1.4
Triple Split with Sidebar
Example
Default styling
columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
NOTE:
Triple up splits
columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
Source: dist/css/acc_boot.css , line
7126
7.4.1.5
GridList Triple on XL
Example
Default styling
columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none
columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none
Source: dist/css/acc_boot.css , line
7172
7.5
Placeholders
Placeholders are just used across the styleguide. The can be either text or image stand ins for the UI.
Source: dist/css/acc_boot.css , line
6949
7.5.1.1
1024w x 256h
Example
Default styling
https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6920
7.5.1.2
1200w x 300h
Example
Default styling
https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6968
7.5.1.3
Aspect 16x9
Example
Default styling
https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6959
7.5.1.4
Aspect 21x9
Example
Default styling
https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6977
7.5.1.5
300w x 400h
Example
Default styling
https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6940
7.5.1.6
320w x 300h
Example
Default styling
https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6930
7.5.1.7
375w x 250h
Example
Default styling
https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6900
7.5.1.8
600w x 300h
Example
Default styling
https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6910
7.5.1.9
600w x 400h
Example
Default styling
https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
6987
7.5.1.10
square
Example
Default styling
https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
Source: dist/css/acc_boot.css , line
7047
7.5.2.1
Max 100 Character
Example
Default styling
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Source: dist/css/acc_boot.css , line
7057
7.5.2.2
Max 150 Character
Example
Default styling
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
Source: dist/css/acc_boot.css , line
7067
7.5.2.3
Max 200 Character
Example
Default styling
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Source: dist/css/acc_boot.css , line
6997
7.5.2.4
Max 20 Character
Example
Default styling
Di dolores (20 Chars)
Source: dist/css/acc_boot.css , line
7077
7.5.2.5
Max 250 Character
Example
Default styling
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Source: dist/css/acc_boot.css , line
7007
7.5.2.6
Max 30 Character
Example
Default styling
Commodi dolores (30 Characters)
Commodi dolores (30 Characters)
Source: dist/css/acc_boot.css , line
7017
7.5.2.7
Max 40 Character
Example
Default styling
Rerum libg dero pariatur (40 Characters)
Rerum libg dero pariatur (40 Characters)
Source: dist/css/acc_boot.css , line
7027
7.5.2.8
Max 60 Character
Example
Default styling
Sed ut perspiciatis unde omnis iste natus er (60 Characters)
Sed ut perspiciatis unde omnis iste natus er (60 Characters)
Source: dist/css/acc_boot.css , line
7037
7.5.2.9
Max 80 Character
Example
Default styling
Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)
Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)
Source: dist/css/acc_boot.css , line
7217
7.5.3
Rich Text
Example
Default styling
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.
Button
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="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>
