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

14.1 Umbrella Navigation

This is the banner that uses as the umbrella brand of the conferneces.

Example

VIRTUAL EDUCATION

Welcome Josh G.

Change Conferences

<div class="c_white flex flex_wrap p_4 p_3:md umbrella_nav">
    <div class="flex_auto float_right font_1 font_display font_xbold  inline-block lh_2 p-l_3:md p-y_2"> VIRTUAL EDUCATION <div class="font_light font_n1 lh_0">Welcome Josh G.</div>
    </div>
    <div class="flex flex_auto m-l_auto m-t_3 m-t_0:md w_100 w_auto:md">
        <div class="flex_grow p-x_3:md">
            <div class="font_bold font_n2 h_2lh m-b_2 text_right:md uppercase vertical-align_middle">Change Conferences</div>
            <div class="">
                <select name="" id="" class="bg_primary br_radius br_white-5 flex_auto w_100">
                    <option value="">Athletic Heart</option>
                    <option value="">ACC 20</option>
                    <option value="">Covid</option>
                </select>
            </div>
        </div>
        <button class="absolute bg_highlight br_radius btn btn-primary c_black flex_shrink font_bold h:bg_highlight-n3 h:c_white lh_2 m-l_0 r_0:md r_4 relative:md t_0:md t_4"> <span class="display_none inline:md">Login</span><i class="fa-sign-out-alt fas p-l_2"></i> </button>
    </div>
</div>

<div class="c_white flex flex_wrap p_4 p_3:md umbrella_nav">
    <div class="flex_auto float_right font_1 font_display font_xbold  inline-block lh_2 p-l_3:md p-y_2"> VIRTUAL EDUCATION <div class="font_light font_n1 lh_0">Welcome Josh G.</div>
    </div>
    <div class="flex flex_auto m-l_auto m-t_3 m-t_0:md w_100 w_auto:md">
        <div class="flex_grow p-x_3:md">
            <div class="font_bold font_n2 h_2lh m-b_2 text_right:md uppercase vertical-align_middle">Change Conferences</div>
            <div class="">
                <select name="" id="" class="bg_primary br_radius br_white-5 flex_auto w_100">
                    <option value="">Athletic Heart</option>
                    <option value="">ACC 20</option>
                    <option value="">Covid</option>
                </select>
            </div>
        </div>
        <button class="absolute bg_highlight br_radius btn btn-primary c_black flex_shrink font_bold h:bg_highlight-n3 h:c_white lh_2 m-l_0 r_0:md r_4 relative:md t_0:md t_4"> <span class="display_none inline:md">Login</span><i class="fa-sign-out-alt fas p-l_2"></i> </button>
    </div>
</div>

Code Sample

Copy Code

14.2 Graveyard.Block

14.2.1 Graveyard.Block.LiveVideo

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

14.2.1.1 Live Video Horizontal

deprecated

Description:

Deprecated: Old Designs from Virtual 2020

Example

101 Cardiovascular Update for the Clinician III Electrical Disorders - Rhythm and Conduction Disorders Pepper H. Soda III, MD, FACC - Co-Chair

Attachments

CME
CNE
COP
MOCII

    <article class="c_black flex flex_column flex_row:md">
        <div class="block:lg flex_grow max-w_30:md p-x_5:lg p-x_4:md p-x_3 m-b_3 m-b_0:md w_100 w_50:md m_auto m_0:md">
            <div class="m_auto m_auto:md self_center text_center">
                <a class="aspect_3x2:lg  block aspect_21x9 aspect_16x9:md bg_top bg_cover bg_no-repeat bg_black generic_video br_1 br_radius br_solid br_black-3 flex_shrink relative shadow_3 text_center c_white-6 h:c_white ">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100">
                        <i class="absolute c_white-9 fa-play-circle text-shadow_black-1 fas flex_auto font_10:md font_5 opacity_9 self_center text_center w_100"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="flex_auto">
            <div class="c_primary-n4 flex_auto font_1 font_2:md font_display font_medium">
                <div class="lh_2 m-t_2 p_3 p-y_2">
                    <a href="#" class="">
                        <span class="block lh_1"><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</span>
                    </a>
                    <span class="block font-size_down lh_1">Electrical Disorders - Rhythm and Conduction Disorders</span>
                    <span class="font-size_down-2 c_secondary-n3  block">Pepper H. Soda III, MD, FACC <span class="font_italic"> - Co-Chair</span></span>
                </div>
            </div>
            <div class="br-t_1 br_dotted br_black-3 c_black flex flex_wrap flex_column gap-y_3 flex_row:md font_n2 justify_between m-t_2 p-t_2">
                <div class="flex_shrink block text_left p-r_4 m-r_4 ">
                    <a href="#modal-extra" class="block h:undecorated uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
                </div>
                <div class="flex_auto m-l_auto:md self_center">
                    <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>
            </div>
        </div>
    </article>

    <article class="c_black flex flex_column flex_row:md">
        <div class="block:lg flex_grow max-w_30:md p-x_5:lg p-x_4:md p-x_3 m-b_3 m-b_0:md w_100 w_50:md m_auto m_0:md">
            <div class="m_auto m_auto:md self_center text_center">
                <a class="aspect_3x2:lg  block aspect_21x9 aspect_16x9:md bg_top bg_cover bg_no-repeat bg_black generic_video br_1 br_radius br_solid br_black-3 flex_shrink relative shadow_3 text_center c_white-6 h:c_white ">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100">
                        <i class="absolute c_white-9 fa-play-circle text-shadow_black-1 fas flex_auto font_10:md font_5 opacity_9 self_center text_center w_100"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="flex_auto">
            <div class="c_primary-n4 flex_auto font_1 font_2:md font_display font_medium">
                <div class="lh_2 m-t_2 p_3 p-y_2">
                    <a href="#" class="">
                        <span class="block lh_1"><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</span>
                    </a>
                    <span class="block font-size_down lh_1">Electrical Disorders - Rhythm and Conduction Disorders</span>
                    <span class="font-size_down-2 c_secondary-n3  block">Pepper H. Soda III, MD, FACC <span class="font_italic"> - Co-Chair</span></span>
                </div>
            </div>
            <div class="br-t_1 br_dotted br_black-3 c_black flex flex_wrap flex_column gap-y_3 flex_row:md font_n2 justify_between m-t_2 p-t_2">
                <div class="flex_shrink block text_left p-r_4 m-r_4 ">
                    <a href="#modal-extra" class="block h:undecorated uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
                </div>
                <div class="flex_auto m-l_auto:md self_center">
                    <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>
            </div>
        </div>
    </article>

Code Sample

Copy Code

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

14.3 Branded Header

deprecated

This is a templated banner that uses as the central branding of a conference product.

Deprecated: Old Designs

Example

<div class="brand-header"></div>

<div class="brand-header"></div>

Code Sample

Copy Code

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

14.3.1 Branded Header Overrides

deprecated

This is a templated banner that uses as the central branding of a conference product.

acc21 - Annual Scientific Session 2021 ah20 - Care of the Athletic Heart ada20 - ADA/Siegfried Conf

Deprecated: Old Designs

Example

<div id="" class="brand-header"></div><br>
<style>
.brand-header {
    height: 160px;
    width: 100%;
    background-color: #002d5b;
    background-image: url('../img/virtual/header.backgroundTexture.sm.png');
    background-repeat: no-repeat;
    background-position: center top;
}
@media only screen and (min-width : 768px) {
    .brand-header {
        height: 160px;
        width: 100%;
        background-image: url('../img/virtual/header.mainLogo.md.png'), url('../img/virtual/header.secondary.md.png'), url('../img/virtual/header.img.md.png'), url('../img/virtual/header.backgroundTexture.png');
        background-size: contain, contain, contain, cover;
        background-position: left center, right center, 27% center, center center;
        background-size: contain, contain, contain, cover;
        background-repeat: no-repeat;
    }
}
@media only screen and (min-width : 1200px) {
    .brand-header {
        height: 240px;
        width: 100%;
        background-image: url('../img/virtual/header.mainLogo.lg.png'), url('../img/virtual/header.secondary.lg.png'), url('../img/virtual/header.img.lg.png'), url('../img/virtual/header.backgroundTexture.png');
        background-position: left center, right center, 14% center, center center;
    }
}
 #.brand-header {
     background-image: url('../img//header.backgroundTexture.sm.png');
}
@media only screen and (min-width : 768px) {
    #.brand-header {
        background-image: url('../img//header.mainLogo.md.png'),
            url('../img//header.secondary.md.png'),
            url('../img//header.img.md.png'),
            url('../img//header.backgroundTexture.png');
    }
}
@media only screen and (min-width : 1200px) {
     #.brand-header {
        background-image: url('../img//header.mainLogo.lg.png'),
            url('../img//header.secondary.lg.png'),
            url('../img//header.img.lg.png'),
            url('../img//header.backgroundTexture.png');
    }
}
</style>

