Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Subs

Source: dist/css/library_boot.css, line 7147

9 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. 
<aside class="flex flex_none flex_column gap-y_3 m-l_auto:md  max-w_30:md p-b_4 p-b_4:md w_100">
      <nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
        <a href="#" aria-label="navigate to" class="br_1 br_solid br_white-3 btn btn-secondary flex_auto shadow_overlap-light">Clear Search <i class="fas fa-times p-l_3"></i></a>
      </nav>
</aside>
Copy Code

Source: dist/css/library_boot.css, line 9852

9.1.2 Favorite/Bookmark Button

This button has an active and deactivate state depending on the users select of that media item.

Example s

default

plan button

active

the media item is selected 

<a class="inline-block m-x_n3 m-t_n1 [modifier]">
    <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
        <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
        <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
    </span>
</a>
Copy Code

Source: dist/css/library_boot.css, line 10143

9.1.3 Like Buttons

This buttons are used to rate the videos and download the attachments.

<ul class="ul_none flex flex_row lowercase flex flex_row gap_2">
    <li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
        <a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-up"></i></a>
    </li>
    <li class="br_solid br_black-3 br_radius br_1 h:bg_black-3">
        <a class="p-y_3 p-x_4 " href="#"><i class="fal fa-thumbs-down"></i></a>
    </li>
    <li class="br_solid br_black-3 br_radius br_1 h:bg_black-3 m-l_auto">
        <a class="p-y_3 p-x_4 " href="#"><i class="fal fa-paperclip"></i> Attachments</a>
    </li>
</ul>
Copy Code

Example

Default styling

<div class="customize-tools">
    <ul class="controls ul_none font-size_up-2 c_black-6" id="slider1-customize-controls" aria-label="Carousel Navigation" tabindex="0">
        <li class="prev bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="prev">
            <i class="fal fa-chevron-left"></i>
        </li>
        <li class="next bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="customize" tabindex="-1" data-controls="next">
            <i class="fal fa-chevron-right"></i>
        </li>
    </ul>
</div>
Copy Code

Example

Default styling

<div class="customize-tools">
<ul class="controls ul_none font-size_up-2 c_black-6" id="slider3-customize-controls" aria-label="Carousel Navigation" tabindex="0">
<li class="disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="prev">
    <i class="fal fa-chevron-left opacity_3"></i>
</li>
<li class="disabled next bg_white-8  filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light" aria-controls="slider3" tabindex="-1" data-controls="next">
    <i class="fal fa-chevron-right opacity_3"></i>
</li>
</ul>
</div>
Copy Code

Example

Default styling

<div class="customize-tools relative">
    <ul class="absolute b_4 r_0 l_0 controls ul_none font-size_up-2 c_black-6 flex flex_row gap-x_4" id="slider-customize-controls-vertical" aria-label="Carousel Navigation" tabindex="0">
        <li class="prev bg_white-8 block br-br_radius br-l_0 br-tr_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="prev">
            <i class="fal fa-chevron-up"></i>
        </li>
        <li class="next bg_white-8 block br-bl_radius br-r_0 br-tl_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50" aria-controls="customize" tabindex="-1" data-controls="next">
            <i class="fal fa-chevron-down"></i>
        </li>
    </ul>
</div>
Copy Code

Source: dist/css/library_boot.css, line 7206

9.3 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/library_boot.css, line 9491

9.3 Class Lists

This is a combination of the classes that build common decorative elements or spacing in the design.

Source: dist/css/library_boot.css, line 9504

9.3.1 Body Classes

The list of classes used on the body tag

Example

Default styling

bg_black-4 w_100 p_3:md p_2
NOTE:
Combination of classes used as a common decorators. 
bg_black-4 w_100 p_3:md p_2
Copy Code

Example

Default styling

br-t_1 br_black-3 br_solid 
br-t_1 br_black-3 br_solid
Copy Code

Example

Default styling

br-t_1 br_primary-2 br_solid 
 br-t_1  br_primary-2 br_solid
Copy Code

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
Copy Code

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
Copy Code

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
Copy Code

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
Copy Code

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
Copy Code

Example

Default styling

inset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1
NOTE:
Combination of classes used as a common decorators. 
inset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1
Copy Code

Example

Default styling

inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light
NOTE:
Combination of classes used as a common decorators. 
inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light
Copy Code

Example

Default styling

inset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius texture_light
NOTE:
Combination of classes used as a common decorators. 
inset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius  texture_light
Copy Code

Example

Default styling

m-x_n2 m-x_n3:md m-x_n4:lg
NOTE:
Combination of classes used as a common decorators. 
m-x_n2 m-x_n3:md m-x_n4:lg
Copy Code

Example

Default styling

p_2 p_3:md
NOTE:
Combination of classes used as a common decorators. 
p_2 p_3:md
Copy Code

Example

Default styling

p_2 p_3:md p_4:lg
NOTE:
Combination of classes used as a common decorators. 
p_2 p_3:md p_4:lg
Copy Code

Example

Default styling

p_3 p_4:lg
NOTE:
Combination of classes used as a common decorators. 
p_3 p_4:lg
Copy Code

Example

Default styling

p_4
NOTE:
Combination of classes used as a common decorators. 
p_4
Copy Code

Example

Default styling

p_4 p_5:lg
NOTE:
Combination of classes used as a common decorators. 
p_4 p_5:lg
Copy Code

Example

Default styling

inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2
NOTE:
Combination of classes used as a common decorators. 
inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2
Copy Code

Example

Default styling

inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2
NOTE:
Combination of classes used as a common decorators. 
inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2
Copy Code

Source: dist/css/library_boot.css, line 9521

9.3.5 Page Area

The list of classes used on the body tag

Example

Default styling

p_2 p_3:md isolation_isolate br_radius bg_white-7
NOTE:
Combination of classes used as a common decorators. 
p_2 p_3:md isolation_isolate br_radius bg_white-7
Copy Code

Example

Default styling

p-y_2 p-y_3:md
NOTE:
Combination of classes used as a common decorators. 
p-y_2 p-y_3:md
Copy Code

Example

Default styling

p-y_2 p-y_3:md p-y_4:lg
NOTE:
Combination of classes used as a common decorators. 
p-y_2 p-y_3:md p-y_4:lg
Copy Code

Example

Default styling

p-y_3 p-y_4:lg
NOTE:
Combination of classes used as a common decorators. 
p-y_3 p-y_4:lg
Copy Code

Example

Default styling

p-y_4 p-y_5:lg
NOTE:
Combination of classes used as a common decorators. 
p-y_4 p-y_5:lg
Copy Code

Source: dist/css/library_boot.css, line 8946

9.4 Collapse/Expand

The collapse/expand icon is used to collapse and expand the facet group.

Example

Default styling

collapse 
<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="" role="button" aria-expanded="true" aria-controls="">
  <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>
Copy Code

Example

Default styling

<div class="toggle user-select_none" data-bs-toggle="collapse" data-bs-target="" role="button" aria-expanded="true" aria-controls="">
        <span class="fa-stack">
        <i class="fas fa-square fa-stack-2x"></i>
        <i class="fas fa-minus fa-stack-1x c_white"></i>
        <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white"></i>
        </span>
</div>
Copy Code

Source: dist/css/library_boot.css, line 6882

9.5.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>
Copy Code

Example

Default styling

  • Home 
    • <li class="flex flex_row flex_none h:c_primary lh_2 m-b_1 relative">
    <i class="fal fa-home fa-fw flex_none self_center c_primary font-size_up "></i>
    <a href="../home" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap" title="navigate to home page">
        <span class="display_none flex_auto inline:md self_center m-l_3">Home</span>
    </a>
</li>
    Copy Code

    Source: dist/css/library_boot.css, line 10212

    9.5.2.1.2 Breadcrumb Last Item

    The last Item in the Breadcrumb doesn't include a link to the page and is decorated as highlighted.

    Example s

    Search

    Search Page

  • Page Type Label Search

    • Session Name

    Session Page

  • Page Type Label Session 
    • <li class="flex flex_row flex_auto flex_50 lh_2 m-b_1 overflow_hidden relative c_black-7">
    <i class="fal fa-chevron-left c_primary-n2 m-x_3 self_center font-size_down"></i>
    <div class="flex flex_row flex_nowrap overflow_ellipsis nowrap">
        <span class=" flex_auto self_center">Page Type Label</span>
        <span class=" flex_auto self_center display_inline:md display_none font_medium">[modifier]</span>
    </div>
