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
The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
Example s
Watch
when the main asset of the loaded page is a video or live stream.
Join
when the main asset of the loaded page is an online meeting or webinar.
Listen
when the main asset of the loaded page is a podcast or audio.
View
when the main asset of the loaded page is a graphic, pdf, or slide deck.
Attachments can be released after access to the presentation or session UI has been granted. In these cases the button is disabled. And an alert is displayed giving the time when it will be available.
Example
Default styling
Attachments
NOTE:
This pattern is using bootstrap modal to display the message. The IDs of the modal and bs-targets are hard coded in the pattern and need to be dynamic for production.
<div class="cursor_not-allowed" onclick="alert('This attachment is not available to be downloaded at this time. You can download the attachment when it is available at Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:45 p.m')">
<span aria-label="download attachments locked" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100 disabled" ><i class="far fa-lock"></i> Attachments</span>
</div>
Description: The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
Abstract flags are used to indicate that an abstract is awarded for some reason. Use the default and star for most reasons. If there is a need for three levels of awards then use star and trophy alt or the angle up icons. In the content of the page you should denote the legend of the icons used.
Example s
fa-star
this denote the premium awarded abstracts (e.g. top 10)
fa-angle-up
this denote the premium awarded abstracts (level up 1)
fa-angle-double-up
this denote the premium awarded abstracts (level up 2)
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.FullName - Location
Data Elements:
Example s
block
use block on the role type label to stack the faculty names.
Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
FORMAT:
This element uses data that has strict data formatting requirements. See the data tab for more information.
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 [modifier]">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 [modifier]">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.FullName - Location
Sub
Components in Design:
Example s
block
use block on the role type label to stack the faculty names.
Session Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Session Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
Session Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Session Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
When a presentation is in a single state the combination of session roles and presentation roles are shown.
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.FullName - Location
Sub
Components in Design:
Example s
block
use block on the role type label to stack the faculty names.
Session Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Session Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
inline-block
use inline-block on the role type label to keep all the faculty in wrapping single line.
Session Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Session Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 [modifier]">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
The chat window is used to display the chat in player pages.
Example
Default styling
Chat
collapse
(1:44 PM) Lovely Day : Chat
(2:13 PM) Lovely Day : Chat some more
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:19 PM) Lovely Day : Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
(3:48 PM) Lovely Day : test
(3:50 PM) Matt Watier : hello
<div class="br_solid br_radius br_1 br_black-3 shadow_overlap-light p_4:lg p_3 panel panel-default flex flex_column gap-y_3 " id="panel-chat">
<div class="panel-heading bg_transparent flex flex_row">
<h4 class="panel-title font_bold font_display c_primary m_0 flex_auto self_center">Chat</h4>
<div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseChatWindow" role="button" aria-expanded="true" aria-controls="#CollapseChatWindow">
<div class="flex_none self_center"> collapse </div>
<div class="flex_none" >
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div>
</div> </div>
<div id="CollapseChatWindow" class="collapse show">
<div class="br_1 br_black-2 br_radius br_solid flex_auto h_20 h_auto:md loading-log m-b_4 overflow_auto p-r_3 panel-body reading-typography relative scrollbar-mini shadow_emboss-light min-h_5xlh min-h_20:md min-h_30:lg">
<div class="load-log p_3 absolute t_0 r_0 l_0 b_0 overflow_unset flex flex_column gap-y_3" data-log-id="2">
<div class="msgln">(1:44 PM) <b> Lovely Day </b>: Chat<br></div>
<div class="msgln">(2:13 PM) <b> Lovely Day </b>: Chat some more<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
<div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
<div class="msgln">(2:19 PM) <b> Lovely Day </b>: Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.<br></div>
<div class="msgln">(3:48 PM) <b> Lovely Day </b>: test<br></div>
<div class="msgln">(3:50 PM) <b> Matt Watier </b>: hello<br></div>
</div>
</div>
<div class="panel-footer flex_none m-t_auto">
<form name="message" action="">
<div class="form-group flex flex_row nowrap">
<input name="usermsg" type="text" id="usermsg" class="form-control br-br_square br-tr_square flex_auto" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
<input name="submitmsg" type="submit" id="submitmsg" value="Add" class="btn btn-primary br-tl_square br-bl_square flex_none">
<input type="hidden" name="user_client_portal_reg_id" id="user_client_portal_reg_id" value="10">
<input type="hidden" name="chat_id" id="chat_id" value="2">
<input type="hidden" name="client_portal_presentation_id" id="client_portal_presentation_id" value="2">
<input type="hidden" name="client_portal_id" id="client_portal_id" value="1">
<input type="hidden" name="screen_name" id="screen_name" value=" Matt Watier ">
</div>
</form>
</div>
</div>
</div>
When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.
ClassList:
Sub.ClassList.Border.BlackTop - Border Top
Sub.FacultyList - Faculty List
Sub.ActionButtons.Favorite.Small - Small Action Button
Sub
Components in Design:
Sub.Data.Presentation.Title - Title
Sub.Data.Presentation.LiveTime - Live Time
Data Elements:
Example
Default styling
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
11:45 – 11:49 a.m. ET
FORMAT:
This element uses data that has strict data formatting requirements. See the data tab for more information.
<li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li>
When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.
ClassList:
Sub.ClassList.Border.BlackTop - Border Top
Sub.FacultyList - Faculty List
Sub.ActionButtons.Favorite.Small - Small Action Button
Sub
Components in Design:
Sub.Data.Presentation.Title - Title
Sub.Data.Presentation.LiveTime - Live Time
Data Elements:
Example
Default styling
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
Role Type 1:
Pepper H. Soda III, MD, FACC ( New York, NY, USA)
Role Type 2:
Dianna Denesik III ( New York, NY, USA)
Miguel Romaguera ( New York, NY, USA)
Jeanette Franecki ( New York, NY, USA)
11:45 – 11:49 a.m. ET
Introduction 1 min
Presentation 25 min
Panel Discussion 5 min
FORMAT:
This element uses data that has strict data formatting requirements. See the data tab for more information.
NOTE:
This might not function completely because of the JavaScript on the page in side the styleguide documentation.
<li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
<div class="br-b_2 br_black-2 br_solid m-b_n3 m-t_3 m-x_n4">
<button class="bg_black-2 bg_transparent br-bl_square br-br_square br_0 br_br_square c_primary-n2 h:c_primary-n4 font-size_down-1 link m-x_4 p-x_4 p-y_3 lh_1" type="button" data-toggle="collapse" data-target="#extendPresentationData" aria-expanded="true" aria-controls="extendPresentationData" data-bs-toggle="collapse">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i> Presentation Details </button>
<div class="collapse show" id="extendPresentationData" style="">
<div class="bg_black-2 br_none br_square card card-body">
<ul class="ul_none flex flex_column items_stretch">
<li class="br-b_1 br_solid br_black-3"> Introduction <span class="c_primary font_bold float_right">1 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Presentation <span class="c_primary font_bold float_right">25 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Panel Discussion <span class="c_primary font_bold float_right">5 min</span>
</li>
</ul>
</div>
</div>
</div>
</li>
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Sub
Components in Design:
Example
Default styling
Drugs Generic
collapse
NOTE:
by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.
A type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out. Authors, and mesh terms can use this pattern to add them as a filter to the search page.
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Sub
Components in Design:
Example
Default styling
Primary Category
collapse
NOTE:
by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.
To purchase, please click the "Register" button below. Once you have completed your purchase, please wait 15 minutes to allow the system to process the information.
If you have just registered and you have waited 15 minutes and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].
A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels.
Markup:
A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels.
Markup:
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.
Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.
<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>
Description: Description of the award can be html or text and may include a link.
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
Ut reiciendis et possimus rerum animi.
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
Et cumque distinctio maxime maiores aut labore ut est esse.
Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>
<ul>
<li>Ut reiciendis et possimus rerum animi.</li>
<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>
<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>
</ul>
<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>
<a href="https://acc.org" target="_blank">Watch Video</a>
Description:
simple html text that describes the faculty member
Example
Default styling
Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.
<p>Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.</p>
Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.
<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>
Description: Short html description of the sponsor or the product.
Example
Default styling
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
Ut reiciendis et possimus rerum animi.
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
Et cumque distinctio maxime maiores aut labore ut est esse.
Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>
<ul>
<li>Ut reiciendis et possimus rerum animi.</li>
<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>
<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>
</ul>
<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</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)
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 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)
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)
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)
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="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>