<div id="" class="brand-header"></div><br>
<style>
.brand-header {
    height: 160px;
    width: 100%;
    background-color: #002d5b;
    background-image: url('../img/virtual/header.backgroundTexture.sm.png');
    background-repeat: no-repeat;
    background-position: center top;
}
@media only screen and (min-width : 768px) {
    .brand-header {
        height: 160px;
        width: 100%;
        background-image: url('../img/virtual/header.mainLogo.md.png'), url('../img/virtual/header.secondary.md.png'), url('../img/virtual/header.img.md.png'), url('../img/virtual/header.backgroundTexture.png');
        background-size: contain, contain, contain, cover;
        background-position: left center, right center, 27% center, center center;
        background-size: contain, contain, contain, cover;
        background-repeat: no-repeat;
    }
}
@media only screen and (min-width : 1200px) {
    .brand-header {
        height: 240px;
        width: 100%;
        background-image: url('../img/virtual/header.mainLogo.lg.png'), url('../img/virtual/header.secondary.lg.png'), url('../img/virtual/header.img.lg.png'), url('../img/virtual/header.backgroundTexture.png');
        background-position: left center, right center, 14% center, center center;
    }
}
 #.brand-header {
     background-image: url('../img//header.backgroundTexture.sm.png');
}
@media only screen and (min-width : 768px) {
    #.brand-header {
        background-image: url('../img//header.mainLogo.md.png'),
            url('../img//header.secondary.md.png'),
            url('../img//header.img.md.png'),
            url('../img//header.backgroundTexture.png');
    }
}
@media only screen and (min-width : 1200px) {
     #.brand-header {
        background-image: url('../img//header.mainLogo.lg.png'),
            url('../img//header.secondary.lg.png'),
            url('../img//header.img.lg.png'),
            url('../img//header.backgroundTexture.png');
    }
}
</style>

Code Sample

Copy Code

14.4 Graveyard.LiveVideo

14.4.1 Graveyard.LiveVideo.Channels

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

14.4.1.1 Channels Banners

deprecated

Description: Conferences have added branding on the on demand area with category or channels banners.

generic - Channel Branding track1 - Channel Branding track2 - Channel Branding track3 - Channel Branding

Deprecated: Old Designs

Example

<div class="categoryBanner _banner m-t_3 m-b_4"></div>

<div class="categoryBanner _banner m-t_3 m-b_4"></div>

Code Sample

Copy Code

14.5 Graveyard.PageElements

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

14.5.1 Twitter Tag

deprecated

Description: Every conference has a common #tag structure asking user to join in to the conversation.;

Deprecated: Old Designs

Example

Join The Conversation

ACCAthleticHeart 

<div class="socialTag float_right text_right"><div class="c_secondary font_1">Join The Conversation</div><div class="c_primary font_xbold font_3 font_display"><em class="fas fa-hashtag"></em>ACCAthleticHeart  <em class="fab fa-twitter"></em></div></div>

<div class="socialTag float_right text_right"><div class="c_secondary font_1">Join The Conversation</div><div class="c_primary font_xbold font_3 font_display"><em class="fas fa-hashtag"></em>ACCAthleticHeart  <em class="fab fa-twitter"></em></div></div>

Code Sample

Copy Code

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

Description: The session is the main content item of virtual conferences. These element are represented differently depending on the amount of sessions and presentation are in the conference. Sessions are a collection of presentations.

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

14.6.1 Block Designs

For small conferences that have a small amount of content is recommended to use the Block Designs. When sessions are lower then 10 in count, the Block Designs are recommended.

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

14.6.2 Video Block Dual Channel

deprecated

Description: These video blocks are used in combination with grid templates and dividers.

Deprecated: Old Designs

Example

Live: Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:15 a.m. EDT

101 Cardiovascular Update for the Clinician III

CME
CNE
COP
MOCII

101 Cardiovascular Update for the Clinician III

CME
CNE
COP
MOCII

Live: Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:15 a.m. EDT

101 Cardiovascular Update for the Clinician III

CME
CNE
COP
MOCII

<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><section class="gap_5 grid justify_around p_4 p_5 grid-col_1 grid-col_2:md">
    <article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
            <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
            <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
                <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
            </main>
           <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"></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>    </div>
        <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
            <div class="flex flex_grow justify_start text_left uppercase">
            <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>
        </div>
    </article>    <article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
            <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
            <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
                <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
            </main>
           <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"></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>    </div>
        <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
            <div class="flex flex_grow justify_start text_left uppercase">
            <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>
        </div>
    </article></section>
<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><section class="gap_5 grid justify_around p_4 p_5 grid-col_1">
    <article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
            <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
            <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
                <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
            </main>
           <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"></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>    </div>
        <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
            <div class="flex flex_grow justify_start text_left uppercase">
            <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>
        </div>
    </article></section>

<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><section class="gap_5 grid justify_around p_4 p_5 grid-col_1 grid-col_2:md">
    <article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
            <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
            <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
                <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
            </main>
           <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"></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>    </div>
        <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
            <div class="flex flex_grow justify_start text_left uppercase">
            <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>
        </div>
    </article>    <article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
            <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
            <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
                <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
            </main>
           <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"></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>    </div>
        <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
            <div class="flex flex_grow justify_start text_left uppercase">
            <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>
        </div>
    </article></section>
<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><section class="gap_5 grid justify_around p_4 p_5 grid-col_1">
    <article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
            <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
            <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
                <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
            </main>
           <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"></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>    </div>
        <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
            <div class="flex flex_grow justify_start text_left uppercase">
            <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>
        </div>
    </article></section>

Code Sample

Copy Code

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

14.6.3 Video Block Session

deprecated

Description: These video blocks are used in combination with grid templates and dividers.

Deprecated: Old Designs

Example

101 Cardiovascular Update for the Clinician III

CME
CNE
COP
MOCII

FORMAT:

this element uses data that has strict data formatting requirements. See the data tab for more information.

<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>

<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>

Code Sample

Copy Code

14.6.4 Graveyard.Program.LiveVideo

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

14.6.4.1 Locking Graphics

Showing assets before they are intractable is needed

Example

101 Cardiovascular Update for the Clinician III

CME
CNE
COP
MOCII

<div class="locked_graphic"><article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article></div>

<div class="locked_graphic"><article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 "><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</h2>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article></div>

Code Sample

Copy Code

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

14.6.5 Five Channel Max

deprecated

Description: Block Designs are Great for a few channels but there is a maximum of 5 channels without the design crushing too much.

Deprecated: Old Designs

Example

Live: Saturday, Nov. 20, 2021@ 11:15 a.m. – 11:15 a.m. EDT

Planning for the Inevitable: Workforce and Patient Access Challenges

Pepper H. Soda III, MD, FACC
Frederic R. Simmons

CME
CNE
COP
MOCII

Reducing Care Variation

Steven M. Bradley, MD, FACC
Suzette Jaskie, MBA

CME
CNE
COP
MOCII

Maintaining the Viability of Your Nuclear Cardiology Program (Joint Society Session with ASNC)

Dennis Calnon
David C. Konur, FACHE

CME
CNE
COP
MOCII

Academic Compensation Models: From APPs to Professors

David Brody, MPA;
Pepper H. Soda III, MD, FACC

CME
CNE
COP
MOCII

Managing Change in Graduate Medical Education

Lisa A. Mendes, MD, FACC
Gaby Weissman, MD, FACC
ModeratorAllison Bailie

CME
CNE
COP
MOCII

<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><section class="gap_4 grid justify_around p-y_4 p-y_5 grid-col_1 grid-col_5:md">
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_primary 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Planning for the Inevitable: Workforce and Patient Access Challenges </h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Pepper H. Soda III, MD, FACC</li><li>Frederic R. Simmons</li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA BREAK ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_accent 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">
            Reducing Care Variation</h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Steven M. Bradley, MD, FACC</li><li> Suzette Jaskie, MBA </li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA BREAK ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_highlight 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Maintaining the Viability of Your Nuclear Cardiology Program (Joint Society Session with ASNC)</h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Dennis Calnon</li><li>  David C. Konur, FACHE  </li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA 2 ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_warning 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Academic Compensation Models: From APPs to Professors  </h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>David Brody, MPA;</li><li> Pepper H. Soda III, MD, FACC</li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA 2 ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_success 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Managing Change in Graduate Medical Education  </h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Lisa A. Mendes, MD, FACC</li><li> Gaby Weissman, MD, FACC</li> <li><strong>Moderator</strong>Allison Bailie</li></ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