</li>
    Copy Code 
    <li class="flex flex_row flex_auto flex_50 h:c_primary lh_2 m-b_1 overflow_hidden relative">
    <i class="fal fa-chevron-left fa-fw m-x_3 flex_none self_center c_primary font-size_down"></i>
    <a href="../watching" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap"  title="navigate to X Page">
        <span class=" flex_auto self_center">Page Type Label</span>
        <span class=" flex_auto self_center display_inline:md display_none">[modifier]</span>
    </a>
</li>
    Copy Code 
    <!-- ACCProductLinks -->
<section class="acc-websites flex_auto">
        <ul class="ul_none lh_2 font_0">
            <li class="c_white">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.jacc.org/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">ACC.org</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1 br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.jacc.org/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">JACC Journals</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1 br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://cvquality.acc.org/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">Quality Improvement for Institutions</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="http://cvquality.acc.org/NCDR-Home">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">NCDR</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://cvquality.acc.org/accreditation">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">ACC Accreditation Services</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.cardiosmart.org/For-Clinicians">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">CardioSmart</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.medaxiom.com/">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">MedAxiom</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
            <li class="c_white br_solid br_0 br-t_1  br_white-5">
                <a target="_blank" class="c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3" href="https://www.acc.org/About-ACC/Contact-Us">
                    <span class="flex_shrink inline-block p-r_4:lg p-r_3 p-l_3">Contact Us</span>
                    <i class="c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3"></i>
                </a>
            </li>
        </ul>
    </section>
<!-- /ACCProductLinks -->
    Copy Code

    Source: dist/css/library_boot.css, line 6481

    9.5.2.2.2 Address

    Address and contact information for Heart House

    <section class="address c_white">
    <h3 class="font_accent font_1 m-b_0 font_normal font_regular">American College of Cardiology</h3>
    <address>
        <!-- http://microformats.org/wiki/hcard -->
        <h4 class="m-b_0 font_bold font_copy font_normal font_1 m-t_4">Heart House</h4>
        <div class="flex flex_column flex_row:md font_0 font_copy gap-x_5">
        <div class="flex_auto">
            <ul class="ul_none lh_0">
                <li class="m-b_1 m-b_3:md font_normal">
                    <span class="street-address">2400 N St. NW</span>
                </li>
                <li class="m-b_1 m-b_3:md font_normal">
                    <span class="locality ">Washington</span>,
                    <span class="city-name ">
                <abbr title="District of Colombia">DC</abbr>
                </span>
                    <span class="postal-code">20037</span>
                </li>
                <li class="m-b_1 m-b_3:md font_normal">
                    <a href="mailto:MemberCare@acc.org" class="email c_white text_underline  h:c_white ">
                        <strong class="p-r_2 inline block:md inline:lg">Email:</strong>
                        <span class="inline block:md inline:lg">membercare@acc.org</span></a>
                </li>
            </ul>
        </div>
        <div class="flex_auto">
        <ul class="ul_none lh_0">
            <li class="m-b_1 m-b_3:md font_normal">
                <a tel="+12023756000" href="tel:+12023756000" class="tel c_white h:c_white h:underline">
                <strong class="p-r_2 block inline:lg">Phone:</strong><span class=" block inline:lg">1-202-375-6000</span></a>
            </li>
            <li class="m-b_1 m-b_3:md font_normal">
                <a tel="+18002534636" href="tel:+18002534636" class="tel c_white h:c_white h:underline">
                <strong class="p-r_2 block inline:lg">Toll Free:</strong><span class=" block inline:lg">1-800-253-4636</span></a>
            </li>
            <li class="m-b_1 m-b_3:md font_normal">
                <a fax="+12023757000" href="fax:+12023757000" class="fax c_white h:c_white h:underline">
                <strong class="p-r_2 block inline:lg">Fax:</strong>
                <span class="block inline:lg">1202-375-7000</span>
                </a>
            </li>
        </ul>
        </div>
        </div>
    </address>
</section>
    Copy Code

    Example

    Default styling

    © 2023 American College of Cardiology Foundation. All rights reserved. 
        <div class="texture_light bg_shade-1 p_4">
        <cite class="c_shade-1 font_italic font_bold font_n2 p_2 lh_2">&copy; 2023 American College of Cardiology Foundation. All rights reserved.</cite>
    </div>
    Copy Code

    Source: dist/css/library_boot.css, line 6642

    9.5.2.2.4 Social Links

    The college has a collection of social or secondary platforms we interact with.

    Example

    Default styling

    Stay Connected 

    <!-- Social -->
<h4 class="c_white font_regular font_accent m-b_3 m-b_4:lg text_center text_left:lg">Stay Connected
</h4>
<ul class="flex social-bar ul_none c_white h:c_white m_0">
    <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="bg_youtube social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-youtube"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="bg_linkedin social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-linkedin-in"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="bg_facebook social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-facebook-square"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="bg_twitter social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-square-x-twitter"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://www.instagram.com/americancollegeofcardiology" target="_blank" class="bg_instagram social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-instagram"></i></a></li>
    <!--<li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US" target="_blank" class="bg_google-play social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-google-play"></i></a></li>
    <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="bg_apple-store social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1"><i class="fab fa-apple"></i></a></li>-->
</ul>
<!-- Social -->
    Copy Code

    Source: dist/css/library_boot.css, line 6428

    9.5.2.2.5 Sub Footer

    Description: ACC has some basic legal information that should be on every property.

    <!-- subfooter -->
<div id="subfooter" class="bg_primary c_white font_n1 p-x_4 p-y_4">
    <ul class="block footer-bottom-links ul_none">
        <li class="inline p-r_2 p-y_2"><a href="https://www.acc.org/Footer-Pages/Media-Center"
                    class="c_white-6 h:c_white">Media Center</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Quick-Start-Guide"
                    class="c_white-6 h:c_white">ACC.org Quick Start Guide</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Advertising-and-Sponsorship-Policy"
                    class="c_white-6 h:c_white">Advertising &amp; Sponsorship Policy</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Clinical-Content-Disclaimer"
                    class="c_white-6 h:c_white">Clinical Content Disclaimer</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Editorial-Board"
                    class="c_white-6 h:c_white">Editorial Board</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Privacy-Policy"
                    class="c_white-6 h:c_white">Privacy Policy</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Registered-User-Agreement"
                    class="c_white-6 h:c_white">Registered User Agreement</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Terms-and-Conditions"
                    class="c_white-6 h:c_white">Terms of Service</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/Footer-Pages/Cookie-Policy"
                    class="c_white-6 h:c_white">Cookie Policy</a></li>
            <li class="inline p_2"><a href="https://www.acc.org/sitemap-acc.xml" class="c_white-6 h:c_white">Site
                    Map</a></li>
    </ul>
    <!-- /footer-bottom-links -->
</div>
<!-- /subfooter -->
    Copy Code

    Source: dist/css/library_boot.css, line 7442

    9.5.3.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

  • Link 
    • <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>
    Copy Code

    Source: dist/css/library_boot.css, line 12313

    9.5.3.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

  • Link 
    • <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>
    Copy Code

    Source: dist/css/library_boot.css, line 7423

    9.5.3.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

  • Active 
    • <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>
    Copy Code

    Source: dist/css/library_boot.css, line 12294

    9.5.3.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

  • Active 
    • <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>
    Copy Code

    Source: dist/css/library_boot.css, line 7461

    9.5.3.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.

    <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>
    Copy Code

    Source: dist/css/library_boot.css, line 12332

    9.5.3.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.

    <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>
    Copy Code 
    <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>
    Copy Code 
    <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>
    Copy Code

    Example

    Default styling

  • Link 
    • <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>
    Copy Code

    Example

    Default styling

  • Link 
    • <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>
    Copy Code

    Source: dist/css/library_boot.css, line 7366

    9.5.3.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

    <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>
    Copy Code

    Source: dist/css/library_boot.css, line 12237

    9.5.3.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

    <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>
    Copy Code

    Source: dist/css/library_boot.css, line 7404

    9.5.3.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.

    <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>
    Copy Code

    Source: dist/css/library_boot.css, line 12275

    9.5.3.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.

    <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>
    Copy Code

    Source: dist/css/library_boot.css, line 7555

    9.5.3.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>
    Copy Code

    Source: dist/css/library_boot.css, line 7579

    9.5.3.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

  • Active
    • 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>
    Copy Code

    Source: dist/css/library_boot.css, line 7607

    9.5.3.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.

    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>
    Copy Code

    Source: dist/css/library_boot.css, line 9833

    9.6 Credits Chiclets

    Credits show in the design when they are available to be claimed by the media they are on.

    Example s

    default

    there is no default version of credits it is always a type.

    default

    CME

    CME Credits

    CME

    CNE

    CNE Credits

    CNE 
    <span class="bg_[modifier]-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">[modifier]</span>
    Copy Code

    Example

    Default styling

    • CME
    • CNE
    • AAPA 
    <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
    <li class="lh_0 flex_none">
        <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>    </li>
    <li class="lh_0 flex_none">
        <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>    </li>
    <li class="lh_0 flex_none">
        <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>    </li>
