Source: dist/css/virtual_boot.css, line 12807
14 Retired Designs
The virtual product has evolved from its original form, and has made some designs that are no longer available or in use. This area is the graveyard for those designs.
14.2 Graveyard.Block
14.2.1 Graveyard.Block.LiveVideo
Source: dist/css/virtual_boot.css, line 13448
14.2.1.1 Deprecated: Live Video Horizontal
deprecated
Description:
Example
Default styling
101 Cardiovascular Update for the Clinician III
Electrical Disorders - Rhythm and Conduction Disorders
Pepper H. Soda III, MD, FACC - Co-Chair
- 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>Code Sample
Source: dist/css/virtual_boot.css, line 13083
14.3 Deprecated: Branded Header
deprecated
This is a templated banner that uses as the central branding of a conference product.
Example
Default styling
<div class="brand-header"></div>Code Sample
Source: dist/css/virtual_boot.css, line 13095
14.3.1 Deprecated: 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
Example
Default styling
<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
14.4 Graveyard.LiveVideo
14.4.1 Graveyard.LiveVideo.Channels
Source: dist/css/virtual_boot.css, line 13005
14.4.1.1 Deprecated: Channels Banners
deprecated
Description: Conferences have added branding on the on demand area with category or channels banners.
Example s
generic
Channel Branding
track1
Channel Branding
track2
Channel Branding
track3
Channel Branding
<div class="categoryBanner [modifier]_banner m-t_3 m-b_4"></div>Code Sample
14.5 Graveyard.PageElements
Source: dist/css/virtual_boot.css, line 13070
14.5.1 Deprecated: Twitter Tag
deprecated
Description: Every conference has a common #tag structure asking user to join in to the conversation.;
Example
Default styling
<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-x-twitter"></em></div></div>Code Sample
Source: dist/css/virtual_boot.css, line 13822
14.6 Sessions
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 13957
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.
14.6.2 Graveyard.Program.LiveVideo
Source: dist/css/virtual_boot.css, line 13494
14.6.2.1 Locking Graphics
Showing assets before they are intractable is needed
Example
Default styling
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>Code Sample
Source: dist/css/virtual_boot.css, line 13509
14.6.3 Workshops
Description: A collection of Workshops that are available for the user to select from.
Source: dist/css/virtual_boot.css, line 13579
14.6.3.1 Workshops Button
Description: Workshops are interactive buttons that open a webex page and have the call to action "Join Now".
Example
Default styling
<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
Source: dist/css/virtual_boot.css, line 13518
14.6.3.2 Simple
Description: Simple Design for Workshops.
Example
Default styling
- Navigating Health Care Economics
- Category Tag
Cardiovascular Update for the Clinician III
- 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;"> </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;"> </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;"> </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;"> </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;"> </span> ecme
</li>
</ul>
</div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 13901
14.6.4 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
Default styling
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)
- 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;"> </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;"> </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;"> </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;"> </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;"> </span> ecme
</li>
</ul>
</div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 13596
14.6.4.1 Video Block
Description: These video blocks are used in combination with grid templates and dividers.
Example
Default styling
<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;"> </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;"> </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;"> </span> cop </li>
</ul>
</div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 13648
14.6.4.2 Slides Block
Description: These slide blocks are used in combination with grid templates and dividers.
Example
Default styling
<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
Source: dist/css/virtual_boot.css, line 13692
14.6.4.3 eAbstract
eAbstracts are used in combination with grid templates and dividers.
Example
Default styling
<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
Source: dist/css/virtual_boot.css, line 13739
14.6.4.4 Journal Block
Description: These slide blocks are used in combination with grid templates and dividers.
Example
Default styling
<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
Source: dist/css/virtual_boot.css, line 13780
14.6.4.5 Resource Package
Description: These slide blocks are used in combination with grid templates and dividers.
Example
Default styling
<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
Source: dist/css/virtual_boot.css, line 13833
14.6.5 Simple
Description: When the count of sessions is lower then 10 in count, the Simple Design is recommended.
Example
Default styling
- 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
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
- 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;"> </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;"> </span> cop
</li>
</ul>
</div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 12840
14.6.6 Deprecated: Video Block Session
deprecated
Description: These video blocks are used in combination with grid templates and dividers.
Example
Default styling
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>Code Sample
Source: dist/css/virtual_boot.css, line 12873
14.6.7 Deprecated: Video Block Presentation
deprecated
Description: These video blocks are used in combination with grid templates and dividers.
Example
Default styling
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>Code Sample
Source: dist/css/virtual_boot.css, line 12817
14.6.8 Deprecated: Video Block Dual Channel
deprecated
Description: These video blocks are used in combination with grid templates and dividers.
Example
Default styling
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 columns_1 columns_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 columns_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
Source: dist/css/virtual_boot.css, line 12909
14.6.9 Deprecated: 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.
Example
Default styling
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 columns_1 columns_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
Source: dist/css/virtual_boot.css, line 13023
14.7 Deprecated: Video Block (Light)
deprecated
Description: These video blocks are used in combination with grid templates and dividers.
Example s
generic_video
the default Channel for videos.
- CME
- CNE
- COP
- MOCII
generic_video-nolabel
the default Channel for videos with no label.
- CME
- CNE
- COP
- MOCII
track1_video
track 1 videos will have these decorations.
- CME
- CNE
- COP
- MOCII
track2_video
track 2 videos will have these decorations.
- CME
- CNE
- COP
- MOCII
track3_video
track 3 videos will have these decorations.
- 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 [modifier]">
<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
Source: dist/css/virtual_boot.css, line 13159
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
Default styling
<div class="lobby-header"></div>Code Sample
Source: dist/css/virtual_boot.css, line 13174
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
Default styling
<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;"> </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;"> </span> moc II</li>
</ul>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 13210
14.8.1.1 ACC/WCC 20 Conference CARD
deprecated
ACC.20/WCC Virtual
Deprecated: Old Designs from Virtual 2020
Example
Default styling
<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;"> </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;"> </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
Source: dist/css/virtual_boot.css, line 13264
14.8.1.2 COVID Conference CARD
deprecated
Summer COVID-19 Education Series
Deprecated: Old Designs from Virtual 2020
Example
Default styling
<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
Source: dist/css/virtual_boot.css, line 13310
14.8.1.3 Athletic Heart CARD
deprecated
Care of the Athletic Heart Virtual
Deprecated: Old Designs from Virtual 2020
Example
Default styling
<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;"> </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;"> </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>