</section>

<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><section class="gap_4 grid justify_around p-y_4 p-y_5 grid-col_1 grid-col_5:md">
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_primary 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Planning for the Inevitable: Workforce and Patient Access Challenges </h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Pepper H. Soda III, MD, FACC</li><li>Frederic R. Simmons</li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA BREAK ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_accent 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">
            Reducing Care Variation</h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Steven M. Bradley, MD, FACC</li><li> Suzette Jaskie, MBA </li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA BREAK ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_highlight 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Maintaining the Viability of Your Nuclear Cardiology Program (Joint Society Session with ASNC)</h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Dennis Calnon</li><li>  David C. Konur, FACHE  </li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA 2 ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_warning 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Academic Compensation Models: From APPs to Professors  </h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>David Brody, MPA;</li><li> Pepper H. Soda III, MD, FACC</li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
<!----------------------------------------------------------- AREA 2 ---------------------------------------------------------->
<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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 bg_success 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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Managing Change in Graduate Medical Education  </h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Lisa A. Mendes, MD, FACC</li><li> Gaby Weissman, MD, FACC</li> <li><strong>Moderator</strong>Allison Bailie</li></ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>
</section>

Code Sample

Copy Code

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

14.6.6 Video Block Presentation

deprecated

Description: These video blocks are used in combination with grid templates and dividers.

Deprecated: Old Designs

Example

Cardiovascular Update for the Clinician III

Pepper H. Soda III, MD, FACC
Pepper H. Soda III, MD, FACC

CME
CNE
COP
MOCII

FORMAT:

this element uses data that has strict data formatting requirements. See the data tab for more information.

<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Cardiovascular Update for the Clinician III</h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Pepper H. Soda III, MD, FACC</li><li> Pepper H. Soda III, MD, FACC</li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>

<article class="br-t_3 br_primary-2 br_radius br_solid c_black m-b_4 m-b_5:md m-t_5 m-x_0">
        <div class="br_1 br_black-2 br_radius br_solid flex flex_column font_ui justify_start p-x_4 relative shadow_overlap-light" style="height: 100%;">
        <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  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>        <main class="block flex_auto m-x_auto max-w_35 p-t_3 p-t_4:lg w_100">
            <h2 class="font-size_up font_display lh_2 ">Cardiovascular Update for the Clinician III</h2>
            <ul class="block c_black-6 font-size_down lh_1 ul_none"><li>Pepper H. Soda III, MD, FACC</li><li> Pepper H. Soda III, MD, FACC</li> </ul>
        </main>
       <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"></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>    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex flex_grow justify_start text_left uppercase">
        <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>
    </div>
</article>

Code Sample

Copy Code

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

14.6.7 Workshops

Description: A collection of Workshops that are available for the user to select from.

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

14.6.7.1 Workshops Button

Description: Workshops are interactive buttons that open a webex page and have the call to action "Join Now".

Example

<footer class="flex flex_auto flex_wrap gap_3 m_auto m-t_auto max-w_15 p-b_4 p-b_4:lg w_100">
        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 [active]"><i class="fas fa-heart"></i></a>
        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
        <a href="#" target="blank" class="btn btn-primary flex_auto">Join Now</a>
        <a href="#" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100">show details</a>
</footer>

<footer class="flex flex_auto flex_wrap gap_3 m_auto m-t_auto max-w_15 p-b_4 p-b_4:lg w_100">
        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 [active]"><i class="fas fa-heart"></i></a>
        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
        <a href="#" target="blank" class="btn btn-primary flex_auto">Join Now</a>
        <a href="#" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100">show details</a>
</footer>

Code Sample

Copy Code

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

14.6.7.2 Simple

Description: Simple Design for Workshops.

Example

Navigating Health Care Economics
Category Tag

Cardiovascular Update for the Clinician III

Attachments

cme
cne
moc
aapa
ecme

<article class="br-t_3 br_primary-2 br_radius br_solid c_black font_0 m-b_4 shadow_overlap-light">
    <div class="br-tl_radius br-tr_radius br_1 br_black-3 br_solid flex flex_column font_ui m-t_n2 relative shadow_2">
        <div class="br-b_1 br_primary-2 br_solid">
            <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>            <div class="p_4 p-b_2 flex flex_column flex_row:lg gap_4">
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font-size_up-2 flex_auto p-r_4:lg">
                    <span class="block font-size_up-1 font_display lh_1">
                        <!--
                            <strong class="font_bold p-r_3 font_accent">101</strong>
                        -->
                        Cardiovascular Update for the Clinician III                    </span>
                    <!-- Time & Date Stamp -->
                    <!--
                        <span class="c_accent font-size_down-1">
                            Saturday, Nov. 20, 2021  @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
                        </span>
                    -->
                </h3>
                <footer class="flex flex_auto flex_wrap gap_3 m_auto m-t_auto max-w_15 p-b_4 p-b_4:lg w_100">
                        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 [active]"><i class="fas fa-heart"></i></a>
                        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
                        <a href="#" target="blank" class="btn btn-primary flex_auto">Join Now</a>
                        <a href="#" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100">show details</a>
                </footer>            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
    <div class="flex_auto">
        <a href="#modal-extra" class="block h:underline uppercase font_bold" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
    </div>
    <div class="flex_grow uppercase m-l_auto">
            <ul class="ul_none font_n2 text_right">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_MOCIV br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_AAPA br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> aapa
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_ECME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> ecme
                </li>
            </ul>
        </div>
    </div>
</article>

<article class="br-t_3 br_primary-2 br_radius br_solid c_black font_0 m-b_4 shadow_overlap-light">
    <div class="br-tl_radius br-tr_radius br_1 br_black-3 br_solid flex flex_column font_ui m-t_n2 relative shadow_2">
        <div class="br-b_1 br_primary-2 br_solid">
            <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>            <div class="p_4 p-b_2 flex flex_column flex_row:lg gap_4">
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font-size_up-2 flex_auto p-r_4:lg">
                    <span class="block font-size_up-1 font_display lh_1">
                        <!--
                            <strong class="font_bold p-r_3 font_accent">101</strong>
                        -->
                        Cardiovascular Update for the Clinician III                    </span>
                    <!-- Time & Date Stamp -->
                    <!--
                        <span class="c_accent font-size_down-1">
                            Saturday, Nov. 20, 2021  @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr>
                        </span>
                    -->
                </h3>
                <footer class="flex flex_auto flex_wrap gap_3 m_auto m-t_auto max-w_15 p-b_4 p-b_4:lg w_100">
                        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2  h:bg_alert-n4 [active]"><i class="fas fa-heart"></i></a>
                        <a href="#" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
                        <a href="#" target="blank" class="btn btn-primary flex_auto">Join Now</a>
                        <a href="#" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100">show details</a>
                </footer>            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
    <div class="flex_auto">
        <a href="#modal-extra" class="block h:underline uppercase font_bold" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
    </div>
    <div class="flex_grow uppercase m-l_auto">
            <ul class="ul_none font_n2 text_right">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_MOCIV br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_AAPA br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> aapa
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_ECME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> ecme
                </li>
            </ul>
        </div>
    </div>
</article>

Code Sample

Copy Code

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

14.6.8 On Demand

Description: When the count of sessions is lower then 10 in count, the Simple Design is recommended the difference between live and on demand.

Example

Session I: Evolving New Frontiers of Imaging Ready for PracticeNew York Cardiovascular Symposium 2021 Welcome Video and Introduction of session and Faculty by Dr. Itchhaporia Dipti Itchhaporia, MD, FACC (Chair)

Watch

Attachments

cme
cne
moc
aapa
ecme