</ul>
    Copy Code

    Source: dist/css/library_boot.css, line 9240

    9.7 Faculty List

    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>
      Copy Code

      Source: dist/css/library_boot.css, line 9269

      9.7.1 Aux Session Faculty List

      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.Location - Location
      Sub Components in Design:

        Example s

        block

        use block on the role type label to stack the faculty names.

        Role Type 1

        • Marty Little ( New York, NY, USA)
        • Eileen Marvin ( New York, NY, USA)
        • Chelsea Dach DVM ( New York, NY, USA)

        Role Type 2

        • Wm Price( New York, NY, USA)
        • Mrs. Jeffrey Cartwright ( New York, NY, USA)
        • CEmmett Spencer( 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

        • Marty Little ( New York, NY, USA)
        • Eileen Marvin ( New York, NY, USA)
        • Chelsea Dach DVM ( New York, NY, USA)

        Role Type 2

        • Wm Price( New York, NY, USA)
        • Mrs. Jeffrey Cartwright ( New York, NY, USA)
        • CEmmett Spencer( New York, NY, USA)
        <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
<div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
  <li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
  <li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
  <li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
<h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
<div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
<ul class="ul_inline-semicolon font_regular font_copy">
  <li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
  <li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
  <li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul>
</div>
        Copy Code

        Source: dist/css/library_boot.css, line 9368

        9.7.2 No Location Faculty List

        When you list non-event areas like Posters, and Abstracts the list removes the location of the person.

        Sub.Data.Faculty.FullName - Full Name
        Sub Components in Design:

          Example s

          block

          use block on the role type label to stack the faculty names.

          • Role Type 1:
          • Pepper H. Soda III, MD, FACC
          • Role Type 2:
          • Dianna Denesik III
          • Miguel Romaguera
          • Jeanette Franecki

          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
          • Role Type 2:
          • Dianna Denesik III
          • Miguel Romaguera
          • Jeanette Franecki
          <ul class="ul_inline-semicolon font_regular font_copy">
  <li class="no-after font_medium c_primary-n1 [modifier]">Role Type 1:</li>
  <li>Pepper H. Soda III, MD, FACC</li>
  <li class="no-after font_medium c_primary-n1  [modifier]">Role Type 2:</li>
  <li>Dianna Denesik III</li>
  <li>Miguel Romaguera</li>
  <li>Jeanette Franecki</li>
</ul>
          Copy Code

          Source: dist/css/library_boot.css, line 9340

          9.7.3 Session Faculty List

          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>
            Copy Code

            Source: dist/css/library_boot.css, line 9306

            9.7.4 Combined Faculty List

            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>
              Copy Code

              Source: dist/css/library_boot.css, line 10360

              9.9 Legal RoadBlock Sub Components

              The legal roadblock is a page that stops the user when they haven't accepted the terms of use or any other legal agreements needed for the use of the product.

              Source: dist/css/library_boot.css, line 10415

              9.9.1 Legal Attestation Statement

              This statement is used to attest that the user has read and accepted the legal agreement. This follows all Legal Content Blocks. Clicking the button will flip the btn-secondary state to 'btn-sucess active'

              Example s

              .btn-success.active

              the accepted state

              By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. 
              <footer id="Agreement1">
    <div class="bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>
    <button class="btn btn-secondary [modifier] c_white h:undecorated float_right"><i class="fas fa-check display_none a:inline-block"></i> I agree</button>
</footer>
              Copy Code

              Source: dist/css/library_boot.css, line 10372

              9.9.2 Legal Content Block

              A legal block will block a user from the program if they user has not signed it. If there is more then one user block all must be accepted before the user can proceed.

              ClassList: Sub.ClassList.Vertical.padding.up-1 - Vertical Padding Up 1 Sub.ClassList.Border.PrimaryTop - Border Primary Top

              Example

              Default styling

              ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement

              The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).

              By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product.

              Click to Read Full Terms of Service.

              I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.

              <article class="isolation_isolate p_1 p-b_4 relative">
    <nav class="r_0 sticky t_0 z_1">
        <div class="absolute flex flex_nowrap flex_row gap-x_3 r_4">
            <!--  Helper Jump links -->
            <a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2" href="#TopAgreement1">
                <span><i class="fas fa-arrow-up p-r_2"></i>top</span>
            </a>
            <a class="c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2" href="#Agreement1">
                <span><i class="fas fa-arrow-down p-r_2"></i>scroll down</span>
            </a>
            <!--  Helper Jump links -->
        </div>
    </nav>
    <header class="bg_white p-t_0 p-b_3 relative z_3">
        <h2 class="bg_white m-t_n2 m_0 p-y_2 p-y_3:md p-y_4:lg">ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>
    </header>
    <main class="z_0 isolation_isolate p-y_2 p-y_3:md p-y_4:lg  br-t_1  br_primary-2 br_solid">
    <!---  Agreement HTML START -->
        <p class="font-size_up">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).    </p><p class="font-size_up">
            By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>
        <p class="font-size_up"><a href="#" class="c_accent-n2 font_bold font_ui link" target="_blank">Click to Read Full Terms of Service.</a></p>
            <p class="">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>
            <!---  Agreement HTML END -->
    </main>
</article>
              Copy Code

              Source: dist/css/library_boot.css, line 9153

              9.10 Pagination

              Pagination is used to navigate through the results.

              <nav aria-label="Pagination" class="flex flex_row p-b_5:lg p-b_4">
    <ul class="pagination flex flex_row ul_none justify_stretch relative lh_0 font_n1 font_medium m-x_auto shadow_bevel-light br_radius overflow_hidden">
        <li class="flex pagination-previous ">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br-tl_radius br-bl_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">
                        <div class="flex flex_row nowrap"><i class="fas fa-arrow-left p-r_3 self_center"></i> <span class="show-for-sr display_none inline:md self_center">Prev</span></div>
                    </div>
                </div>
            </a>
        </li>
        <!---->
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex"><i class="fas  fa-ellipsis-h left"></i></div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">50 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="active ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">51 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">52 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">53 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">54 </div>
                </div>
            </a>
        </li>
        <li class="flex">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex"><i class="fas  fa-ellipsis-h right"></i></div>
                </div>
            </a>
        </li>
        <!---->
        <li class="flex pagination-next">
            <a class="ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br-tr_radius br-br_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3" aria-label="Next Page" style="min-height: unset;">
                <div class="flex block justify_center flex_column ">
                    <div class="flex_auto self_center justify_center flex">
                        <div class="flex flex_row nowrap"><span class="show-for-sr display_none inline:md self_center">Next</span> <i class="fas fa-arrow-right p-l_3 self_center"></i></div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</nav>
              Copy Code

              Source: dist/css/library_boot.css, line 10264

              9.11.1 Auxiliary Data

              Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.

              ClassList: Sub.ClassList.Border.PrimaryTop - Border Primary Top

              Sub.Credits.NonAccredited - Non Accredited Sub.FacultyList.AuxSession - Session Faculty Lists Sub.Credit.Chiclets.Horizontal - Credit Chiclets Horizontal Sub.Tags.Category - Category Sub.Tags.Filter - Tags
              Sub Components in Design:

                Example

                Default styling

                <aside class="">
    <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
    <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
    <ul class="ul_inline-semicolon font_regular font_copy">
      <li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
    </ul>
    </div>
    <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
    <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
    <ul class="ul_inline-semicolon font_regular font_copy">
      <li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
    </ul>
    </div>    <h4 class="font-size_up c_black-6 font_medium capitalize">
        <i class="fas fa-file-certificate p-r_3"></i> Credits
    </h4>
    <div class="p-y_3  br-t_1  br_primary-2 br_solid font-size_down-1">
        <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
            <li class="lh_0 flex_none">
                <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>    </li>
            <li class="lh_0 flex_none">
                <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>    </li>
            <li class="lh_0 flex_none">
                <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>    </li>
        </ul>    </div>
    <h4 class="font-size_up  c_black-6 font_medium">
        <i class="fas fa-tag p-r_3"></i>
        category
    </h4>
    <div class=" br-t_1  br_primary-2 br_solid font-size_down">
        <ul class="ul_inline-comma">
          <li>Channel 1</li>
          <li>Navigating Health Care Economics</li>
        </ul>    </div>
    <h4 class="font-size_up  c_black-6 font_medium">
        <i class="fas fa-tags p-r_3"></i> tags
    </h4>
    <div class=" br-t_1  br_primary-2 br_solid font-size_down">
        <ul class="ul_inline-comma">
            <li>Tag Name 1</li>
            <li>Daugherty - Larkin</li>
            <li>relationships</li>
            <li>web-readiness</li>
        </ul>    </div>
