Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Subs

Sub Components

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

12 Subs

Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone but are composed into larger, reusable structures.

These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text, or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials ({{> 'Sub.X' }}) to render dynamic or variable content within patterns.

Common use cases:
- {{> 'Sub.Sub.Data.Duration'}} — Displays session duration
- {{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier
- {{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button

Naming Convention:
Sub.Type.Name — Organized by category (e.g., Data, Credit, ActionButtons, ClassList)

NOTE:
Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.

Source: dist/css/virtual_boot.css, line 9108

12 Sub Components

These sub elements are used in many of the patterns and may be useful when building more complex components.

Source: dist/css/virtual_boot.css, line 9617

12.1 Action Buttons

The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.

<aside class="flex flex_none flex_column gap-y_3 m-x_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="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 flex_none  grid items_center text_center [active]" ><i class="fas fa-heart"></i></a>        <a href="#" aria-label="download calendar reminder"  class="btn flex_none btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
        <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">[modifier]</a>
      </nav>
      <a href="#" aria-label="download attachments"  class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
      <a aria-label="show or hide details"  data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100">Show Details</a>
</aside>
Copy Code
<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

Example

Default styling

<aside class="flex flex_none flex_column gap-y_3 m-x_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="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 flex_none  grid items_center text_center [active]" ><i class="fas fa-heart"></i></a>        <a href="#" aria-label="download calendar reminder"  class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
        <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
      </nav>
      <div class="cursor_not-allowed" onclick="alert('This attachment is not available to be downloaded at this time. You can download the attachment when it is available at Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:45 p.m')">
        <span aria-label="download attachments locked"  class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100 disabled" ><i class="far fa-lock"></i> Attachments</span>
      </div></aside>
Copy Code

Source: dist/css/virtual_boot.css, line 9575

12.1.3 Favorite Button

The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.

Example s

active

when the favorite is active

<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 flex_none  grid items_center text_center [modifier]" ><i class="fas fa-heart"></i></a>
Copy Code

Source: dist/css/virtual_boot.css, line 9589

12.1.3.1 Favorite Button (Disabled)

The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.

Example s

active

when the favorite is active

<span  class="btn btn-secondary flex_none flex_none disabled grid items_center text_center " ><i class="fas fa-heart"></i></span>
Copy Code

Source: dist/css/virtual_boot.css, line 9603

12.1.3.2 Favorite Button Small

The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.

Example s

active

when the favorite is active

<a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2  h:bg_alert-n4 [modifier]" ><i class="fas fa-heart"></i></a>
Copy Code

Source: dist/css/virtual_boot.css, line 9643

12.1.5 Locked Attachment Button

Attachments can be released after access to the presentation or session UI has been granted. In these cases the button is disabled. And an alert is displayed giving the time when it will be available.

Example

Default styling

Attachments
NOTE:
This pattern is using bootstrap modal to display the message. The IDs of the modal and bs-targets are hard coded in the pattern and need to be dynamic for production.
<div class="cursor_not-allowed" onclick="alert('This attachment is not available to be downloaded at this time. You can download the attachment when it is available at Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:45 p.m')">
  <span aria-label="download attachments locked"  class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100 disabled" ><i class="far fa-lock"></i> Attachments</span>
</div>
Copy Code

Source: dist/css/virtual_boot.css, line 9681

12.1.6 Action Buttons No Details

Description: The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.

<aside class="flex flex_none flex_column gap-y_3 m-x_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="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 flex_none  grid items_center text_center [active]" ><i class="fas fa-heart"></i></a>        <a href="#" aria-label="download calendar reminder"  class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
        <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">[modifier]</a>
      </nav>
      <a href="#" aria-label="download attachments"  class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside>
Copy Code
<aside class="flex flex_none flex_column gap-y_3 m-x_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="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 flex_none  grid items_center text_center [active]" ><i class="fas fa-heart"></i></a>        <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
      </nav>
      <a href="#" aria-label="download attachments"  class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside>
Copy Code

Source: dist/css/virtual_boot.css, line 9703

12.1.8 Action Buttons Only

The Actions buttons are a combination of functions and a link to the education materials player.

Example s

watch

watch action button

<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="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 flex_none  grid items_center text_center [active]" ><i class="fas fa-heart"></i></a>        <a href="#" aria-label="download calendar reminder"  class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
        <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">[modifier]</a>
      </nav>
</aside>
Copy Code

Example

Default styling

  • Special Category
  • Top Ten
<div class="c_black-6 inline-flex flex_row items_center justify_start m-t_3 ">
  <ul class="ul_inline-pipe">
    <li class="inline-flex items_center">
      <div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
          <i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
          <span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6  fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
      </div>      <strong class="font-size_down-1 font_copy"> Special Category</strong>
    </li>
    <li class="inline-flex items_center">
      <div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
          <i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
          <span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6   fas font-size_down-2 text-shadow_white-n1"></i></span>
      </div>      <strong class="font-size_down-1 font_copy"> Top Ten</strong>
    </li>
  </ul>
</div>
Copy Code

Source: dist/css/virtual_boot.css, line 9764

12.2.2 Abstract Flag

Abstract flags are used to indicate that an abstract is awarded for some reason. Use the default and star for most reasons. If there is a need for three levels of awards then use star and trophy alt or the angle up icons. In the content of the page you should denote the legend of the icons used.

Example s

fa-star

this denote the premium awarded abstracts (e.g. top 10)

fa-angle-up

this denote the premium awarded abstracts (level up 1)

fa-angle-double-up

this denote the premium awarded abstracts (level up 2)

<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
    <i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
    <span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6  [modifier] fas font-size_down-2 text-shadow_white-n1"></i></span>
</div>
Copy Code

Source: dist/css/virtual_boot.css, line 9220

12.3 Category Flags

Description: A graphic treatment for the category flags which are tags applied like channel and type.

Sub.Data.Agenda.ChannelName - Channel Name
Data Elements:

    Example

    Default styling

    • Navigating Health Care Economics
    • Category Tag
    <div class="font_n3 p_2 uppercase bg_primary-2 p-x_4 m-x_4 inline-block br-br_radius br-bl_radius c_white font_bold self_start ">
      <ul class="ul_inline-pipe">
        <li>Navigating Health Care Economics</li>
        <li>Category Tag</li>
      </ul>
    </div>
    Copy Code

    Source: dist/css/virtual_boot.css, line 10276

    12.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/virtual_boot.css, line 6882

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

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

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

    <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/virtual_boot.css, line 14050

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

    <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/virtual_boot.css, line 7461

    12.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/virtual_boot.css, line 14088

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

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

    12.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/virtual_boot.css, line 13993

    12.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/virtual_boot.css, line 7404

    12.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/virtual_boot.css, line 14031

    12.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/virtual_boot.css, line 7555

    12.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/virtual_boot.css, line 13842

    12.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/virtual_boot.css, line 7579

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

    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/virtual_boot.css, line 13866

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

    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/virtual_boot.css, line 7607

    12.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/virtual_boot.css, line 13894

    12.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/virtual_boot.css, line 9156

    12.6 Credit Dot

    Dots are used to indicate the credit that this education offers.

    Example s

    CME

    CME

  • CME
  • CNE

    CNE

  • CNE
  • AAPA

    AAPA

  • AAPA
  • ABP

    ABP

  • ABP
  • ABPMOCII

    ABPMOCII

  • ABPMOCII
  • ABPMOCIV

    ABPMOCIV

  • ABPMOCIV
  • ACHE

    ACHE

  • ACHE
  • FORMAT:
    This element uses data that has strict data formatting requirements. See color codes => credits.
    NOTE:
    This pattern requires the inclusion of the credit color stylesheets.
    <li class="inline-flex items_center lh_0">
        <span class="bg_[modifier] br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> [modifier]
    </li>
    Copy Code

    Source: dist/css/virtual_boot.css, line 9183

    12.6.1 Simple Credit Dots

    When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.

    Sub.Credits
    Sub Components in Design:

      Example

      Default styling

      • CME
      • CNE
      • COP
      • MOCII
      NOTE:
      This pattern requires the inclusion of the credit color stylesheets.
      <ul class=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
        <li class="inline-flex items_center lh_0">
            <span class="bg_CME br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CME
        </li>  <li class="inline-flex items_center lh_0">
            <span class="bg_CNE br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CNE
        </li>  <li class="inline-flex items_center lh_0">
            <span class="bg_COP br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> COP
        </li>  <li class="inline-flex items_center lh_0">
            <span class="bg_MOCII br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
        </li></ul>
      Copy Code

      Example

      Default styling

      Industry Session | Nonaccredited
      <strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong>
      Copy Code

      Source: dist/css/virtual_boot.css, line 13352

      12.7.1 Twitter Button

      Description: When a faculty member has a twitter handle, we can display a twitter button.

      Sub.Data.Faculty.TwitterHandle - Twitter Handle
      Data Elements:
        <a class="bg_twitter br_radius c_white font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 h:c_white h:undecorated p-x_4 p_3" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
            <i class="br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2"></i>
            <i class="fa-at fas opacity_8 p-r_1"></i>
            Tweat_DrSoda</a>
        Copy Code

        Source: dist/css/virtual_boot.css, line 9993

        12.8 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/virtual_boot.css, line 10022

          12.8.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/virtual_boot.css, line 10121

            12.8.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/virtual_boot.css, line 10093

              12.8.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/virtual_boot.css, line 10059

                12.8.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/virtual_boot.css, line 9556

                  12.9.1 Abstract Thumbnail

                  Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.

                  Example s

                  bg_primary

                  is the default background color

                  bg_accent

                  any background color can be swapped out

                  <header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
                      <div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat [modifier] br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
                              <i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
                          </div>
                  </header>
                  Copy Code

                  Source: dist/css/virtual_boot.css, line 9537

                  12.9.2 Video Thumbnail

                  Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.

                  Example s

                  bg_primary

                  is the default background color

                  bg_accent

                  any background color can be swapped out

                  <header class="flex flex_none flex_row justify_center p-x_4 font_n5">
                      <div class="aspect_21x9:md aspect_16x9 bg-blend_multiply bg_primary font-size_down bg_cover bg_no-repeat [modifier] br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_15 max-w_20:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
                              <i class="absolute c_white-6 fa-play fas flex_auto self_center text_center w_100"></i>
                          </div>
                  </header>
                  Copy Code

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

                  12.10 Title

                  description

                  Example

                  Default styling

                  Markup:
                  Markup:
                  Copy Code

                  Source: dist/css/virtual_boot.css, line 10481

                  12.11 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/virtual_boot.css, line 9393

                  12.12.1 Auxiliary Data

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

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

                    Example

                    Default styling

                    <aside class="flex_none max-w_20:md max-w_25:lg w_100 ">
                        <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=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
                            <li class="inline-flex items_center lh_0">
                                <span class="bg_CME br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CME
                            </li>  <li class="inline-flex items_center lh_0">
                                <span class="bg_CNE br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CNE
                            </li>  <li class="inline-flex items_center lh_0">
                                <span class="bg_COP br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> COP
                            </li>  <li class="inline-flex items_center lh_0">
                                <span class="bg_MOCII br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
                            </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 p-y_3 c_black-7 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 p-y_3 c_black-7 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

                    Source: dist/css/virtual_boot.css, line 9458

                    12.12.2.1.1 Auxiliary Data Abstracts

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

                    Sub.Credits.Dots - Credit Dots Sub.Tags.Category - Category Sub.Tags.Filter - Tags
                    Sub Components in Design:

                      Example

                      Default styling

                      <aside class="flex_none max-w_20:md max-w_25:lg w_100 ">
                          <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=" gap-x_3 gap-y_3 justify_end:md justify_start self_center ul_inline-pipe uppercase">
                              <li class="inline-flex items_center lh_0">
                                  <span class="bg_CME br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CME
                              </li>  <li class="inline-flex items_center lh_0">
                                  <span class="bg_CNE br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> CNE
                              </li>  <li class="inline-flex items_center lh_0">
                                  <span class="bg_COP br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> COP
                              </li>  <li class="inline-flex items_center lh_0">
                                  <span class="bg_MOCII br_1 br_black-3 br_circle br_solid  m-r_2" style=" height: 1em; width: 1em;"></span> MOCII
                              </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 p-y_3 c_black-7 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 p-y_3 c_black-7 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

                      Source: dist/css/virtual_boot.css, line 9426

                      12.12.2.1.2 Auxiliary Data Not Accredited

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

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

                        Example

                        Default styling

                        <aside class="flex_none max-w_20:md max-w_25:lg w_100 ">
                            <div class="bg_secondary-n3 br_radius c_white font-size_down m-b_4 p_3 shadow_overlap-light">
                             <strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong>    </div>
                            <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"><i class="fas fa-tag p-r_3"></i>category</h4>
                            <div class="br-t_1  br_primary-2 br_solid p-y_3 c_black-7 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 p-y_3 c_black-7 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

                        Source: dist/css/virtual_boot.css, line 9838

                        12.12.3 Chat Window

                        The chat window is used to display the chat in player pages.

                        Example

                        Default styling

                        Chat

                        collapse
                        (1:44 PM) Lovely Day : Chat
                        (2:13 PM) Lovely Day : Chat some more
                        (2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
                        (2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
                        (2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
                        (2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
                        (2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
                        (2:19 PM) Lovely Day : Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
                        (3:48 PM) Lovely Day : test
                        (3:50 PM) Matt Watier : hello
                        <div class="br_solid br_radius br_1 br_black-3 shadow_overlap-light p_4:lg p_3 panel panel-default flex flex_column gap-y_3 " id="panel-chat">
                          <div class="panel-heading bg_transparent flex flex_row">
                              <h4 class="panel-title font_bold font_display c_primary m_0 flex_auto self_center">Chat</h4>
                              <div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseChatWindow" role="button" aria-expanded="true" aria-controls="#CollapseChatWindow">
                                <div class="flex_none self_center"> collapse </div>
                                <div class="flex_none" >
                                    <span class="fa-stack">
                                      <i class="fas fa-minus fa-stack-1x"></i>
                                      <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                                </div>
                              </div>  </div>
                          <div id="CollapseChatWindow" class="collapse show">
                          <div  class="br_1 br_black-2 br_radius br_solid flex_auto h_20 h_auto:md loading-log m-b_4 overflow_auto p-r_3 panel-body reading-typography relative scrollbar-mini shadow_emboss-light min-h_5xlh min-h_20:md min-h_30:lg">
                              <div class="load-log p_3 absolute t_0 r_0 l_0 b_0 overflow_unset flex flex_column gap-y_3" data-log-id="2">
                                  <div class="msgln">(1:44 PM) <b> Lovely Day </b>: Chat<br></div>
                                  <div class="msgln">(2:13 PM) <b> Lovely Day </b>: Chat some more<br></div>
                                  <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
                                  <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
                                  <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
                                  <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
                                  <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
                                  <div class="msgln">(2:19 PM) <b> Lovely Day </b>: Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.<br></div>
                                  <div class="msgln">(3:48 PM) <b> Lovely Day </b>: test<br></div>
                                  <div class="msgln">(3:50 PM) <b> Matt Watier </b>: hello<br></div>
                              </div>
                          </div>
                          <div class="panel-footer flex_none m-t_auto">
                              <form name="message" action="">
                                  <div class="form-group flex flex_row nowrap">
                                      <input name="usermsg" type="text" id="usermsg" class="form-control br-br_square br-tr_square flex_auto" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
                                      <input name="submitmsg" type="submit" id="submitmsg" value="Add" class="btn btn-primary br-tl_square br-bl_square flex_none">
                                      <input type="hidden" name="user_client_portal_reg_id" id="user_client_portal_reg_id" value="10">
                                      <input type="hidden" name="chat_id" id="chat_id" value="2">
                                      <input type="hidden" name="client_portal_presentation_id" id="client_portal_presentation_id" value="2">
                                      <input type="hidden" name="client_portal_id" id="client_portal_id" value="1">
                                      <input type="hidden" name="screen_name" id="screen_name" value=" Matt   Watier ">
                                  </div>
                              </form>
                          </div>
                          </div>
                        </div>
                        Copy Code

                        Source: dist/css/virtual_boot.css, line 9885

                        12.12.4 CIO Window

                        CIO is a survey widget that allows faculty to collect questions and polls from participants.

                        Example

                        Default styling

                        Q&A

                        collapse
                        <div class="br_solid br_radius br_1 br_black-3 shadow_overlap-light p_4:lg p_3 panel panel-default gap-y_3 flex flex_column panel ">
                          <div class="panel-heading bg_transparent flex flex_row">
                              <h4 class="panel-title font_bold font_display c_primary m_0 flex_auto self_center">Q&A</h4>
                              <div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseQA" role="button" aria-expanded="true" aria-controls="#CollapseQA">
                                <div class="flex_none self_center"> collapse </div>
                                <div class="flex_none" >
                                    <span class="fa-stack">
                                      <i class="fas fa-minus fa-stack-1x"></i>
                                      <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
                                    </span>
                                </div>
                              </div>  </div>
                          <div id="CollapseQA" class="collapse show m-x_n4:lg m-x_n3 m-b_n4:lg m-b_n3 flex_100 flex_auto flex flex_column">
                            <iframe src="https://oncology.cnf.io/sessions/qen8/#!/dashboard" title="CIO WIDGET" class=" br_radius flex_auto flex_100 br-t_1 br_solid br_black-2 min-h_90 min-h_30:md min-h_50:lg"></iframe>
                          </div>
                        </div>
                        Copy Code

                        Source: dist/css/virtual_boot.css, line 9525

                        12.13 Playing Date Time

                        When presenting the playing date and time this simple dot pattern is a good solution.

                        Example

                        Default styling

                        Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT
                        <span class="c_accent-n2">Saturday, Nov. 20, 2021  @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span>
                        Copy Code

                        Source: dist/css/virtual_boot.css, line 9370

                        12.14.1 Presentation List

                        List of Presentations is similar DOM independent of the context.

                        Sub.Presentation.ListItem - List Item Sub.Presentation.ListItemWithDetails - List Item with Details
                        Sub Components in Design:

                          Example

                          Default styling

                          Presentations

                          • New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
                            • Role Type 1:
                            • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
                            • Role Type 2:
                            • Dianna Denesik III ( New York, NY, USA)
                            • Miguel Romaguera ( New York, NY, USA)
                            • Jeanette Franecki ( New York, NY, USA)
                            11:45 – 11:49 a.m. ET
                          • New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
                            • Role Type 1:
                            • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
                            • Role Type 2:
                            • Dianna Denesik III ( New York, NY, USA)
                            • Miguel Romaguera ( New York, NY, USA)
                            • Jeanette Franecki ( New York, NY, USA)
                            11:45 – 11:49 a.m. ET
                            • Introduction 1 min
                            • Presentation 25 min
                            • Panel Discussion 5 min
                          • New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
                            • Role Type 1:
                            • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
                            • Role Type 2:
                            • Dianna Denesik III ( New York, NY, USA)
                            • Miguel Romaguera ( New York, NY, USA)
                            • Jeanette Franecki ( New York, NY, USA)
                            11:45 – 11:49 a.m. ET
                          • New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
                            • Role Type 1:
                            • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
                            • Role Type 2:
                            • Dianna Denesik III ( New York, NY, USA)
                            • Miguel Romaguera ( New York, NY, USA)
                            • Jeanette Franecki ( New York, NY, USA)
                            11:45 – 11:49 a.m. ET
                          <h4 class="font-size_up p-x_3 c_primary-n2 font_medium">Presentations</h4>
                          <ul class="ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3">
                            <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
                              <div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2  h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
                              <span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                              <span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
                              <li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
                              <li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li class="no-after font_medium c_primary-n1 block w_100  block w_100 font-size_down-1">Role Type 2:</li>
                              <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                            </ul></span>
                              <span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
                            </li>  <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
                              <div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2  h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
                              <span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                              <span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
                              <li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
                              <li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li class="no-after font_medium c_primary-n1 block w_100  block w_100 font-size_down-1">Role Type 2:</li>
                              <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                            </ul></span>
                              <span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
                              <div class="br-b_2 br_black-2 br_solid m-b_n3 m-t_3 m-x_n4">
                                <button class="bg_black-2 bg_transparent br-bl_square br-br_square br_0 br_br_square c_primary-n2 h:c_primary-n4 font-size_down-1 link m-x_4 p-x_4 p-y_3 lh_1" type="button" data-toggle="collapse" data-target="#extendPresentationData" aria-expanded="true" aria-controls="extendPresentationData" data-bs-toggle="collapse">
                                  <i class="a:rotation fa-fw fa-times fas self_center text_center"></i> Presentation Details </button>
                                <div class="collapse show" id="extendPresentationData" style="">
                                  <div class="bg_black-2 br_none br_square card card-body">
                                    <ul class="ul_none flex flex_column items_stretch">
                                      <li class="br-b_1 br_solid br_black-3"> Introduction <span class="c_primary font_bold float_right">1 min</span>
                                      </li>
                                      <li class="br-b_1 br_solid br_black-3"> Presentation <span class="c_primary font_bold float_right">25 min</span>
                                      </li>
                                      <li class="br-b_1 br_solid br_black-3"> Panel Discussion <span class="c_primary font_bold float_right">5 min</span>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            </li>  <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
                              <div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2  h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
                              <span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                              <span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
                              <li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
                              <li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li class="no-after font_medium c_primary-n1 block w_100  block w_100 font-size_down-1">Role Type 2:</li>
                              <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                            </ul></span>
                              <span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
                            </li>  <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
                              <div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2  h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
                              <span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                              <span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
                              <li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
                              <li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li class="no-after font_medium c_primary-n1 block w_100  block w_100 font-size_down-1">Role Type 2:</li>
                              <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                            </ul></span>
                              <span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
                            </li></ul>
                          Copy Code

                          Source: dist/css/virtual_boot.css, line 9286

                          12.14.2 Presentation List Item

                          When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.

                          ClassList: Sub.ClassList.Border.BlackTop - Border Top

                          Sub.FacultyList - Faculty List Sub.ActionButtons.Favorite.Small - Small Action Button
                          Sub Components in Design:
                            Sub.Data.Presentation.Title - Title Sub.Data.Presentation.LiveTime - Live Time
                            Data Elements:

                              Example

                              Default styling

                            • New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
                              • Role Type 1:
                              • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
                              • Role Type 2:
                              • Dianna Denesik III ( New York, NY, USA)
                              • Miguel Romaguera ( New York, NY, USA)
                              • Jeanette Franecki ( New York, NY, USA)
                              11:45 – 11:49 a.m. ET
                            • FORMAT:
                              This element uses data that has strict data formatting requirements. See the data tab for more information.
                              <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
                                <div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2  h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
                                <span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                                <span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
                                <li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
                                <li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                                <li class="no-after font_medium c_primary-n1 block w_100  block w_100 font-size_down-1">Role Type 2:</li>
                                <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                                <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                                <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                              </ul></span>
                                <span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
                              </li>
                              Copy Code

                              Source: dist/css/virtual_boot.css, line 9319

                              12.14.3 Presentation List Item With Details

                              When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.

                              ClassList: Sub.ClassList.Border.BlackTop - Border Top

                              Sub.FacultyList - Faculty List Sub.ActionButtons.Favorite.Small - Small Action Button
                              Sub Components in Design:
                                Sub.Data.Presentation.Title - Title Sub.Data.Presentation.LiveTime - Live Time
                                Data Elements:

                                  Example

                                  Default styling

                                • New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
                                  • Role Type 1:
                                  • Pepper H. Soda III, MD, FACC ( New York, NY, USA)
                                  • Role Type 2:
                                  • Dianna Denesik III ( New York, NY, USA)
                                  • Miguel Romaguera ( New York, NY, USA)
                                  • Jeanette Franecki ( New York, NY, USA)
                                  11:45 – 11:49 a.m. ET
                                  • Introduction 1 min
                                  • Presentation 25 min
                                  • Panel Discussion 5 min
                                • FORMAT:
                                  This element uses data that has strict data formatting requirements. See the data tab for more information.
                                  NOTE:
                                  This might not function completely because of the JavaScript on the page in side the styleguide documentation.
                                  <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
                                    <div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2  h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
                                    <span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                                    <span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
                                    <li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
                                    <li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                                    <li class="no-after font_medium c_primary-n1 block w_100  block w_100 font-size_down-1">Role Type 2:</li>
                                    <li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                                    <li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                                    <li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
                                  </ul></span>
                                    <span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
                                    <div class="br-b_2 br_black-2 br_solid m-b_n3 m-t_3 m-x_n4">
                                      <button class="bg_black-2 bg_transparent br-bl_square br-br_square br_0 br_br_square c_primary-n2 h:c_primary-n4 font-size_down-1 link m-x_4 p-x_4 p-y_3 lh_1" type="button" data-toggle="collapse" data-target="#extendPresentationData" aria-expanded="true" aria-controls="extendPresentationData" data-bs-toggle="collapse">
                                        <i class="a:rotation fa-fw fa-times fas self_center text_center"></i> Presentation Details </button>
                                      <div class="collapse show" id="extendPresentationData" style="">
                                        <div class="bg_black-2 br_none br_square card card-body">
                                          <ul class="ul_none flex flex_column items_stretch">
                                            <li class="br-b_1 br_solid br_black-3"> Introduction <span class="c_primary font_bold float_right">1 min</span>
                                            </li>
                                            <li class="br-b_1 br_solid br_black-3"> Presentation <span class="c_primary font_bold float_right">25 min</span>
                                            </li>
                                            <li class="br-b_1 br_solid br_black-3"> Panel Discussion <span class="c_primary font_bold float_right">5 min</span>
                                            </li>
                                          </ul>
                                        </div>
                                      </div>
                                    </div>
                                  </li>
                                  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/virtual_boot.css, line 10338

                                  12.15.3 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/virtual_boot.css, line 10166

                                  12.15.4 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_8663" id="checkfacet_8663" class="font-size_up"></div>
                                                        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8663" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8663ut 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_0254" id="checkfacet_0254" class="font-size_up"></div>
                                                        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0254" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0254ut 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_6317" id="checkfacet_6317" class="font-size_up"></div>
                                                        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_6317" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_6317ut 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_3429" id="checkfacet_3429" class="font-size_up"></div>
                                                        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_3429" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_3429ut 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_4799" id="checkfacet_4799" class="font-size_up"></div>
                                                        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_4799" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_4799ut 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/virtual_boot.css, line 10238

                                    12.15.4.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_1558" id="checkfacetfacet_1558" class="font-size_up"></div>
                                                        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_1558" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter facet_1558</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_4031" id="checkfacetfacet_4031" class="font-size_up"></div>
                                                        <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacetfacet_4031" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md">  type ahead filter facet_4031</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/virtual_boot.css, line 10202

                                    12.15.5 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_2738" id="checkfacet_2738" class="font-size_up"></div>
                                                          <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_2738" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_2738ut 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_8107" id="checkfacet_8107" class="font-size_up"></div>
                                                          <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8107" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8107ut 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_1979" id="checkfacet_1979" class="font-size_up"></div>
                                                          <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_1979" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_1979ut 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_7059" id="checkfacet_7059" class="font-size_up"></div>
                                                          <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7059" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7059ut 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_4929" id="checkfacet_4929" class="font-size_up"></div>
                                                          <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_4929" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_4929ut 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/virtual_boot.css, line 10413

                                      12.15.6 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

                                      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/virtual_boot.css, line 10449

                                      12.15.7 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

                                      Example

                                      Default styling

                                      <div class="flex_row:md flex flex_column">
                                          <div class="flex_auto grid">
                                              <span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
                                          </div>
                                          <div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
                                              
                                          </div>
                                          <div class="flex_auto grid">
                                              <span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
                                          </div>
                                      </div>
                                      Copy Code

                                      Example

                                      Default styling

                                      br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative
                                      br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative
                                      Copy Code

                                      Example

                                      Default styling

                                      c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white
                                      c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white
                                      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.

                                      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.

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

                                      <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

                                      Example

                                      Default styling

                                      A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels. Markup:
                                      A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels.
                                      Markup:
                                      Copy Code

                                      Source: dist/css/virtual_boot.css, line 9250

                                      12.19.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/virtual_boot.css, line 9267

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

                                      Source: dist/css/virtual_boot.css, line 9126

                                      12.20 Date Time Separators

                                      Sessions are divided by date time markers that have been set to east coast time with a reference to GMT.

                                      Sub.Data.Agenda.LiveDate - Live Date Sub.Data.Agenda.LiveTime - Live Time
                                      Data Elements:

                                        Example

                                        Default styling

                                        Live: Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:15 a.m. EDT
                                        FORMAT:
                                        This element uses data that has strict data formatting requirements. See the data tab for more information.
                                        <div class="flex_row:md flex flex_column">
                                            <div class="flex_auto grid">
                                                <span class="br-t_2 br_dotted br_inherit self_center"></span>
                                            </div>
                                            <div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
                                                <strong class="c_black-8 block font_accent">Live: Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></strong>
                                            </div>
                                            <div class="flex_auto grid">
                                                <span class="br-t_2 br_dotted br_inherit self_center"></span>
                                            </div>
                                        </div>
                                        Copy Code

                                        Example

                                        Default styling

                                        NOTE:
                                        A `block relative` class was added to this DOM element to make it visible in this documentation.
                                        <div class="modal fade bg_black-4 z_5 show font_UI block relative" id="modal-attachment" tabindex="-1" role="dialog" aria-labelledby="attachmenteModalLabel" aria-modal="true" >
                                        <div class="br_radius modal-dialog z_5 shadow_bevel-bold" role="document">
                                            <div class="br-tl_radius br-tr_radius br_radius modal-content">
                                              <div class="br-b_1 br_black-3 br_solid flex justify_center modal-header bg_primary c_white">
                                                <h5 class="c_white flex_auto font_1 font_medium font_display m_0 modal-title self_center" id="exampleModalLabel"> <i class="far fa-paperclip"></i>  Attachments</h5>
                                                <button type="button" class=" btn btn-secondary c_white close h:c_white h:opacity lh_0 self_center" data-dismiss="modal" aria-label="Close">
                                                  <i class="fa-times fas"></i>
                                                </button>
                                              </div>
                                              <div class="modal-body p_0">
                                                <ul class="ul_none">
                                                    <li class="br-b_1 br_dotted br_primary-3 flex h:bg_highlight-5 h_lh1 p-x_3 p-y_3 relative"><span class="flex_auto font_0 lh_2 p-x_4 self_center">Really long name of a files so the text might wrap because we can never keep titles short and we have to medically explain everything.</span><button class="bg_black-3 br_0 br_square c_white expanded-click-area flex_none h:bg_black-5 m-l_auto m-r_n3 m-y_n3" style=" width: 4em;"><i class="fas fa-download"></i></button></li>
                                                 <li class="br-b_1 br_dotted br_primary-3 flex h:bg_highlight-5 h_lh1 p-x_3 p-y_3 relative"><span class="flex_auto font_0 lh_2 p-x_4 self_center">lorem text link</span>
                                                 <button class="bg_black-3 br_0 br_square c_white expanded-click-area flex_none h:bg_black-5 m-l_auto m-r_n3 m-y_n3" style=" width: 4em;"><i class="fas fa-download"></i></button></li>
                                                </ul>
                                              </div>
                                              <div class="br-bl_radius br-br_radius br_black-3 modal-footer p_3 relative">
                                                <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close"><i class="fa-times fas"></i> Close</button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                        Copy Code

                                        Source: dist/css/virtual_boot.css, line 9806

                                        12.21.1 Attachments Big Button

                                        On player pages use the big button for attachments. The text only displays when the view port is medium and up.

                                        <a title="download attachments" class="btn btn-secondary btn-lg  p-x_4 p_3 c_white" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                                          <i class="far fa-paperclip"></i>
                                          <span class="display_none inline-block:md"> Attachments</span>
                                        </a>
                                        Copy Code

                                        Example

                                        Default styling

                                        Attachments
                                        <span class="btn btn-secondary btn-lg disabled p-x_4 p_3 c_white" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
                                          <i class="far fa-paperclip"></i>
                                          <span class="display_none inline-block:md"> Attachments</span>
                                        </span>
                                        Copy Code

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

                                        12.22 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/virtual_boot.css, line 8656

                                        12.22.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/virtual_boot.css, line 8670

                                        12.22.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/virtual_boot.css, line 5971

                                        12.22.2 Agenda Item

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

                                        Source: dist/css/virtual_boot.css, line 8058

                                        12.22.2 Agenda Item

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

                                        Source: dist/css/virtual_boot.css, line 8081

                                        12.22.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/virtual_boot.css, line 6025

                                        12.22.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/virtual_boot.css, line 6039

                                        12.22.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/virtual_boot.css, line 8125

                                          12.22.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/virtual_boot.css, line 8068

                                          12.22.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/virtual_boot.css, line 8139

                                          12.22.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/virtual_boot.css, line 8095

                                          12.22.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/virtual_boot.css, line 8153

                                          12.22.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/virtual_boot.css, line 8111

                                          12.22.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/virtual_boot.css, line 5997

                                          12.22.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/virtual_boot.css, line 5981

                                          12.22.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/virtual_boot.css, line 8613

                                          12.22.3 Award

                                          Description: Awards and Recognition

                                          Source: dist/css/virtual_boot.css, line 8636

                                          12.22.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/virtual_boot.css, line 8301

                                          12.22.4 Faculty

                                          Description: An educator who created or participated in a presentation

                                          Source: dist/css/virtual_boot.css, line 8446

                                          12.22.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/virtual_boot.css, line 8459

                                          12.22.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/virtual_boot.css, line 8346

                                          12.22.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/virtual_boot.css, line 8311

                                          12.22.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/virtual_boot.css, line 8433

                                          12.22.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/virtual_boot.css, line 8362

                                          12.22.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/virtual_boot.css, line 8381

                                          12.22.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/virtual_boot.css, line 6059

                                          12.22.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/virtual_boot.css, line 6104

                                          12.22.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/virtual_boot.css, line 6069

                                          12.22.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/virtual_boot.css, line 6120

                                          12.22.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/virtual_boot.css, line 6139

                                          12.22.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/virtual_boot.css, line 8235

                                          12.22.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/virtual_boot.css, line 8288

                                          12.22.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/virtual_boot.css, line 8169

                                          12.22.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/virtual_boot.css, line 8183

                                          12.22.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/virtual_boot.css, line 6178

                                          12.22.8 Sponsor

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

                                          Source: dist/css/virtual_boot.css, line 8472

                                          12.22.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/virtual_boot.css, line 8595

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

                                          LogoIpsum
                                          LogoIpsum
                                          Copy Code

                                          Example

                                          Default styling

                                          LogoIpsum
                                          LogoIpsum
                                          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

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

                                          12.23 Recipe

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

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

                                          12.23.1 Articles

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

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

                                          12.24 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

                                          Example

                                          Default styling

                                          br-t_1 br_black-3 br_solid
                                          br-t_1 br_black-3 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

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

                                          12.25 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

                                          Source: dist/css/virtual_boot.css, line 9117

                                          12.26 Program

                                          Programs are build via sessions, presentations, and workshops.