<article class="br-t_3 br_primary-2 br_radius br_solid c_black font_0 m-b_4 shadow_overlap-light">
    <div class="br-tl_radius br-tr_radius br_1 br_black-3 br_solid flex flex_column font_ui m-t_n2 relative shadow_2">
        <div class="br-b_1 br_primary-2 br_solid">
            <!-- <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> -->
            <div class="p_4 p-b_2 flex flex_column flex_row:lg">
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font-size_up-2  p-r_4:lg">
                    <span class="block c_black-6 uppercase font_bold font-size_down-1"> Session I: Evolving New Frontiers of Imaging Ready for Practice</span><span class="block font-size_up-1 font_display lh_1">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of session and Faculty by Dr. Itchhaporia </span><span class="block c_black font-size_down-1 font_ui lh_3 opacity_7">Dipti Itchhaporia, MD, FACC (Chair)</span>
                </h3>
                <div class="flex_grow m-l_auto:lg">
                    <div class="flex flex_column-reverse flex_row-reverse:lg flex_wrap gap-x_3 gap-y_3 p-y_3 p-y_0:lg justify_start">
                        <a href="#" class="btn btn-primary h:bg_secondary-n3 z_5">Watch </a>
                        <a href="#" class="btn btn-secondary z_5 a:bg_alert h:bg_alert-n3 { active }"><i class="fas fa-heart c_white"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
    <div class="flex_auto">
        <a href="#modal-extra" class="block h:underline uppercase font_bold" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
    </div>
    <div class="flex_grow uppercase m-l_auto">
            <ul class="ul_none font_n2 text_right">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_MOCIV br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_AAPA br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> aapa
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_ECME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> ecme
                </li>
            </ul>
        </div>
    </div>
</article>

<article class="br-t_3 br_primary-2 br_radius br_solid c_black font_0 m-b_4 shadow_overlap-light">
    <div class="br-tl_radius br-tr_radius br_1 br_black-3 br_solid flex flex_column font_ui m-t_n2 relative shadow_2">
        <div class="br-b_1 br_primary-2 br_solid">
            <!-- <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> -->
            <div class="p_4 p-b_2 flex flex_column flex_row:lg">
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font-size_up-2  p-r_4:lg">
                    <span class="block c_black-6 uppercase font_bold font-size_down-1"> Session I: Evolving New Frontiers of Imaging Ready for Practice</span><span class="block font-size_up-1 font_display lh_1">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of session and Faculty by Dr. Itchhaporia </span><span class="block c_black font-size_down-1 font_ui lh_3 opacity_7">Dipti Itchhaporia, MD, FACC (Chair)</span>
                </h3>
                <div class="flex_grow m-l_auto:lg">
                    <div class="flex flex_column-reverse flex_row-reverse:lg flex_wrap gap-x_3 gap-y_3 p-y_3 p-y_0:lg justify_start">
                        <a href="#" class="btn btn-primary h:bg_secondary-n3 z_5">Watch </a>
                        <a href="#" class="btn btn-secondary z_5 a:bg_alert h:bg_alert-n3 { active }"><i class="fas fa-heart c_white"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
    <div class="flex_auto">
        <a href="#modal-extra" class="block h:underline uppercase font_bold" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
    </div>
    <div class="flex_grow uppercase m-l_auto">
            <ul class="ul_none font_n2 text_right">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_MOCIV br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_AAPA br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> aapa
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_ECME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> ecme
                </li>
            </ul>
        </div>
    </div>
</article>

Code Sample

Copy Code

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

14.6.8.1 Video Block

Description: These video blocks are used in combination with grid templates and dividers.

Example

Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients

Attachments

cme
cne
cop

<article class="c_black m-b_4 m-b_5:md m-t_0:md m-t_4 m-t_5:lg">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_column:lg flex_row:md font_ui h:bg_black-2 m-x_n2 relative" style="height: 100%">
        <div class="display_none:lg flex_none justify_center p-l_4:md p-y_3" style="width: 4rem">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width: 3rem">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-play fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="block:lg display_none m-t_n5 m-x_5 p-x_5">
            <div class="m-t_n5 m_auto m_auto:md self_center text_center">
                <div class="aspect_21x9 bg-blend_overlay bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-play fas flex_auto font_5 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][ p-b_3 p-b_4:md ]">
            <div class="p-t_2 p_4 relative p-y_0 p-y_3:md p-x_5:lg"><a class="expanded-click-area h:undecorated p-b_3" target="_blank" href="/docs/default-source/filesah20/eabstracts/chowdhury-anabolic-androgenic-1130-279.pdf?sfvrsn=2518b85a_2">Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients</a></div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block  text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow uppercase text_right">
            <ul class="m-t_n2 ul_none">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_COP br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cop </li>
            </ul>
        </div>
    </div>
</article>

<article class="c_black m-b_4 m-b_5:md m-t_0:md m-t_4 m-t_5:lg">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_column:lg flex_row:md font_ui h:bg_black-2 m-x_n2 relative" style="height: 100%">
        <div class="display_none:lg flex_none justify_center p-l_4:md p-y_3" style="width: 4rem">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width: 3rem">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-play fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="block:lg display_none m-t_n5 m-x_5 p-x_5">
            <div class="m-t_n5 m_auto m_auto:md self_center text_center">
                <div class="aspect_21x9 bg-blend_overlay bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-play fas flex_auto font_5 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][ p-b_3 p-b_4:md ]">
            <div class="p-t_2 p_4 relative p-y_0 p-y_3:md p-x_5:lg"><a class="expanded-click-area h:undecorated p-b_3" target="_blank" href="/docs/default-source/filesah20/eabstracts/chowdhury-anabolic-androgenic-1130-279.pdf?sfvrsn=2518b85a_2">Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients</a></div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block  text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow uppercase text_right">
            <ul class="m-t_n2 ul_none">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_COP br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cop </li>
            </ul>
        </div>
    </div>
</article>

Code Sample

Copy Code

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

14.6.8.2 Slides Block

Description: These slide blocks are used in combination with grid templates and dividers.

Example

Attachments

CME
CNE
COP
MOCII

<article  class="c_black m-b_4 m-b_5:md m-t_0:md m-t_4 m-t_5:lg">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_column:lg flex_row:md font_ui h:bg_black-2 m-x_n2 relative" style="height: 100%">
        <div class="display_none:lg flex_none justify_center p-l_4:md p-y_3" style="width: 4rem">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width: 3rem">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-presentation fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="block:lg display_none m-t_n5 m-x_5 p-x_5">
            <div class="m-t_n5 m_auto m_auto:md self_center text_center max-w_20">
                <div class="aspect_21x9 bg-blend_overlay bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-presentation fas flex_auto font_5 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][ p-b_3 p-b_4:md ]">
            <div class="p-t_2 p_4 p-y_0 p-y_3:md p-x_5:lg"><a class="expanded-click-area h:undecorated p-b_3" target="_blank" href="/docs/default-source/filesah20/eabstracts/chowdhury-anabolic-androgenic-1130-279.pdf?>Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients</a></div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block  text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow">
            <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>
    </div>
</article>

<article  class="c_black m-b_4 m-b_5:md m-t_0:md m-t_4 m-t_5:lg">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_column:lg flex_row:md font_ui h:bg_black-2 m-x_n2 relative" style="height: 100%">
        <div class="display_none:lg flex_none justify_center p-l_4:md p-y_3" style="width: 4rem">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width: 3rem">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-presentation fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="block:lg display_none m-t_n5 m-x_5 p-x_5">
            <div class="m-t_n5 m_auto m_auto:md self_center text_center max-w_20">
                <div class="aspect_21x9 bg-blend_overlay bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-presentation fas flex_auto font_5 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][ p-b_3 p-b_4:md ]">
            <div class="p-t_2 p_4 p-y_0 p-y_3:md p-x_5:lg"><a class="expanded-click-area h:undecorated p-b_3" target="_blank" href="/docs/default-source/filesah20/eabstracts/chowdhury-anabolic-androgenic-1130-279.pdf?>Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients</a></div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block  text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow">
            <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>
    </div>
</article>

Code Sample

Copy Code

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

14.6.8.3 eAbstract

eAbstracts are used in combination with grid templates and dividers.

Example

Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients

Attachments

CME
CNE
COP
MOCII

<article  class="c_black m-b_4 m-b_5:md m-t_0:md m-t_4 m-t_5:lg">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_column:lg flex_row:md font_ui h:bg_black-2 m-x_n2 relative" style="height: 100%">
        <div class="display_none:lg flex_none justify_center p-l_4:md p-y_3" style="width: 4rem">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width: 3rem">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-user-chart fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="block:lg display_none m-t_n5 m-x_5 p-x_5">
            <div class="m-t_n5 m_auto m_auto:md self_center text_center">
                <div class="aspect_21x9 bg-blend_overlay bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-user-chart fas flex_auto font_5 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][ p-b_3 p-b_4:md p-l_0:lg p-l_4:md ]">
            <div class="p-t_2 p_4  p-y_0 p-y_3:md p-x_5:lg">
                <a class="expanded-click-area h:undecorated p-b_3" target="_blank" href="/docs/default-source/filesah20/eabstracts/chowdhury-anabolic-androgenic-1130-279.pdf?sfvrsn=2518b85a_2">Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients</a>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block  text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow m-l_auto">
             <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>
    </div>