</aside>
                Copy Code

                Example s

                default

                Has zero player

                50

                50% played 

                <aside class="bg_secondary-3 h:bg_primary-3 p-x_4 p-y_3 br_radius flex flex_row texture_dust relative">
    <a class="expanded-click-area" href="player@[modifier]"><i class="fa fa-play p-x_3 c_primary"></i></a>
    <div class="progress w_100 self_center br_black-2 br_solid bg_black-4 br_1 br_round h_0lh font_n4">
        <div class="progress-bar bg_accent" role="progressbar" style="width: [modifier]%" aria-valuenow="[modifier]" aria-valuemax="100"></div>
    </div>
</aside>
                Copy Code

                Example

                Default styling

                • Type Ahead Filter
                  Filtering By
                  collapse
                  less | more
                • Primary Category
                  collapse
                  less | more
                • Drugs Generic
                  collapse
                  less | more
                <div id="filterZone" class="{aspect_1_1:md} {nav-mined} nav-maxed self_start bg_black-3 br_1 br_black-2 br_radius br_solid flex_auto p_2 p_3:md  shadow_emboss-light transition_3 flex flex_column ">
	<nav id="FilterNavContainer" class="flex_auto overflow_hidden self_stretch font_4:lg font_3:md font_2 font_display font_display">
		<ul class="flex flex_column:md flex_row gap_3 justify_start:md ul_none w_100 w_auto:md">
			<li class="a:bg_primary a:c_white a:shadow_overlap-light {aspect_1_1:md} br_radius c_white-8 flex_none grid h:bg_black-7 h:c_white h:shadow_overlap-light nav-item p_0:md p_3">
				<a class="c_inherit-all h:undecorated p_3 lh_1 m-x_n1">
					<i class="far fa-filter p-x_2:md p-y_3 p-y_0:md"></i>
					<span class="font-size_down label lh_0 lowercase self_center font_medium {display_none:md}">Filter</span>
				</a>
			</li>
		</ul>
	</nav>
	<ul id="filterFacets" class="ul_none font_n1 {display_none} opacity_none transition_3 min-h_30:md">
		<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md Filter1">
		    <header class="flex font-size_up m-y_2">
		        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Type Ahead Filter</div>
		    </header>
		    <main class="p_1 collapse show">
		        <div class="p_3 flex flex_row">
		            <input class="br-tr_square br-br_square" type="text" name="" id="" placeholder="Filter Name">
		            <button class="btn btn-secondary br-tl_square br-bl_square"><i class="fas fa-users"></i></button>
		        </div>
		    </main>
		    <header class="flex font-size_up m-y_2">
		        <div class="flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8">Filtering By</div>
		        <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="#collapseTypeAhead" role="button" aria-expanded="true" aria-controls="#collapseTypeAhead">
		          <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>    </header>
		    <main id="collapseTypeAhead" class="p_1 collapse show" style="">
		        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
		            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_0922" id="checkfacetfacet_0922" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_0922" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter facet_0922</span></label></div>
		                    <div class="">
		                        <button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
		                    </div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_1777" id="checkfacetfacet_1777" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_1777" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter facet_1777</span></label></div>
		                    <div class="">
		                        <button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
		                    </div>
		                    <!---->
		                </div>
		            </li>        </ul>
		        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
		    </main>
		</li>		<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3  max-w_20:md Filter2" >
		    <header class="flex font-size_up m-y_2">
		        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Primary Category </div>
		         <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="#CollapseFacetGroupPrimaryID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupPrimaryID">
		           <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>    </header>
		    <main id="CollapseFacetGroupPrimaryID" class="p_1 collapse show" style="">
		        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
		            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_2777" id="checkfacet_2777" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2777" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2777ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_7799" id="checkfacet_7799" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7799" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7799ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_3859" id="checkfacet_3859" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3859" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3859ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_5116" id="checkfacet_5116" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5116" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5116ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_0779" id="checkfacet_0779" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0779" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0779ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>        </ul>
		        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
		    </main>
		</li>		<li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3  max-w_20:md Filter3" >
		    <header class="flex font-size_up m-y_2">
		        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Drugs Generic </div>
		          <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="#CollapseFacetGroupID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupID">
		            <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>    </header>
		    <main id="CollapseFacetGroupID" class="p_1 collapse show" style="">
		        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
		            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_5091" id="checkfacet_5091" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5091" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5091ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_2516" id="checkfacet_2516" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2516" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2516ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8342" id="checkfacet_8342" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8342" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8342ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8813" id="checkfacet_8813" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8813" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8813ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>            <li class="m-y_2">
		                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
		                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_9372" id="checkfacet_9372" class="font-size_up"></div>
		                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9372" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9372ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
		                    <!---->
		                </div>
		            </li>        </ul>
		        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
		    </main>
		</li>	</ul>
	<script>
		let filterZone = document.getElementById("filterZone");
		let filterZoneNav = filterZone.querySelector("nav");
		let filterFacets = filterZone.querySelector("#filterFacets");
		let filterZoneExpanded = true;
		filterZoneNav.addEventListener("click", function () {
			if (filterZoneExpanded) {
				filterFacets.classList.toggle("opacity_0");
				filterFacets.classList.toggle("opacity_none");
				setTimeout(function () {
					filterFacets.classList.toggle("{display_none}");
					filterFacets.classList.toggle("display_none");
					filterFacets.classList.toggle("min-h_0:md");
					filterFacets.classList.toggle("min-h_30:md");
					filterZone.classList.remove("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
					filterZone.classList.add("aspect_1_1:md", "nav-mined", "{nav-maxed}");
					filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
					filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
					filterZoneExpanded = false;
				}, 300);
				return;
			} else {
				filterZone.classList.add("{aspect_1_1:md}", "{nav-mined}", "nav-maxed");
				filterZone.classList.remove("aspect_1_1:md", "nav-mined", "{nav-maxed}");
				filterFacets.classList.toggle("min-h_0:md");
				filterFacets.classList.toggle("min-h_30:md");
				filterFacets.classList.toggle("{display_none}");
				filterFacets.classList.toggle("display_none");
				setTimeout(function () {
					filterFacets.classList.toggle("opacity_0");
					filterFacets.classList.toggle("opacity_none");
					filterZoneNav.querySelector("span.label").classList.toggle("{display_none:md}");
					filterZoneNav.querySelector("span.label").classList.toggle("display_none:md");
					filterZoneExpanded = true;
				}, 300);
				return;
			}
		});
	</script>
</div>
                Copy Code

                Example

                Default styling

                Program 

                <div class=" sticky jump-buttons_top  r_0 z_1">
<div class="absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3">
<!--  Helper Jump links -->
  <a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#SearchBarTop">
  <span><i class="fas fa-arrow-up"></i><i class="m-l_2 fas fa-search"></i></span>
  </a>
  <a href="#FilterNavContainer" class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3">
  <span><i class="fas fa-arrow-down"></i><i class="m-l_2 fas fa-filter"></i></span>
  </a>
<!--  Helper Jump links -->
</div>
</div>
<div class="bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative" >
    <h1 class="c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between"><span>Program</span>
      <a href="#FilterNavContainer" class="absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0">
      <span><i class="fas fa-arrow-down"></i><i class="fas fa-filter"></i></span>
      </a>
    </h1>
    <div class="flex_row flex gap-x_3">
      <div class="input-holder flex_auto flex flex_row self_end relative w_100">
          <input id="input_uniqueTextAnda" name="input_uniqueTextAnda" type="text" placeholder="Search" class=" br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 font_2:lg font_1:md font_0">
          <button class="absolute b_0 br-bl_square br-tl_square btn btn-primary flex_none grid items_center justify_center r_0 t_0" onClick="Search()">
          <i class="fas fa-search"></i>
          </button>
      </div>
      <button class="disabled flex_none grid items_center justify_center btn btn-alert">
        <i class="fas fa-times"></i>
      </button>
    </div>
</div>
                Copy Code

                Example

                Default styling

                • <li class="m-y_2">
    <div class="input flex user-select_none relative h:bg_black-1 br_radius">
        <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="check" id="check" class="font-size_up"></div>
        <div class="flex_auto self_center p-l_2 p-y_2"><label for="check" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
        <!---->
    </div>
</li>
                Copy Code

                Source: dist/css/library_boot.css, line 9008

                9.13.4 Facet Checkbox With Trash

                The single checkbox that is generated by the type ahead filter search. The trash button removes the filter.

                Example

                Default styling

                • <li class="m-y_2">
    <div class="input flex user-select_none relative h:bg_black-1 br_radius">
        <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet" id="checkfacet" class="font-size_up"></div>
        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter </span></label></div>
        <div class="">
            <button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
        </div>
        <!---->
    </div>
</li>
                Copy Code

                Source: dist/css/library_boot.css, line 8836

                9.13.5 Faceted Search

                Facet Groups

                Sub.Search.FacetCheckbox - Single Facet Checkbox Sub.CollapseIcon - Collapse Icon
                Sub Components in Design:

                  Example

                  Default styling

                • Drugs Generic
                  collapse
                  less | more
                  • 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. 
                  <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3  max-w_20:md " >
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Drugs Generic </div>
          <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="#CollapseFacetGroupID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupID">
            <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>    </header>
    <main id="CollapseFacetGroupID" class="p_1 collapse show" style="">
        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_5091" id="checkfacet_5091" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5091" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5091ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_2516" id="checkfacet_2516" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2516" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2516ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8342" id="checkfacet_8342" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8342" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8342ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8813" id="checkfacet_8813" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8813" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8813ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_9372" id="checkfacet_9372" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_9372" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_9372ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>        </ul>
        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
    </main>
</li>
                  Copy Code

                  Source: dist/css/library_boot.css, line 8908

                  9.13.5.1 Faceted Type Ahead

                  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.

                  Example

                  Default styling

                • Type Ahead Filter
                  Filtering By
                  collapse
                  less | more
                  • <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3 max-w_20:md ">
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Type Ahead Filter</div>
    </header>
    <main class="p_1 collapse show">
        <div class="p_3 flex flex_row">
            <input class="br-tr_square br-br_square" type="text" name="" id="" placeholder="Filter Name">
            <button class="btn btn-secondary br-tl_square br-bl_square"><i class="fas fa-users"></i></button>
        </div>
    </main>
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8">Filtering By</div>
        <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="#collapseTypeAhead" role="button" aria-expanded="true" aria-controls="#collapseTypeAhead">
          <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>    </header>
    <main id="collapseTypeAhead" class="p_1 collapse show" style="">
        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_0922" id="checkfacetfacet_0922" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_0922" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter facet_0922</span></label></div>
                    <div class="">
                        <button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
                    </div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacetfacet_1777" id="checkfacetfacet_1777" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_1777" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter facet_1777</span></label></div>
                    <div class="">
                        <button class="bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2"><i class="fas fa-trash"></i></button>
                    </div>
                    <!---->
                </div>
            </li>        </ul>
        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
    </main>
</li>
                  Copy Code

                  Source: dist/css/library_boot.css, line 8872

                  9.13.6 Faceted Search

                  Facet Groups

                  Sub.Search.FacetCheckbox - Single Facet Checkbox Sub.CollapseIcon - Collapse Icon
                  Sub Components in Design:

                    Example

                    Default styling

                  • Primary Category
                    collapse
                    less | more
                    • 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. 
                    <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3  max-w_20:md " >
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Primary Category </div>
         <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="#CollapseFacetGroupPrimaryID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupPrimaryID">
           <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>    </header>
    <main id="CollapseFacetGroupPrimaryID" class="p_1 collapse show" style="">
        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_2777" id="checkfacet_2777" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2777" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2777ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_7799" id="checkfacet_7799" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7799" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7799ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_3859" id="checkfacet_3859" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3859" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3859ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_5116" id="checkfacet_5116" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_5116" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_5116ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_0779" id="checkfacet_0779" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0779" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0779ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>        </ul>
        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
    </main>
</li>
                    Copy Code

                    Source: dist/css/library_boot.css, line 9085

                    9.13.7 Program Bar

                    Some events don't need a search bar the program bar remains because it is need to hide the jump links.

                    Example

                    Default styling

                    top

                    Program 

                    <div class=" sticky t_0 r_0 z_1">
<div class="absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3">
<!--  Helper Jump links -->
  <a class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3" href="#SearchBarTop">
  <span><i class="fas fa-arrow-up"></i> top</span>
  </a>
  <a href="#FilterNavContainer" class="br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3">
  <span><i class="fas fa-arrow-down"></i><i class="m-l_2 fas fa-filter"></i></span>
  </a>
<!--  Helper Jump links -->
</div>
</div>
<div class="bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative" >
    <h1 class="c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between"><span>Program</span>
      <a href="#FilterNavContainer" class="absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0">
      <span><i class="fas fa-arrow-down"></i><i class="fas fa-filter"></i></span>
      </a>
    </h1>
</div>
                    Copy Code

                    Source: dist/css/library_boot.css, line 9121

                    9.13.8 Result Overview

                    Small strip of data that shows the number of results and the time it took to search.

                    <div class="c_secondary-n1 font_medium font-size_down-2 font_ui p_2 ">
  <ul class="ul_inline-pipe">
      <li>
        <ul class="ul_inline-comma">
            <li class="font_bold   no-after uppercase">Results:</li>
            <li class="c_accent-n1">230</li>
        </ul>
      </li>
      <li>
        <ul class="ul_inline-comma">
            <li class="font_bold no-after uppercase">Filters:</li>
            <li><a class="h:underline c_primary-n1 c_primary-n2">Category A <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
            <li><a class="h:underline c_primary-n1 c_primary-n2">Tag B  <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
            <li><a class="h:underline c_primary-n1 c_primary-n2">Tag C <i class="fas fa-times c_alert-n1 p_2"></i></a></li>
        </ul>
      </li>
  </ul>
</div>
                    Copy Code

                    Source: dist/css/library_boot.css, line 9963

                    9.13.9 Time Markers

                    shows users where they results can be found in the result.

                    ClassList: Sub.ClassList.Inset.down-1 - Inset Down 1 Sub.ClassList.Inset.padding - Inset Padding

                    Example

                    Default styling

                    <aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
    <strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
    <ul class="ul_inline-pipe">
        <li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
        <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  0:53</a></li>
        <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  2:30</a></li>
    </ul>
</aside>
                    Copy Code

                    Source: dist/css/library_boot.css, line 11237

                    9.14.1 Section Footer

                    Section footer links to the Search Collection Page.

                    <footer class="flex flex_row-reverse p-t_3 p-b_4"><a href="#" class="link self_end ">view all from &quot;&quot; <i class="fal fa-chevron-circle-right m-r_3"></i></a></footer>
                    Copy Code

                    Example s

                    default

                    plan header

                    default

                    <header class="font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">[modifier]</h2></header>
                    Copy Code

                    Example s

                    default

                    plan header

                    default

                    <header class="p-x_4 font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 "><h2 class="lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1">[modifier]</h2></header>
                    Copy Code

                    Example s

                    default

                    plan header

                    default

                    <header class="font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">[modifier]</h3></header>
                    Copy Code

                    Example s

                    default

                    plan header

                    default

                    <header class="p-x_4 font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 "><h3 class="lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0">[modifier]</h3></header>
                    Copy Code

                    Source: dist/css/library_boot.css, line 11189

                    9.14.4 Home Search Link Inset

                    A central interaction point for the user on the homepage.

                    ClassList: Sub.ClassList.Inset.up-1 - Inset up 1 Sub.ClassList.Inset.padding.up-4 - Padding up 4

                    Sub.Section.SearchBar - Search Bar with `disabled` Class Component.Navigation.Home.Utility - Quick Links
                    Sub Components in Design:
                      <div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2  p_4 p_5:lg">
    <div class="input-holder flex flex_row self_end relative w_100 p_2 p_3:md">
        <input id="input_uniqueTextAndButton" name="input_uniqueTextAndButton" type="text" placeholder="Search" class="br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 br-tl_square br-br_square br-r_0 font_2"/>
        <button  class="disabled b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto" >
        <i class="fas fa-search"></i>
        <span class="inline-block:md display_none">Search</span>
        </button>
    </div>    <nav class="utility-nav p-t_3 p-t_4:lg font_n3 font_0:md font_1:lg ">
        <ul class="flex flex_row ul_none justify_center">
            <li class="text_center p-x_2 block p-x_4:md lh_1">
                <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                    ><i class="fal fa-star  block inline:md"></i><span class="display_none inline:md"> featured</span></a
                >
            </li>
            <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
                <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                    ><i class="fal fa-sitemap  block inline:md"></i><span class="display_none inline:md"> hot topics</span></a
                >
            </li>
            <li class="text_center p-x_2 block p-x_4:md lh_1 text_center  br-l_1 br_solid br_black-4">
                <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                ><i class="fal fa-heart block inline:md"></i><span class="display_none inline:md"> saved</span></a
            >
            </li>
            <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
                <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                ><i class="fal fa-play  block inline:md"></i><span class="display_none inline:md"> continue watching</span></a
            >
            </li>
            <li class="text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4">
                <a class="h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md"
                ><i class="fal fa-sync  block inline:md"></i><span class="display_none inline:md"> watch again </span></a
            >
            </li>
        </ul>
    </nav></div>
                      Copy Code

                      Source: dist/css/library_boot.css, line 11215

                      9.14.5 Home Search Bar

                      The Search Bar is disabled on the Home Page when there is no content in the input field.

                      Example

                      Default styling

                      <div class="input-holder flex flex_row self_end relative w_100 p_2 p_3:md">
    <input id="input_uniqueTextAndButton" name="input_uniqueTextAndButton" type="text" placeholder="Search" class="br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 br-tl_square br-br_square br-r_0 font_2"/>
    <button  class=" b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto" >
    <i class="fas fa-search"></i>
    <span class="inline-block:md display_none">Search</span>
    </button>
</div>
                      Copy Code 
                      <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
    <a href="#" class="undecorated h:undecorated expanded-click-area">
    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
        Attachments
    </a>
</li>
                      Copy Code 
                      <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
    <a href="#" class="undecorated h:undecorated expanded-click-area">
    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
        Attachments
    </a>
</li>
                      Copy Code

                      Source: dist/css/library_boot.css, line 10065

                      9.15.1.2 Duration

                      The length of the clip of video or all the of the lengths of the combined clips.

                      Example

                      Default styling

                    • 15 minutes 
                      • <li class="inline-block p-r_3 p_2 lh_0">
    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
    minutes
</li>
                      Copy Code

                      Example

                      Default styling

                    • 4 presentations 
                      • <li class="inline-block p-r_3 p_2 lh_0">
    <span class="font-size_up c_accent-n2 block">4</span>
    presentations
</li>
                      Copy Code

                      Example

                      Default styling

                      No Access to [PRODUCT NAME]

                      [PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.

                      Learn More

                      Registration Steps

                      1. 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.

                      2. Register

                      3. 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].

                      4. Refresh Access

                      5. If you believe you have received this message in error, please contact Member Care

                        • For additional questions, please contact ACC Member Care.
                        • Email: MemberCare@ACC.org
                        • Phone: 202-375-6000 ext. 5603
                        • Toll-Free: 800-253-4636 ext. 5603

                        Account Information

                        • User Name: Regina Rutherford
                        • Member ID: 0152151214
                        • Email: test@boo.com

                        Click the 'Member Help' button to send along your member information to help diagnose this issue.

                        Member Care
                      <div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
	<div class="reading-typography flex flex_column gap_4">
		<h2 class="">No Access to [PRODUCT NAME]</h2>
		<p>[PRODUCT DESCRIPTION].  To read more about the details of [PRODUCT NAME] click the learn more button.</p>
		<div class="flex flex_row gap_3 justify_center">
			<a href="[PRODUCT MARKETING URL]" class="w_100 block max-w_20 btn btn-secondary c_white font_bold font_ui h:c_white shadow_overlap-light " title="Navigate to [PRODUCT NAME] detail page">Learn More</a>
		</div>
	</div>
</div>
<div class="inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative ">
	<div class="reading-typography flex flex_column gap_4">
		<h2 class="font_bold">Registration Steps</h2>
		<ol class="counter_reset m_0 p_0 ul_none flex_column flex gap_4">
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<p>To purchase, please click the "Register" button below. Once you have completed your purchase, please <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">wait 15 minutes</strong> to allow the system to process the information. </p>
				</div>
			</li>
			<li class="flex flex_row gap_3 justify_center">
				<a title="register for the  [PRODUCT NAME]" href="https://www.acc.org/Education-and-Meetings/Meetings/Meeting-Items/2022/01/01/01/04/ACC-Anywhere-ACC22-On-Demand" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Register</a>
			</li>
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<p>If you have just registered and you have <strong class="uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap">waited 15 minutes</strong> and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].</p>
				</div>
			</li>
			<li class="flex flex_row gap_3 justify_center">
				<a title="reset the access from you account" href="[EVENT AUTHENTICATION URL]" class="w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light ">Refresh Access</a>
			</li>
			<li class="flex flex_row">
				<span class="c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4"></span>
				<div class="flex_auto">
					<div class="flex flex_row:md flex_column">
						<div class="reading-typography flex flex_column gap_4 flex_50 p-r_5:md">
							<p class="font_bold">If you believe you have received this message in error, please contact <a href="mailto:MemberCare@ACC.org"><em>Member Care</em></a> </p>
							<ul class="ul_none p_3">
								<li class="font_bold">For additional questions, please contact ACC Member Care.</li>
								<li><strong>Email:</strong> <a href="mailto:MemberCare@ACC.org"><em>MemberCare@ACC.org</em></a></li>
								<li><strong>Phone:</strong> 202-375-6000 ext. 5603   </li>
								<li><strong>Toll-Free:</strong> 800-253-4636 ext. 5603</li>
							</ul>
						</div>
						<div class=" flex_50"`>
							<section class="bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold">
							  <div class="c_white">
							    <h2 class="br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center">Account Information</h2>
							    <ul class="ul_none p_0 m_0">
							    <li class=""><strong>User Name:</strong> <span data-type="User Full Name">Regina Rutherford</span> </li>
							    <li class=""><strong>Member ID:</strong> <span data-type="Member ID">0152151214</span> </li><li class=""><strong>Email:</strong> <span data-type="email">test@boo.com</span> </li>
							    </ul>
							  </div>
							  <div class="bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light">
							    <p class=""><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class="text_center"><a href="mailTO:membercare@acc.org?body='name,email,personify'" class="btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto">Member Care</a></div>
							  </div>
							</section>						</div>
					</div>
				</div>
			</li>
		</ol>
	</div>
</div>
                      Copy Code

                      Example

                      Default styling

                      Account Information

                      • User Name: Regina Rutherford
                      • Member ID: 0152151214
                      • Email: test@boo.com

                      Click the 'Member Help' button to send along your member information to help diagnose this issue.

                      Member Care
                      <section class="bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold">
  <div class="c_white">
    <h2 class="br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center">Account Information</h2>
    <ul class="ul_none p_0 m_0">
    <li class=""><strong>User Name:</strong> <span data-type="User Full Name">Regina Rutherford</span> </li>
    <li class=""><strong>Member ID:</strong> <span data-type="Member ID">0152151214</span> </li><li class=""><strong>Email:</strong> <span data-type="email">test@boo.com</span> </li>
    </ul>
  </div>
  <div class="bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light">
    <p class=""><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class="text_center"><a href="mailTO:membercare@acc.org?body='name,email,personify'" class="btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto">Member Care</a></div>
  </div>
</section>
                      Copy Code

                      Source: dist/css/library_boot.css, line 10307

                      9.17.1 Category Tag

                      Category Tags are singular tags that divide content. An item can only have a single tag from a category group.

                      Example

                      Default styling

                      • Channel 1
                      • Navigating Health Care Economics
                      <ul class="ul_inline-comma">
  <li>Channel 1</li>
  <li>Navigating Health Care Economics</li>
</ul>
                      Copy Code

                      Source: dist/css/library_boot.css, line 10324

                      9.17.2 Filter Tags

                      Filter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.

                      Example

                      Default styling

                      • Tag Name 1
                      • Daugherty - Larkin
                      • relationships
                      • web-readiness
                      <ul class="ul_inline-comma">
    <li>Tag Name 1</li>
    <li>Daugherty - Larkin</li>
    <li>relationships</li>
    <li>web-readiness</li>
</ul>
                      Copy Code

                      Example

                      Default styling

                      <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLCROrnGF2SYByKd5KHoqjRZXM4hwlHgjH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      Copy Code

                      Source: dist/css/library_boot.css, line 7197

                      9.19 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/library_boot.css, line 8752

                      9.19.1 Abstract

                      A Abstract is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.

                      Experiential: This is not an approved data point.

                      Example

                      Default styling

                      Electrical Disorders - Rhythm and Conduction Disorders 
                      Electrical Disorders - Rhythm and Conduction Disorders
                      Copy Code

                      Example

                      Default styling

                      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>
                      Copy Code

                      Example

                      Default styling

                      3652 
                      3652
                      Copy Code

                      Source: dist/css/library_boot.css, line 8766

                      9.19.1.3 Abstract Subtitle

                      The subtitle of a Abstract.

                      Experiential: This is not an approved data point.

                      Example

                      Default styling

                      Electrical Disorders - Rhythm and Conduction Disorders 
                      Electrical Disorders - Rhythm and Conduction Disorders
                      Copy Code

                      Example

                      Default styling

                      Abstract on Cardiovascular Update for the Clinician Success H2 
                      Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub>
                      Copy Code

                      Source: dist/css/library_boot.css, line 5971

                      9.19.2 Agenda Item

                      Description: Agenda items are any event or sessions that are scheduled for a specific date, location, and time.

                      Source: dist/css/library_boot.css, line 8154

                      9.19.2 Agenda Item

                      Description: Agenda items are sessions that are scheduled for a specific date, location, and time.

                      Source: dist/css/library_boot.css, line 8177

                      9.19.2.1 Channel Name

                      Description: A channel is a visible category that an Agenda Item belongs to.

                      Example

                      Default styling

                      Navigating Health Care Economics 
                      Navigating Health Care Economics
                      Copy Code

                      Source: dist/css/library_boot.css, line 6025

                      9.19.2.2 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

                      Saturday, Nov. 20, 2021
                      FORMAT:
                      Day-of-Week, Month-Abbreviation. Day, Year 
                      Saturday, Nov. 20, 2021
                      Copy Code

                      Source: dist/css/library_boot.css, line 6039

                      9.19.2.3 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
                      Data Elements:

                        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>
                        Copy Code

                        Source: dist/css/library_boot.css, line 8221

                        9.19.2.4 End Time

                        Description: The time at which a Agenda item is scheduled to end.

                        Example

                        Default styling

                        12:15 p.m.
                        FORMAT:
                        12 hour with 'a.m.'/'p.m'. 
                        12:15 p.m.
                        Copy Code

                        Source: dist/css/library_boot.css, line 8164

                        9.19.2.5 Agenda ID

                        Description: The ID given to an Agenda. This number is unique to the Agenda and is incremented for each new Agenda created.

                        Example

                        Default styling

                        101 
                        101
                        Copy Code

                        Source: dist/css/library_boot.css, line 8235

                        9.19.2.6 Live 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

                        Saturday, Nov. 20, 2021
                        FORMAT:
                        Day-of-Week, Month-Abbreviation. Day, Year 
                        Saturday, Nov. 20, 2021
                        Copy Code

                        Source: dist/css/library_boot.css, line 8191

                        9.19.2.7 Live Time

                        Description: The time at which a Agenda is live.

                        Example

                        Default styling

                        @ 11:15 a.m. – 11:15 a.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. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
                        Copy Code

                        Source: dist/css/library_boot.css, line 8249

                        9.19.2.8 On Demand Release Date and Time

                        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

                        Saturday, Nov. 20, 2021 @ 8:00 p.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 @ 8:00 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
                        Copy Code

                        Source: dist/css/library_boot.css, line 8207

                        9.19.2.9 Release Time

                        Description: The time at which a Agenda is item is scheduled to be active, give access, or start playing.

                        Example

                        Default styling

                        11:15 a.m.
                        FORMAT:
                        12 hour with 'a.m.'/'p.m'. 
                        11:15 a.m.
                        Copy Code

                        Example

                        Default styling

                        12:15 p.m.
                        FORMAT:
                        12 hour with 'a.m.'/'p.m'. 
                        12:15 p.m.
                        Copy Code

                        Source: dist/css/library_boot.css, line 5997

                        9.19.2.10.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

                        11:15 a.m.
                        FORMAT:
                        12 hour with 'a.m.'/'p.m'. 
                        11:15 a.m.
                        Copy Code

                        Source: dist/css/library_boot.css, line 5981

                        9.19.2.11 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>
                        Copy Code

                        Source: dist/css/library_boot.css, line 8709

                        9.19.3 Award

                        Description: Awards and Recognition

                        Source: dist/css/library_boot.css, line 8732

                        9.19.3.1 Award Description

                        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.

                        Watch Video 
                        <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>
                        Copy Code

                        Example

                        Default styling

                        Pamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion 
                        Pamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion
                        Copy Code

                        Source: dist/css/library_boot.css, line 8397

                        9.19.4 Faculty

                        Description: An educator who created or participated in a presentation

                        Source: dist/css/library_boot.css, line 8542

                        9.19.4.1 Bio

                        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>
                        Copy Code

                        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
                        Copy Code

                        Source: dist/css/library_boot.css, line 8555

                        9.19.4.3 Identification Number

                        Description: this id can both be used to link to the faculty member's page, the member's image, and disclosures

                        Example

                        Default styling

                        122154254 
                        122154254
                        Copy Code

                        Source: dist/css/library_boot.css, line 8442

                        9.19.4.4 Location

                        Description: The location of the faculty member

                        Example

                        Default styling

                        New York, NY, USA
                        FORMAT:
                        City, State, Country
                        NOTE:
                        if the conference country is USA you can drop the country if it is USA. 
                        New York, NY, USA
                        Copy Code

                        Source: dist/css/library_boot.css, line 8407

                        9.19.4.5 Photo

                        Description: A photo of the faculty member

                        Example

                        Default styling

                        Pepper H. Soda III, MD, FACC
                        FORMAT:
                        300px by 300px 
                        <img
    class="aspect_1x1 w_100"
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/>
                        Copy Code

                        Source: dist/css/library_boot.css, line 8529

                        9.19.4.6 Role

                        Description: the roles of the faculty member within the session

                        Example

                        Default styling

                        Co-Chair 
                        Co-Chair
                        Copy Code

                        Source: dist/css/library_boot.css, line 8458

                        9.19.4.7 Title

                        Description: the roles of the faculty 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
                        Copy Code

                        Source: dist/css/library_boot.css, line 8477

                        9.19.4.7.1 Institution

                        Description: Institution of the faculty member where they hold a title

                        Example

                        Default styling

                        Mount SugarLoaf Hospital 
                        Mount SugarLoaf Hospital
                        Copy Code

                        Example

                        Default styling

                        Department of Cardiology 
                        Department of Cardiology
                        Copy Code

                        Example

                        Default styling

                        Physician-in-Chief 
                        Physician-in-Chief
                        Copy Code

                        Example

                        Default styling

                        Tweat_DrSoda 
                        Tweat_DrSoda
                        Copy Code

                        Source: dist/css/library_boot.css, line 6059

                        9.19.5 Member

                        Description: Often we need to represent a member as a Faculty or Chair who created or participated an initative.

                        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
                        Copy Code

                        Source: dist/css/library_boot.css, line 6104

                        9.19.5.2 Location

                        Description: The location of the Member member

                        Example

                        Default styling

                        New York, NY, USA
                        FORMAT:
                        City, State, Country
                        NOTE:
                        if the conference country is USA you can drop the country if it is USA. 
                        New York, NY, USA
                        Copy Code

                        Source: dist/css/library_boot.css, line 6069

                        9.19.5.3 Photo

                        Description: A photo of the member

                        Example

                        Default styling

                        Pepper H. Soda III, MD, FACC
                        FORMAT:
                        300px by 300px 
                        <img
    class="aspect_1x1 w_100 "
    src="https://i.pravatar.cc/300"
    alt="Pepper H. Soda III, MD, FACC"
/>
                        Copy Code

                        Source: dist/css/library_boot.css, line 6120

                        9.19.5.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
                        Copy Code

                        Source: dist/css/library_boot.css, line 6139

                        9.19.5.4.1 Institution

                        Description: Institution of the Member member where they hold a title

                        Example

                        Default styling

                        Mount SugarLoaf Hospital 
                        Mount SugarLoaf Hospital
                        Copy Code

                        Example

                        Default styling

                        Department of Cardiology 
                        Department of Cardiology
                        Copy Code

                        Example

                        Default styling

                        Physician-in-Chief 
                        Physician-in-Chief
                        Copy Code

                        Source: dist/css/library_boot.css, line 8331

                        9.19.6 Presentation

                        Description: A presentation is a single part of education that can not be subdivided.

                        Example

                        Default styling

                        Markup:Drug Coated Balloons 
                        Markup:Drug Coated Balloons
                        Copy Code

                        Source: dist/css/library_boot.css, line 8384

                        9.19.6.2 Presentation ID

                        Description: Unique system generated identifier for a presentation.

                        Example

                        Default styling

                        15612 
                        15612
                        Copy Code

                        Example

                        Default styling

                        11:45 – 11:49 a.m. ET
                        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:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr>
                        Copy Code

                        Example

                        Default styling

                        New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty 
                        New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
                        Copy Code

                        Source: dist/css/library_boot.css, line 8265

                        9.19.7 Session

                        A Session is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.

                        Experiential: This is not an approved data point.

                        Example

                        Default styling

                        Electrical Disorders - Rhythm and Conduction Disorders 
                        Electrical Disorders - Rhythm and Conduction Disorders
                        Copy Code

                        Example

                        Default styling

                        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>
                        Copy Code

                        Example

                        Default styling

                        3652 
                        3652
                        Copy Code

                        Source: dist/css/library_boot.css, line 8279

                        9.19.7.3 Session Subtitle

                        The subtitle of a Session.

                        Experiential: This is not an approved data point.

                        Example

                        Default styling

                        Electrical Disorders - Rhythm and Conduction Disorders 
                        Electrical Disorders - Rhythm and Conduction Disorders
                        Copy Code

                        Example

                        Default styling

                        Cardiovascular Update for the Clinician III 
                        Cardiovascular Update for the Clinician III
                        Copy Code

                        Source: dist/css/library_boot.css, line 6178

                        9.19.8 Sponsor

                        Description: Sponsor are industry that has offered money or support.

                        Source: dist/css/library_boot.css, line 8568

                        9.19.8 Sponsor

                        Description: Sponsor are industry that has offered money or support to an event.

                        <address>
    <!-- http://microformats.org/wiki/hcard -->
    <div class="font_ui font_0">
        <ul class="ul_none  lh_2">
            <li><strong class="">Contact:</strong></li>
            <li class="">
                <span class="contact-person">Carlton Dooley</span>
            </li>
            <li><strong class="">Address:</strong></li>
            <li class="">
                <span class="street-address">3115 Clair Street</span>
            </li>
            <li cclass="locality">
                <span class="city-name">Killeen</span>,
                <span class="state-name">
                    <abbr title="Texas">TX</abbr>
                </span>
                <span class="postal-code">76543</span>
            </li>
        </ul>
        <ul class="ul_none lh_2">
            <li class="">
            <strong class="p-r_2 inline block:md inline:lg undecorated">Email:</strong>
                <a href="mailto:MemberCare@acc.org" class="email block:md inline:lg link">
                    <span class="">MemberCare@acc.org</span></a>
            </li>
            <li class="">
            <strong class="p-r_2 block:md inline:lg">Phone:</strong>
                <a tel="+1254-690-2946" href="tel:+1254-690-2946" class="tel block:md inline:lg link">
                    <span class=" ">(254) 690-2946</span>
                    </a>
            </li>
        </ul>
    </div>
</address>
                        Copy Code 
                        <address>
    <!-- http://microformats.org/wiki/hcard -->
    <div class="font_ui font_0">
        <ul class="ul_none  lh_2">
            <li><strong class="">Contact:</strong></li>
            <li class="">
                <span class="contact-person">Carlton Dooley</span>
            </li>
            <li><strong class="">Address:</strong></li>
            <li class="">
                <span class="street-address">3115 Clair Street</span>
            </li>
            <li cclass="locality">
                <span class="city-name">Killeen</span>,
                <span class="state-name">
                    <abbr title="Texas">TX</abbr>
                </span>
                <span class="postal-code">76543</span>
            </li>
        </ul>
        <ul class="ul_none lh_2">
            <li class="">
            <strong class="p-r_2 inline block:md inline:lg undecorated">Email:</strong>
                <a href="mailto:MemberCare@acc.org" class="email block:md inline:lg link">
                    <span class="">MemberCare@acc.org</span></a>
            </li>
            <li class="">
            <strong class="p-r_2 block:md inline:lg">Phone:</strong>
                <a tel="+1254-690-2946" href="tel:+1254-690-2946" class="tel block:md inline:lg link">
                    <span class=" ">(254) 690-2946</span>
                    </a>
            </li>
        </ul>
    </div>
</address>
                        Copy Code

                        Source: dist/css/library_boot.css, line 8691

                        9.19.8.2 Description

                        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>
                        Copy Code

                        Example

                        Default styling

                        <a class="website " target="_blank"  href="http://wwww.LogoIpsum.com">More</a>
                        Copy Code

                        Example

                        Default styling

                        LogoIpsum 
                        LogoIpsum
                        Copy Code

                        Example

                        Default styling

                        LogoIpsum 
                        LogoIpsum
                        Copy Code

                        Example

                        Default styling

                        PDF 
                        <a class="pdf " target="_blank" href="http://wwww.LogoIpsum.com.pdf">PDF</a>
                        Copy Code

                        Example

                        Default styling

                        http://wwww.LogoIpsum.com 
                        http://wwww.LogoIpsum.com
                        Copy Code

                        Example

                        Default styling

                        http://wwww.LogoIpsum.com 
                        http://wwww.LogoIpsum.com
                        Copy Code 
                        <a class="website " target="_blank"  href="http://wwww.LogoIpsum.com">Website</a>
                        Copy Code 
                        <a class="website " target="_blank"  href="http://wwww.LogoIpsum.com">Website</a>
                        Copy Code

                        Source: dist/css/library_boot.css, line 7179

                        9.20 Recipe

                        Patterns that are used through out the refactors on ACC.org

                        Source: dist/css/library_boot.css, line 7188

                        9.20.1 Articles

                        There are multiple sub components that are used through out the most common page type on ACC.org

                        Source: dist/css/library_boot.css, line 7170

                        9.21 Placeholders

                        Placeholders are just used across the styleguide. The can be either text or image stand ins for the UI.

                        Example

                        Default styling

                        https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
                        Copy Code

                        Example

                        Default styling

                        https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42 
                        https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
                        Copy Code

                        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&nbsp;Characters)
                        Copy Code

                        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&nbsp;Characters)
                        Copy Code

                        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&nbsp;Characters)
                        Copy Code

                        Example

                        Default styling

                        Di dolores (20 Chars) 
                        Di dolores (20&nbsp;Chars)
                        Copy Code

                        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&nbsp;Characters)
                        Copy Code

                        Example

                        Default styling

                        Commodi dolores (30 Characters) 
                        Commodi dolores (30&nbsp;Characters)
                        Copy Code

                        Example

                        Default styling

                        Rerum libg dero pariatur (40 Characters) 
                        Rerum libg dero pariatur (40&nbsp;Characters)
                        Copy Code

                        Example

                        Default styling

                        Sed ut perspiciatis unde omnis iste natus er (60 Characters) 
                        Sed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)
                        Copy Code

                        Example

                        Default styling

                        Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters) 
                        Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)
                        Copy Code

                        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

                        1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        2. 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
                        1. How to Prepare for the Boards
                        2. General Principles of Cardiovascular Medicine
                        3. Arrhythmias
                        4. Coronary Artery Disease
                        5. Heart Failure & Cardiomyopathy
                        6. Valvular Disease
                        7. Pericardial Disease
                        8. Congenital Heart Disease
                        9. Vascular Diseases
                        10. Systemic Hypertension and Hypotension
                        11. Pulmonary Circulation Disorders
                        12. Systemic Disorders Affecting the Circulatory System
                        13. 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 &amp; 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>
                        Copy Code