</article>

<article  class="c_black m-b_4 m-b_5:md m-t_0:md m-t_4 m-t_5:lg">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_column:lg flex_row:md font_ui h:bg_black-2 m-x_n2 relative" style="height: 100%">
        <div class="display_none:lg flex_none justify_center p-l_4:md p-y_3" style="width: 4rem">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width: 3rem">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-user-chart fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="block:lg display_none m-t_n5 m-x_5 p-x_5">
            <div class="m-t_n5 m_auto m_auto:md self_center text_center">
                <div class="aspect_21x9 bg-blend_overlay bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-user-chart fas flex_auto font_5 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][ p-b_3 p-b_4:md p-l_0:lg p-l_4:md ]">
            <div class="p-t_2 p_4  p-y_0 p-y_3:md p-x_5:lg">
                <a class="expanded-click-area h:undecorated p-b_3" target="_blank" href="/docs/default-source/filesah20/eabstracts/chowdhury-anabolic-androgenic-1130-279.pdf?sfvrsn=2518b85a_2">Anabolic-Androgenic Steroid Abuse: A Potential Cause of Myocardial Infarction in Young Patients</a>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block  text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow m-l_auto">
             <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>
    </div>
</article>

Code Sample

Copy Code

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

14.6.8.4 Journal Block

Description: These slide blocks are used in combination with grid templates and dividers.

Example

Exercise Training for Patients With Hypertrophic Cardio myopathy: JACC Review Topic of the Week

Article

Published: June 15, 2020

CME
CNE
COP
MOCII

<article  class="c_black m-b_4 m-t_5 m-t_0:md m-t_2:lg ">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_row:md font_ui h:bg_black-2 m-x_n2 relative">
        <div class="flex_none justify_center p-l_4:md p-y_3" style="width:4rem;">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width:3rem;">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-book-open fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][  p-x_3 p-b_0:lg p-b_3 p-l_4:lg p-l_4:md ]" >
            <div class="m-t_2 p_3 p-y_2"><a class="expanded-click-area h:undecorated" target="_blank" href="https://virtual.acc.org/docs/default-source/filesah20/journal/10-dias_exercise-training-for-patients-with-hypertrophic-cardiomyopathy.pdf?sfvrsn=fa018194_2" sfref="[documents%7COpenAccessDataProvider]c9ef138c-5f43-4524-8a51-d06907c828dc">Exercise Training for Patients With Hypertrophic Cardio myopathy: JACC Review Topic of the Week </a>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block font_bold text_left p-r_3 m-r_3 br-r_1 br_black-3 br_solid">
            <a href="#modal-disclosures" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures">Article</a>
        </div>
        <div class="flex_shrink block font_italic  text_left">
            <span class="block uppercase" >Published: June 15, 2020</span>
        </div>
        <div class="flex_grow m-l_auto">
             <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>
    </div>
</article>

<article  class="c_black m-b_4 m-t_5 m-t_0:md m-t_2:lg ">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_row:md font_ui h:bg_black-2 m-x_n2 relative">
        <div class="flex_none justify_center p-l_4:md p-y_3" style="width:4rem;">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width:3rem;">
                <div class="pathwayColor{ bg_primary } flex_shrink relative aspect_1x1 shadow_3 text_center texture_ondemand thumb [ bg-blend_multiply bg_center bg_contain bg_no-repeat  ][ br_2 br_black-3 br_radius br_solid ]">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><em class="absolute c_white-9 fa-book-open fas flex_auto font_2 self_center text_center w_100"></em></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][  p-x_3 p-b_0:lg p-b_3 p-l_4:lg p-l_4:md ]" >
            <div class="m-t_2 p_3 p-y_2"><a class="expanded-click-area h:undecorated" target="_blank" href="https://virtual.acc.org/docs/default-source/filesah20/journal/10-dias_exercise-training-for-patients-with-hypertrophic-cardiomyopathy.pdf?sfvrsn=fa018194_2" sfref="[documents%7COpenAccessDataProvider]c9ef138c-5f43-4524-8a51-d06907c828dc">Exercise Training for Patients With Hypertrophic Cardio myopathy: JACC Review Topic of the Week </a>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block font_bold text_left p-r_3 m-r_3 br-r_1 br_black-3 br_solid">
            <a href="#modal-disclosures" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures">Article</a>
        </div>
        <div class="flex_shrink block font_italic  text_left">
            <span class="block uppercase" >Published: June 15, 2020</span>
        </div>
        <div class="flex_grow m-l_auto">
             <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>
    </div>
</article>

Code Sample

Copy Code

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

14.6.8.5 Resource Package

Description: These slide blocks are used in combination with grid templates and dividers.

Example

Exercise Training for Patients With Hypertrophic Cardio myopathy: JACC Review Topic of the Week

Article

Published: June 15, 2020

CME
CNE
COP
MOCII

<article  class="c_black m-b_4 m-t_5 m-t_0:md m-t_2:lg ">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_row:md font_ui h:bg_black-2 m-x_n2 relative">
        <div class="flex_none justify_center p-l_4:md p-y_3" style="width:4rem;">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width:3rem;">
                <div class="aspect_1x1 bg-blend_multiply bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><i class="flex_auto c_white-9 fa-file-archive fas font_2 self_center text_center w_100"></i></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][  p-x_3 p-b_0:lg p-b_3 p-l_4:lg p-l_4:md ]" >
            <div class="m-t_2 p_3 p-y_2"><a class="expanded-click-area h:undecorated" target="_blank" href="https://virtual.acc.org/docs/default-source/filesah20/journal/10-dias_exercise-training-for-patients-with-hypertrophic-cardiomyopathy.pdf?sfvrsn=fa018194_2" sfref="[documents%7COpenAccessDataProvider]c9ef138c-5f43-4524-8a51-d06907c828dc">Exercise Training for Patients With Hypertrophic Cardio myopathy: JACC Review Topic of the Week </a>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block font_bold text_left p-r_3 m-r_3 br-r_1 br_black-3 br_solid">
            <a href="#modal-disclosures" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures">Article</a>
        </div>
        <div class="flex_shrink block font_italic  text_left">
            <span class="block uppercase" >Published: June 15, 2020</span>
        </div>
        <div class="flex_grow m-l_auto">
             <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>
    </div>
</article>

<article  class="c_black m-b_4 m-t_5 m-t_0:md m-t_2:lg ">
    <div class="br_1 br_radius br_solid br_black-2 flex flex_column flex_row:md font_ui h:bg_black-2 m-x_n2 relative">
        <div class="flex_none justify_center p-l_4:md p-y_3" style="width:4rem;">
            <div class="flex_none m-t_n5 m_auto m_auto:md self_center text_center" style="width:3rem;">
                <div class="aspect_1x1 bg-blend_multiply bg_cover bg_no-repeat bg_primary br_2 br_radius br_solid br_black-3 flex_shrink relative shadow_3 texture_ondemand text_center thumb">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100"><i class="flex_auto c_white-9 fa-file-archive fas font_2 self_center text_center w_100"></i></div>
                </div>
            </div>
        </div>
        <div class="flex_auto [ c_primary-n4  font_0 font_1:md font_copy font_regular lh_2 ][  p-x_3 p-b_0:lg p-b_3 p-l_4:lg p-l_4:md ]" >
            <div class="m-t_2 p_3 p-y_2"><a class="expanded-click-area h:undecorated" target="_blank" href="https://virtual.acc.org/docs/default-source/filesah20/journal/10-dias_exercise-training-for-patients-with-hypertrophic-cardiomyopathy.pdf?sfvrsn=fa018194_2" sfref="[documents%7COpenAccessDataProvider]c9ef138c-5f43-4524-8a51-d06907c828dc">Exercise Training for Patients With Hypertrophic Cardio myopathy: JACC Review Topic of the Week </a>
            </div>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block font_bold text_left p-r_3 m-r_3 br-r_1 br_black-3 br_solid">
            <a href="#modal-disclosures" class="block h:underline uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures">Article</a>
        </div>
        <div class="flex_shrink block font_italic  text_left">
            <span class="block uppercase" >Published: June 15, 2020</span>
        </div>
        <div class="flex_grow m-l_auto">
             <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>
    </div>
</article>

Code Sample

Copy Code

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

14.6.9 Simple

Description: When the count of sessions is lower then 10 in count, the Simple Design is recommended.

Example

Navigating Health Care Economics
Category Tag

101 Cardiovascular Update for the Clinician III Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT

Watch

Presentations

New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Co-Chair:Pepper H. Soda III, MD, FACC (New York, NY, USA) 11:45 – 11:49 a.m. ET
Antiplatelet Regimen After Drug Coated Balloon Chen (China) 12:00 – 12:45 PM EDT
Case: Drug Coated Balloon in De Novo Ostial Left Anterior Descending Artery Qiu (China) 12:45 – 1:00 PM EDT

Attachments

cme
cop

<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light">
    <div class="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">
        <div class="br-b_1 br_solid br_primary-2">
            <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>            <div class="p_4 p-b_2 flex flex_column flex_row:lg">
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font-size_up-2 p-r_4:lg">
                    <span class="block font-size_up-1 font_display lh_1">
                        <strong class="font_bold p-r_3">101</strong>
                        Cardiovascular Update for the Clinician III                    </span>
                    <span class="c_accent font-size_down-1">Saturday, Nov. 20, 2021  @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span>
                </h3>
                <div class="flex_grow m-l_auto:lg">
                    <div class="flex flex_column-reverse flex_row-reverse:lg flex_wrap gap-x_3 gap-y_3 p-y_3 p-y_0:lg justify_start">
                        <a href="#" class="btn btn-primary h:bg_secondary-n3 z_5">Watch </a>
                        <a href="#" class="btn btn-secondary z_5 a:bg_alert h:bg_alert-n3 { active }"><i class="fas fa-heart c_white"></i></a>
                    </div>
                </div>
            </div>
            <h4 class="font-size_up p-x_4 c_primary 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-2 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white">
                    <span class="font-size_up-1 block font_display">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                    <span class="font-size-down opacity_7 font_ui"><strong class="c_primary">Co-Chair:</strong>Pepper H. Soda III, MD, FACC (New York, NY, USA)</span>
                    <span class="font-size-down-1 opacity_6 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-2 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white-9">
                    <span class="font-size_up-1 block font_display">Antiplatelet Regimen After Drug Coated Balloon </span>
                    <span class="font-size-down opacity_7 font_ui">Chen (China)</span>
                    <span class="font-size-down-1 opacity_6 font_italic block">12:00 – 12:45 PM <abbr title="EASTERN DAYLIGHT TIME, UTC -4">EDT</abbr></span>
                </li>
                <li class="br-t_1 br_black-2 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white-9">
                    <span class="font-size_up-1 block font_display">Case: Drug Coated Balloon in De Novo Ostial Left Anterior Descending Artery </span>
                    <span class="font-size-down opacity_7 font_ui">Qiu (China)</span>
                    <span class="font-size-down-1 opacity_6 font_italic block">12:45 – 1:00 PM <abbr title="EASTERN DAYLIGHT TIME, UTC -4">EDT</abbr></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex_auto"> <a href="#modal-extra" class="block h:underline uppercase font_bold" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow uppercase m-l_auto">
            <ul class="ul_none font_n2 text_right">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_COP br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cop
                </li>
            </ul>
        </div>
    </div>
</article>

<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light">
    <div class="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">
        <div class="br-b_1 br_solid br_primary-2">
            <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>            <div class="p_4 p-b_2 flex flex_column flex_row:lg">
                <h3 class="font_display m-b_3 lh_2 c_primary-n2 font-size_up-2 p-r_4:lg">
                    <span class="block font-size_up-1 font_display lh_1">
                        <strong class="font_bold p-r_3">101</strong>
                        Cardiovascular Update for the Clinician III                    </span>
                    <span class="c_accent font-size_down-1">Saturday, Nov. 20, 2021  @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span>
                </h3>
                <div class="flex_grow m-l_auto:lg">
                    <div class="flex flex_column-reverse flex_row-reverse:lg flex_wrap gap-x_3 gap-y_3 p-y_3 p-y_0:lg justify_start">
                        <a href="#" class="btn btn-primary h:bg_secondary-n3 z_5">Watch </a>
                        <a href="#" class="btn btn-secondary z_5 a:bg_alert h:bg_alert-n3 { active }"><i class="fas fa-heart c_white"></i></a>
                    </div>
                </div>
            </div>
            <h4 class="font-size_up p-x_4 c_primary 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-2 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white">
                    <span class="font-size_up-1 block font_display">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
                    <span class="font-size-down opacity_7 font_ui"><strong class="c_primary">Co-Chair:</strong>Pepper H. Soda III, MD, FACC (New York, NY, USA)</span>
                    <span class="font-size-down-1 opacity_6 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-2 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white-9">
                    <span class="font-size_up-1 block font_display">Antiplatelet Regimen After Drug Coated Balloon </span>
                    <span class="font-size-down opacity_7 font_ui">Chen (China)</span>
                    <span class="font-size-down-1 opacity_6 font_italic block">12:00 – 12:45 PM <abbr title="EASTERN DAYLIGHT TIME, UTC -4">EDT</abbr></span>
                </li>
                <li class="br-t_1 br_black-2 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white-9">
                    <span class="font-size_up-1 block font_display">Case: Drug Coated Balloon in De Novo Ostial Left Anterior Descending Artery </span>
                    <span class="font-size-down opacity_7 font_ui">Qiu (China)</span>
                    <span class="font-size-down-1 opacity_6 font_italic block">12:45 – 1:00 PM <abbr title="EASTERN DAYLIGHT TIME, UTC -4">EDT</abbr></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="c_black flex flex_wrap font_n2 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3">
        <div class="flex_auto"> <a href="#modal-extra" class="block h:underline uppercase font_bold" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_grow uppercase m-l_auto">
            <ul class="ul_none font_n2 text_right">
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme
                </li>
                <li class="inline-block lh_0 p-l_3">
                    <span class="bg_COP br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cop
                </li>
            </ul>
        </div>
    </div>
</article>

Code Sample

Copy Code

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

14.7 Video Block (Light)

deprecated

Description: These video blocks are used in combination with grid templates and dividers.

generic_video - the default Channel for videos. generic_video-nolabel - the default Channel for videos with no label. track1_video - track 1 videos will have these decorations. track2_video - track 2 videos will have these decorations. track3_video - track 3 videos will have these decorations.

Deprecated: Old Designs

Example

101 Cardiovascular Update for the Clinician III

Attachments

CME
CNE
COP
MOCII

    <article class="c_black">
    <div class="relative">
        <div class="block:lg p-x_5:md">
            <div class="m_auto m_auto:md self_center text_center max-w_20">
                <a class="aspect_4x3:lg  block aspect_21x9 aspect_16x9:md bg_top bg_cover bg_no-repeat bg_black generic_video br_1 br_radius br_solid br_black-3 flex_shrink relative shadow_3 text_center c_white-6 h:c_white ">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100">
                        <i class="absolute c_white-9 fa-play-circle text-shadow_black-1 fas flex_auto font_5 font_10:md self_center text_center w_100"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="c_primary-n4 flex_auto font_1 font_display font_medium">
            <div class="lh_2 m-t_2 p_3 p-y_2">
                <a href="#" class="">
                    <span class="block lh_1"><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</span>
                </a>
            </div>
        </div>
    </div>
    <div class="br-t_1 br_dotted br_black-3 c_black flex flex_wrap flex_column gap-y_3 flex_row:md font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:undecorated uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_auto m-l_auto:md self_center">
             <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>
    </div>
</article>

    <article class="c_black">
    <div class="relative">
        <div class="block:lg p-x_5:md">
            <div class="m_auto m_auto:md self_center text_center max-w_20">
                <a class="aspect_4x3:lg  block aspect_21x9 aspect_16x9:md bg_top bg_cover bg_no-repeat bg_black generic_video br_1 br_radius br_solid br_black-3 flex_shrink relative shadow_3 text_center c_white-6 h:c_white ">
                    <div class="absolute b_0 flex h:opacity justify_center l_0 opacity_7 r_0 self_center t_0 text_center w_100">
                        <i class="absolute c_white-9 fa-play-circle text-shadow_black-1 fas flex_auto font_5 font_10:md self_center text_center w_100"></i>
                    </div>
                </a>
            </div>
        </div>
        <div class="c_primary-n4 flex_auto font_1 font_display font_medium">
            <div class="lh_2 m-t_2 p_3 p-y_2">
                <a href="#" class="">
                    <span class="block lh_1"><strong class="font_accent">101</strong> Cardiovascular Update for the Clinician III</span>
                </a>
            </div>
        </div>
    </div>
    <div class="br-t_1 br_dotted br_black-3 c_black flex flex_wrap flex_column gap-y_3 flex_row:md font_n2 justify_between m-t_2 p-t_2">
        <div class="flex_shrink block text_left p-r_4 m-r_4 ">
            <a href="#modal-extra" class="block h:undecorated uppercase" data-remote="https://disclosures.acc.org/Public/AnnualMeetingAppConsol?pid=14617" data-toggle="modal" data-target="#modal-disclosures"><i class="far fa-paperclip"></i> Attachments</a>
        </div>
        <div class="flex_auto m-l_auto:md self_center">
             <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>
    </div>
</article>

Code Sample

Copy Code

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

14.8 Lobby

deprecated

This page brings together all active and future conferences. The page is hosted at the root domain of virtual.acc.org. This is the banner that uses as the umbrella brand of the conferences.

Deprecated: Old Designs from Virtual 2020

Example

<div class="lobby-header"></div>

<div class="lobby-header"></div>

Code Sample

Copy Code

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

14.8.1 Conference Teaser

deprecated

This container holds the brand of the conferences with some high level information.

Deprecated: Old Designs from Virtual 2020

Example

conferences Name

A focus on evidence-based, practical, cardiovascular care strategies for the elite athlete to exercise enthusiast.

live

June 20, 2020

on demand

June 20, 2020 - December 31, 2020

available credits

cme
moc II

<div class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_white">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area"><span class="display_none">conferences Name</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">A focus on evidence-based, practical, cardiovascular care strategies for the elite athlete to exercise enthusiast.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class=""><div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">June 20, 2020</strong></div>
        <div class="block m-l_4:md m-t_0:md m-t_3"><div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">June 20, 2020 - December 31, 2020</strong></div>
        <div class="m-l_auto:md m-t_3 m-t_0:md">
            <div class="br-b_1 br_solid br_white-5 font_n2 m-b_2 text_right:md text_left uppercase">available credits</div>
            <div class="flex_grow uppercase text_right:md font_bold">
                <ul class="m-t_n2 ul_none">
                    <li class="inline-block lh_0 p-l_3:md">
                        <span class="bg_CME br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                    <li class="inline-block lh_0 p-l_3">
                        <span class="bg_MOCII br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc II</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_white">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area"><span class="display_none">conferences Name</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">A focus on evidence-based, practical, cardiovascular care strategies for the elite athlete to exercise enthusiast.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class=""><div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">June 20, 2020</strong></div>
        <div class="block m-l_4:md m-t_0:md m-t_3"><div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">June 20, 2020 - December 31, 2020</strong></div>
        <div class="m-l_auto:md m-t_3 m-t_0:md">
            <div class="br-b_1 br_solid br_white-5 font_n2 m-b_2 text_right:md text_left uppercase">available credits</div>
            <div class="flex_grow uppercase text_right:md font_bold">
                <ul class="m-t_n2 ul_none">
                    <li class="inline-block lh_0 p-l_3:md">
                        <span class="bg_CME br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                    <li class="inline-block lh_0 p-l_3">
                        <span class="bg_MOCII br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc II</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Code Sample

Copy Code

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

14.8.1.1 ACC/WCC 20 Conference CARD

deprecated

ACC.20/WCC Virtual

Deprecated: Old Designs from Virtual 2020

Example

ACC.20/WCC Virtual

ACC.20/WCC Virtual brings cutting-edge science and practice-changing updates directly to you. Watch videos and industry presentations, hear from experts, browse posters, download slides, and explore virtual exhibits — all On Demand and all for FREE.

live

March 28 - 30, 2020

on demand

Until June 30, 2020

available credits

cme
cne

<div id="acc20" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_black">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area"href="/ACC20"><span class="display_none">ACC.20/WCC Virtual</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">ACC.20/WCC Virtual brings cutting-edge science and practice-changing updates directly to you. Watch videos and industry presentations, hear from experts, browse posters, download slides, and explore virtual exhibits — all On Demand and all for FREE.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class="">
            <div class="br-b_1 br_solid:md br_black-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">March 28 - 30, 2020</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_black-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until June 30, 2020</strong>
        </div>
        <div class="m-l_auto:md m-t_3 m-t_0:md">
            <div class="br-b_1 br_solid br_black-5 font_n2 m-b_2 text_right:md text_left uppercase">available credits</div>
            <div class="flex_grow uppercase text_right:md font_bold">
                <ul class="m-t_n2 ul_none">
                    <li class="inline-block lh_0 p-l_3:md">
                        <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                    <li class="inline-block lh_0 p-l_3">
                        <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<style>
#acc20 {
    padding-top: 38%;
    background-color: #f4c74c;
    background-image: url(../img/virtual/lobby/ACC20/logo.sm.png), url(../img/virtual/lobby/ACC20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#acc20 {
    padding-top: calc(150px + 1.5rem);
        background-image: url(../img/virtual/lobby/ACC20/logo.lg.png), url(../img/virtual/lobby/ACC20/secondaryLogo.lg.png), url(../img/virtual/lobby/ACC20/img.lg.png), url(../img/virtual/lobby/ACC20/background.lg.png);
    background-position: 4px 16px, calc(100% - 1rem) 13px, top right, top center;
    };
}
</style>

<div id="acc20" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_black">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area"href="/ACC20"><span class="display_none">ACC.20/WCC Virtual</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">ACC.20/WCC Virtual brings cutting-edge science and practice-changing updates directly to you. Watch videos and industry presentations, hear from experts, browse posters, download slides, and explore virtual exhibits — all On Demand and all for FREE.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class="">
            <div class="br-b_1 br_solid:md br_black-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">March 28 - 30, 2020</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_black-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until June 30, 2020</strong>
        </div>
        <div class="m-l_auto:md m-t_3 m-t_0:md">
            <div class="br-b_1 br_solid br_black-5 font_n2 m-b_2 text_right:md text_left uppercase">available credits</div>
            <div class="flex_grow uppercase text_right:md font_bold">
                <ul class="m-t_n2 ul_none">
                    <li class="inline-block lh_0 p-l_3:md">
                        <span class="bg_CME br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                    <li class="inline-block lh_0 p-l_3">
                        <span class="bg_CNE br_1 br_black-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cne</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<style>
#acc20 {
    padding-top: 38%;
    background-color: #f4c74c;
    background-image: url(../img/virtual/lobby/ACC20/logo.sm.png), url(../img/virtual/lobby/ACC20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#acc20 {
    padding-top: calc(150px + 1.5rem);
        background-image: url(../img/virtual/lobby/ACC20/logo.lg.png), url(../img/virtual/lobby/ACC20/secondaryLogo.lg.png), url(../img/virtual/lobby/ACC20/img.lg.png), url(../img/virtual/lobby/ACC20/background.lg.png);
    background-position: 4px 16px, calc(100% - 1rem) 13px, top right, top center;
    };
}
</style>

Code Sample

Copy Code

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

14.8.1.2 COVID Conference CARD

deprecated

Summer COVID-19 Education Series

Deprecated: Old Designs from Virtual 2020

Example

Summer COVID-19 Education Series

Weekly episodes of targeted and easy-to-consume education to address current and evolving knowledge and practice gaps to help you manage your patients with COVID-19 and heart disease.

live

June 6, 2020

updates

Every Thursday 12:00 p.m. – 1 p.m. ET June – August

on demand

Until December 31, 2020

<div id="cvcovid" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_white">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area" href="/CVCOVID"><span class="display_none">Summer COVID-19 Education Series</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">Weekly episodes of targeted and easy-to-consume education to address current and evolving knowledge and practice gaps to help you manage your patients with COVID-19 and heart disease.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class="">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">June 6, 2020</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">updates</div> <strong class="p-l_2:md">Every Thursday 12:00 p.m. – 1 p.m. ET June – August</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until December 31, 2020</strong>
        </div>
    </div>
</div>
<style>
#cvcovid {
    padding-top: 25%;
    background-color: #722569;
     background-image: url(../img/virtual/lobby/COVID20/logo.sm.png), url(../img/virtual/lobby/COVID20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#cvcovid {
    padding-top: calc(70px + 1.5rem);
    background-image: url(../img/virtual/lobby/COVID20/logo.lg.png), url(../img/virtual/lobby/COVID20/secondaryLogo.lg.png), url(../img/virtual/lobby/COVID20/img.lg.png), url(../img/virtual/lobby/COVID20/background.lg.png);
    background-position: 21px 21px, calc(100% - 1rem) 1rem, top right, top center;
    };
}
</style>

<div id="cvcovid" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_white">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area" href="/CVCOVID"><span class="display_none">Summer COVID-19 Education Series</span></a>
    </h1>
    <p class="font_0 font_1:md font_medium lh_2 p-x_2 text-shadow_black-1">Weekly episodes of targeted and easy-to-consume education to address current and evolving knowledge and practice gaps to help you manage your patients with COVID-19 and heart disease.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class="">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">June 6, 2020</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">updates</div> <strong class="p-l_2:md">Every Thursday 12:00 p.m. – 1 p.m. ET June – August</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until December 31, 2020</strong>
        </div>
    </div>
</div>
<style>
#cvcovid {
    padding-top: 25%;
    background-color: #722569;
     background-image: url(../img/virtual/lobby/COVID20/logo.sm.png), url(../img/virtual/lobby/COVID20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#cvcovid {
    padding-top: calc(70px + 1.5rem);
    background-image: url(../img/virtual/lobby/COVID20/logo.lg.png), url(../img/virtual/lobby/COVID20/secondaryLogo.lg.png), url(../img/virtual/lobby/COVID20/img.lg.png), url(../img/virtual/lobby/COVID20/background.lg.png);
    background-position: 21px 21px, calc(100% - 1rem) 1rem, top right, top center;
    };
}
</style>

Code Sample

Copy Code

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

14.8.1.3 Athletic Heart CARD

deprecated

Care of the Athletic Heart Virtual

Deprecated: Old Designs from Virtual 2020

Example

Care of the Athletic Heart Virtual

A focus on evidence-based, practical, cardiovascular care strategies for the elite athlete to exercise enthusiast.

live

June 20, 2020

on demand

Until December 31, 2020

available credits

cme
moc ii

<div id="AH20" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_white">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area" href="/AH20"><span class="display_none">Care of the Athletic Heart Virtual</span></a>
    </h1>
    <p class="font_0 font_1:md   font_medium lh_2 p-x_2 text-shadow_black-1">A focus on evidence-based, practical, cardiovascular care strategies for the elite athlete to exercise enthusiast.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class="">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">June 20, 2020</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until December 31, 2020</strong>
        </div>
        <div class="m-l_auto:md m-t_3 m-t_0:md">
            <div class="br-b_1 br_solid br_white-5 font_n2 m-b_2 text_right:md text_left uppercase">available credits</div>
            <div class="flex_grow uppercase text_right:md font_bold">
                <ul class="m-t_n2 ul_none">
                    <li class="inline-block lh_0 p-l_3:md">
                        <span class="bg_CME br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                    <li class="inline-block lh_0 p-l_3">
                        <span class="bg_MOCII br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc ii</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<style>
#AH20 {
    padding-top: 38%;
    background-color: #002d5b;
    background-image: url(../img/virtual/lobby/AH20/logo.sm.png), url(../img/virtual/lobby/AH20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#AH20 {
    padding-top: calc(127px + 1.5rem);
    background-image: url(../img/virtual/lobby/AH20/logo.lg.png), url(../img/virtual/lobby/AH20/secondaryLogo.lg.png), url(../img/virtual/lobby/AH20/img.lg.png), url(../img/virtual/lobby/AH20/background.lg.png);
    background-position: -3px 11px, calc(100% - 1rem) 1rem, top right, top center;
    };
}
</style>

<div id="AH20" class="conference_teaser br_shade br_1 br_solid m-b_4 p-x_4 br_radius relative c_white">
    <h1 class="conference_logo font_bold font_display m_0">
        <a class="expanded-click-area" href="/AH20"><span class="display_none">Care of the Athletic Heart Virtual</span></a>
    </h1>
    <p class="font_0 font_1:md   font_medium lh_2 p-x_2 text-shadow_black-1">A focus on evidence-based, practical, cardiovascular care strategies for the elite athlete to exercise enthusiast.</p>
    <div class="absolute:md b_3 flex flex_column flex_row:md font_n1 l_4 m-b_0:md m-b_n4 p-b_0:md p-b_3 r_4">
        <div class="">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">live</div> <strong class="p-l_2:md">June 20, 2020</strong>
        </div>
        <div class="block m-l_4:md m-t_0:md m-t_3">
            <div class="br-b_1 br_solid:md br_white-5 font_n2 m-b_2:md m-b_n2 text_left uppercase">on demand</div> <strong class="p-l_2:md">Until December 31, 2020</strong>
        </div>
        <div class="m-l_auto:md m-t_3 m-t_0:md">
            <div class="br-b_1 br_solid br_white-5 font_n2 m-b_2 text_right:md text_left uppercase">available credits</div>
            <div class="flex_grow uppercase text_right:md font_bold">
                <ul class="m-t_n2 ul_none">
                    <li class="inline-block lh_0 p-l_3:md">
                        <span class="bg_CME br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> cme </li>
                    <li class="inline-block lh_0 p-l_3">
                        <span class="bg_MOCII br_1 br_white-3 br_circle br_solid inline-block m-r_1" style=" height: 1em; width: 1em;">&nbsp;</span> moc ii</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<style>
#AH20 {
    padding-top: 38%;
    background-color: #002d5b;
    background-image: url(../img/virtual/lobby/AH20/logo.sm.png), url(../img/virtual/lobby/AH20/background.sm.png);
}
@media only screen and (min-width : 768px) {
#AH20 {
    padding-top: calc(127px + 1.5rem);
    background-image: url(../img/virtual/lobby/AH20/logo.lg.png), url(../img/virtual/lobby/AH20/secondaryLogo.lg.png), url(../img/virtual/lobby/AH20/img.lg.png), url(../img/virtual/lobby/AH20/background.lg.png);
    background-position: -3px 11px, calc(100% - 1rem) 1rem, top right, top center;
    };
}
</style>

Code Sample

Copy Code

This Documentation is Moved!

Retired Designs

14.1 Umbrella Navigation

Example

14.2 Graveyard.Block

14.2.1 Graveyard.Block.LiveVideo

14.2.1.1 Live Video Horizontal

Example

14.3 Branded Header

Example

14.3.1 Branded Header Overrides

Example

14.4 Graveyard.LiveVideo

14.4.1 Graveyard.LiveVideo.Channels

14.4.1.1 Channels Banners

Example

14.5 Graveyard.PageElements

14.5.1 Twitter Tag

Example

14.6 Sessions

14.6.1 Block Designs

14.6.2 Video Block Dual Channel

Example

101 Cardiovascular Update for the Clinician III

101 Cardiovascular Update for the Clinician III

101 Cardiovascular Update for the Clinician III

14.6.3 Video Block Session

Example

101 Cardiovascular Update for the Clinician III

FORMAT:

14.6.4 Graveyard.Program.LiveVideo

14.6.4.1 Locking Graphics

Example

101 Cardiovascular Update for the Clinician III

14.6.5 Five Channel Max

Example

Planning for the Inevitable: Workforce and Patient Access Challenges

Reducing Care Variation

Maintaining the Viability of Your Nuclear Cardiology Program (Joint Society Session with ASNC)

Academic Compensation Models: From APPs to Professors

Managing Change in Graduate Medical Education

14.6.6 Video Block Presentation

Example

Cardiovascular Update for the Clinician III

FORMAT:

14.6.7 Workshops

14.6.7.1 Workshops Button

Example

14.6.7.2 Simple

Example

Cardiovascular Update for the Clinician III

14.6.8 On Demand

Example

Session I: Evolving New Frontiers of Imaging Ready for PracticeNew York Cardiovascular Symposium 2021 Welcome Video and Introduction of session and Faculty by Dr. Itchhaporia Dipti Itchhaporia, MD, FACC (Chair)

14.6.8.1 Video Block

Example

14.6.8.2 Slides Block

Example

14.6.8.3 eAbstract

Example

14.6.8.4 Journal Block

Example

14.6.8.5 Resource Package

Example

14.6.9 Simple

Example

101 Cardiovascular Update for the Clinician III Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT

Presentations

14.7 Video Block (Light)

Example

14.8 Lobby

Example

14.8.1 Conference Teaser

Example

conferences Name

14.8.1.1 ACC/WCC 20 Conference CARD

Example

ACC.20/WCC Virtual

14.8.1.2 COVID Conference CARD

Example