Source: dist/css/virtual_boot.css, line 10806
9 Program
The central UI of an event is the program which displays all educational content from the conference.
Source: dist/css/virtual_boot.css, line 11627
9.1 Agenda Grid
The agenda grid is a day layout for the agenda view.
Source: dist/css/virtual_boot.css, line 11721
9.1.1 Day Grid with Channels.
There is need to override the default css variables of this design if you are going to shift away from the default. The units of time are set to increments of 5 minutes.
Example
Default styling
Full Program
9:00
- Navigating Health Care Economics
- CME
- CNE
- COP
- MOCII
10:00
- Navigating Health Care Economics
- CME
- CNE
- COP
- MOCII
- Industry Theater
Nonaccredited | Industry Session
11:00
12:00
- Navigating Health Care Economics
- CME
- CNE
- COP
- MOCII
13:00
- Navigating Health Care Economics
- CME
- CNE
- COP
- MOCII
14:00
15:00
16:00
17:00
FORMAT:
In the real design the hours should be in the format of "3 p.m" and not military time of "15:00"NOTE:
Limitation of this design because of the pattern library. The Hours could be formatted differently to reflect the AM and PM. But this build needs to be done in military time because of lack of dynamic labels for the hours.<h2 class="c_primary font_display">Full Program</h2>
<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light m-b_5">
<ul class="flex_column flex_row:md nav">
<li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink" role="tab" aria-controls="BasicLink" aria-selected="true"
class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">List with Search</a>
</li>
<li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
<a
id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink" role="tab" aria-controls="ActiveLink" aria-selected="true"
class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
href="#">Schedule View</a>
</li>
</ul>
</nav>
<section id="day" class="grid:md flex flex_column gap-y_3 gap-y_0:md relative font_0:lg font_n1 font_n2:md isolation_isolate m-y_4">
<header class="day_grid grid:md sticky t_0 bg_white display_none z_3 br-b_1 br_primary br_solid" style="grid-column:1/-1; grid-row:channelName/channelName ">
<span class="channel-start_1 channel-end_1 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 1</span>
<span class="channel-start_2 channel-end_2 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 2</span>
<span class="channel-start_3 channel-end_3 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 3</span>
<span class="channel-start_4 channel-end_4 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 4</span>
</header>
<div class="channel channel_1 bg_black-2 display_none block:md channel-start_1 channel-end_1" ></div>
<div class="channel channel_2 bg_black-_05 display_none block:md channel-start_2 channel-end_2" ></div>
<div class="channel channel_3 bg_black-2 display_none block:md channel-start_3 channel-end_3" ></div>
<div class="channel channel_4 bg_black-05 display_none block:md channel-start_4 channel-end_4" ></div>
<div class="hour hour_9 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">9:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_9-00 time-end_10-00 channel-start_3 channel-end_4">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0"></div>
<div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
</ul>
</div>
<div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
<header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
<a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
</header>
<aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class=" uppercase flex flex_wrap font-size_down-2 justify_start">
<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 class="hour hour_10 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">10:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_10-00 time-end_11-40 channel-start_1 channel-end_1">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0"></div>
<div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
</ul>
</div>
<div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
<header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
<a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
</header>
<aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class=" uppercase flex flex_wrap font-size_down-2 justify_start">
<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="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_10-00 time-end_11-40 channel-start_2 channel-end_3">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_secondary-n2 br_solid flex flex_column font_ui m-b_0 m-b_n2 m-x_n1 opacity_none p_0"></div>
<div class="font-size_down-2 p_2 uppercase bg_secondary-n2 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>Industry Theater</li>
</ul>
</div>
<div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4 br-b_1 br_solid br_secondary-n2">
<header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
<a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
</header>
<aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black flex flex_wrap font-size_down-2 justify_start lh_0 m-b_n1 p_3">
<div class="flex_grow uppercase m-l_auto c_secondary-n2" "="">
<strong class="font_xbold uppercase"><i class="fas fa-info-circle"></i> Nonaccredited | Industry Session</strong> </div>
</div>
</article> <div class="hour hour_11 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">11:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <div class="hour hour_12 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">12:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_12-00 time-end_13-00 channel-start_1 channel-end_3">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0"></div>
<div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
</ul>
</div>
<div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
<header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
<a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
</header>
<aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class=" uppercase flex flex_wrap font-size_down-2 justify_start">
<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 class="hour hour_13 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">13:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_13-30 time-end_15-10 channel-start_3 channel-end_4">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0"></div>
<div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
</ul>
</div>
<div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
<header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
<a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
</header>
<aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class=" uppercase flex flex_wrap font-size_down-2 justify_start">
<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 class="hour hour_14 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">14:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <div class="hour hour_15 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">15:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <div class="hour hour_16 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">16:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div> <div class="hour hour_17 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">17:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div></section>Code Sample
Source: dist/css/virtual_boot.css, line 11781
9.1.2 Hour Line
description
Example
Default styling
:00
<div class="hour hour_ br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
<span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">:00</span>
<div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
<span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
</div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 11673
9.1.3 Grid Session
The day grid sessions are light on information because the limitations of the layout.
Example
Default styling
- Navigating Health Care Economics
- CME
- CNE
- COP
- MOCII
<article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden ">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0"></div>
<div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
</ul>
</div>
<div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
<header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
<a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
</header>
<aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class=" uppercase flex flex_wrap font-size_down-2 justify_start">
<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 11639
9.1.3.1 Non-Accredited Session
Based on the Session the Non-accredited session is styled to represent that it does not have an accreditation.
Example
Default styling
- Industry Theater
Nonaccredited | Industry Session
<article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden ">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_secondary-n2 br_solid flex flex_column font_ui m-b_0 m-b_n2 m-x_n1 opacity_none p_0"></div>
<div class="font-size_down-2 p_2 uppercase bg_secondary-n2 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>Industry Theater</li>
</ul>
</div>
<div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4 br-b_1 br_solid br_secondary-n2">
<header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
<a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
</header>
<aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black flex flex_wrap font-size_down-2 justify_start lh_0 m-b_n1 p_3">
<div class="flex_grow uppercase m-l_auto c_secondary-n2" "="">
<strong class="font_xbold uppercase"><i class="fas fa-info-circle"></i> Nonaccredited | Industry Session</strong> </div>
</div>
</article>Code Sample
9.2 Program.GridFormat
Source: dist/css/virtual_boot.css, line 11169
9.2.1 Abstracts
Abstracts are a presentation of a static slide deck, or pdf with a possible attached video. These cards link to an abstract player page.
Sub.Award.Flags - Award Flags
Sub.Header.AbstractThumbnail - Image Thumbnail
Sub.FacultyList.NoLocation - Faculty List w/o Location
Sub.Credits.Dots - Credit Dots
Sub.ActionButtons - Action Buttons
Sub Components in Design:
Data.Abstract.Title - Title
Data Elements:
Example
Default styling
Abstract on Cardiovascular Update for the Clinician Success H2
- Role Type 1:
- Pepper H. Soda III, MD, FACC
- Role Type 2:
- Dianna Denesik III
- Miguel Romaguera
- Jeanette Franecki
- CME
- CNE
- COP
- MOCII
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light relative">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<div class="absolute r_3 r_4:md r_5:lg t_n2 font_5:md font_3 m-t_n2 z_2">
<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
<i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
<span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6 fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
</div> </div>
<header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
<div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat bg_acc br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
<i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
</div>
</header> <div class="p_4 p-b_2 flex flex_column gap-y_4 flex_auto">
<header>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_1:lg font_0 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1"> Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub> </span>
</h3>
</header>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md m-t_auto w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto w_70">View</a>
</nav>
</aside>
<div class="p-b_4:lg p-b_3 font_n1"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC</li>
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 2:</li>
<li>Dianna Denesik III</li>
<li>Miguel Romaguera</li>
<li>Jeanette Franecki</li>
</ul></div>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch flex_none">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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 11219
9.2.1.1 Abstracts Grid
Abstracts are presented in a grid view.
Example
Default styling
Abstract on Cardiovascular Update for the Clinician Success H2
- Role Type 1:
- Pepper H. Soda III, MD, FACC
- Role Type 2:
- Dianna Denesik III
- Miguel Romaguera
- Jeanette Franecki
- CME
- CNE
- COP
- MOCII
Abstract on Cardiovascular Update for the Clinician Success H2 Pericardial
- Role Type 1:
- Pepper H. Soda III, MD, FACC
- Role Type 2:
- Dianna Denesik III
- Miguel Romaguera
- Jeanette Franecki
- CME
- CNE
- COP
- MOCII
Abstract on Cardiovascular Update for the Clinician Success H2 Valvular Heart Disease Pericardial Chest Pain Electrocardiogram
- Role Type 1:
- Pepper H. Soda III, MD, FACC
- Role Type 2:
- Dianna Denesik III
- Miguel Romaguera
- Jeanette Franecki
- CME
- CNE
- COP
- MOCII
NOTE:
A grid-item at its smallest is 300px wide the grid column size needs to be set depending on the width the parent container.<section class="grid columns_3:lg columns_2:md columns_1 grid gap_4 gap_5:lg">
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light relative">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<div class="absolute r_3 r_4:md r_5:lg t_n2 font_5:md font_3 m-t_n2 z_2">
<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
<i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
<span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6 fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
</div> </div>
<header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
<div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat bg_acc br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
<i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
</div>
</header> <div class="p_4 p-b_2 flex flex_column gap-y_4 flex_auto">
<header>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_1:lg font_0 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1"> Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub> </span>
</h3>
</header>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md m-t_auto w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto w_70">View</a>
</nav>
</aside>
<div class="p-b_4:lg p-b_3 font_n1"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC</li>
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 2:</li>
<li>Dianna Denesik III</li>
<li>Miguel Romaguera</li>
<li>Jeanette Franecki</li>
</ul></div>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch flex_none">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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> <!-- DUPLICATE -->
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light relative">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<div class="absolute r_3 r_4:md r_5:lg t_n2 font_5:md font_3 m-t_n2 z_2">
<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
<i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
<span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6 fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
</div> </div>
<header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
<div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat bg_acc br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
<i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
</div>
</header> <div class="p_4 p-b_2 flex flex_column gap-y_4 flex_auto">
<header>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_1:lg font_0 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1"> Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub> Pericardial </span>
</h3>
</header>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md m-t_auto w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto w_70">View</a>
</nav>
</aside>
<div class="p-b_4:lg p-b_3 font_n1"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC</li>
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 2:</li>
<li>Dianna Denesik III</li>
<li>Miguel Romaguera</li>
<li>Jeanette Franecki</li>
</ul></div>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch flex_none">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light relative">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<div class="absolute r_3 r_4:md r_5:lg t_n2 font_5:md font_3 m-t_n2 z_2">
<div class="inline-block isolation_isolate m-x_3 p-t_2 relative">
<i class="c_accent-n2 fa-bookmark fas font-size_up-2 font_10 relative text-shadow_black-1 z_1"></i>
<span class="absolute b_0 flex font-size_down-2 font_bold items_center justify_center l_0 r_0 t_0 z_2"><i class="c_white-6 fa-star fas font-size_down-2 text-shadow_white-n1"></i></span>
</div> </div>
<header class="flex flex_none flex_row justify_center font_0 m-t_4 m-x_4">
<div class="aspect_8x10:md aspect_1x1 bg-blend_multiply bg_primary bg_cover bg_no-repeat bg_acc br_2 br_radius br_solid br_white br_white-9 flex flex_shrink grid justify_center max-w_10 max-w_15:md relative shadow_bevel-bold text_center texture_ondemand thumb bg_center">
<i class="font-size_up-2 absolute c_white-6 fa-file-chart-pie fas flex_auto self_center text_center w_100"></i>
</div>
</header> <div class="p_4 p-b_2 flex flex_column gap-y_4 flex_auto">
<header>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_1:lg font_0 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1"> Abstract on Cardiovascular Update for the Clinician Success H<sub>2</sub> Valvular Heart Disease Pericardial Chest Pain Electrocardiogram </span>
</h3>
</header>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md m-t_auto w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto w_70">View</a>
</nav>
</aside>
<div class="p-b_4:lg p-b_3 font_n1"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC</li>
<li class="no-after font_medium c_primary-n1 block w_100 font-size_down">Role Type 2:</li>
<li>Dianna Denesik III</li>
<li>Miguel Romaguera</li>
<li>Jeanette Franecki</li>
</ul></div>
</div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch flex_none">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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 11241
9.2.2 Featured Presentation
Featured Sessions are On Demand Presentations.
Sub.CategoryFlags - Category Flags
Sub.ActionButtons.OnDemand - Action Buttons
Sub.SessionAndPresentation - Session & Faculty List
Sub.Credits.Dots - Credit Dots
Sub Components in Design:
Data.Session.ID - Session ID (optional)
Data.Session.Title - Session Title (optional)
Data.Presentation.ID - Presentation ID (optional)
Data.Presentation.Title - Presentation Title
Data Elements:
Example
Default styling
- Navigating Health Care Economics
- Category Tag
3652-15612 Cardiovascular Update for the Clinician III
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<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="flex flex_auto flex_column gap-y_4 p-b_2 p_4">
<header>
<h2 class="uppercase c_black-7 font-size_down">
<strong class="font_bold p-r_2 block">3652-15612</strong> Cardiovascular Update for the Clinician III
</h2>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-2 lh_1">
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
</h3>
</header>
<div class="font_n1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 ">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside> </div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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 11293
9.2.2.1 Featured Presentation Grid
Featured Session Grids should respond to the size of the parent container.
Example
Default styling
Featured Presentations
Featured Presentations
- Navigating Health Care Economics
- Category Tag
3652-15612 Cardiovascular Update for the Clinician III
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
- Navigating Health Care Economics
- Category Tag
3652-15612 Cardiovascular Update for the Clinician III
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Cardiovascular Arrhythmia Clinical Myocardial Electrocardiogram Valvular Heart Disease Electrocardiogram
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
- Navigating Health Care Economics
- Category Tag
3652-15612 Cardiovascular Update for the Clinician III
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Myocardial
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
NOTE:
A grid-item at its smallest is 300px wide the grid column size needs to be set depending on the width the parent container.<section class="">
<h2 class="font_bold font_display c_primary-n1"><div class="flex_row:md flex flex_column">
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
<div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
Featured Presentations
</div>
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
</div></h2>
<div class="p_4:lg p_3 columns_3:lg columns_2:md columns_1 grid gap-x_5 gap-y_5 ">
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<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="flex flex_auto flex_column gap-y_4 p-b_2 p_4">
<header>
<h2 class="uppercase c_black-7 font-size_down">
<strong class="font_bold p-r_2 block">3652-15612</strong> Cardiovascular Update for the Clinician III
</h2>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-2 lh_1">
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
</h3>
</header>
<div class="font_n1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 ">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside> </div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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><!-- DUPLICATE -->
<article class="br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<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 Cardiovascular Arrhythmia Clinical Myocardial Electrocardiogram Valvular Heart Disease Electrocardiogram ">
<ul class="ul_inline-pipe">
<li>Navigating Health Care Economics</li>
<li>Category Tag</li>
</ul>
</div> <div class="flex flex_auto flex_column gap-y_4 p-b_2 p_4">
<header>
<h2 class="uppercase c_black-7 font-size_down">
<strong class="font_bold p-r_2 block">3652-15612</strong> Cardiovascular Update for the Clinician III
</h2>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-2 lh_1">
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Cardiovascular Arrhythmia Clinical Myocardial Electrocardiogram Valvular Heart Disease Electrocardiogram
</h3>
</header>
<div class="font_n1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 Cardiovascular Arrhythmia Clinical Myocardial Electrocardiogram Valvular Heart Disease Electrocardiogram ">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 Cardiovascular Arrhythmia Clinical Myocardial Electrocardiogram Valvular Heart Disease Electrocardiogram ">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 Cardiovascular Arrhythmia Clinical Myocardial Electrocardiogram Valvular Heart Disease Electrocardiogram ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 Cardiovascular Arrhythmia Clinical Myocardial Electrocardiogram Valvular Heart Disease Electrocardiogram ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside> </div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light">
<div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_primary-2 br_solid flex flex_column font_ui m-b_n2 m-x_n1 m-t_n1 m-b_0 opacity_none p_0 relative"></div>
<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 Myocardial ">
<ul class="ul_inline-pipe">
<li>Navigating Health Care Economics</li>
<li>Category Tag</li>
</ul>
</div> <div class="flex flex_auto flex_column gap-y_4 p-b_2 p_4">
<header>
<h2 class="uppercase c_black-7 font-size_down">
<strong class="font_bold p-r_2 block">3652-15612</strong> Cardiovascular Update for the Clinician III
</h2>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-2 lh_1">
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty Myocardial
</h3>
</header>
<div class="font_n1">
<ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 Myocardial ">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 Myocardial ">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 Myocardial ">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 Myocardial ">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul> </div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside> </div>
<div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black m-b_n1 m-x_n1 p_3 relative self_stretch">
<div class="absolute br-t_1 br_primary-2 br_solid l_0 m_0 opacity_none p_0 r_0 t_0 z_2"></div>
<div class=" uppercase flex flex_wrap font_n3 justify_start"><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><!-- End DUPLICATE -->
</div>
</section>Code Sample
Source: dist/css/virtual_boot.css, line 11486
9.2.3 Whats Happening Next
During the day there will be gaps that will not have a video or session playing so we want to broadcast the information of what will be playing soon.
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Sub Components in Design:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
Data Elements:
Example
Default styling
3652 Cardiovascular Update for the Clinician III
Starting @ 11:15 a.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
NOTE:
the Date in the Starting message is conditional. If the session starts on a day that isn't today then the date will be displayed.<article class="relative isolation_isolate flex flex_column">
<div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
<header>
<h3 class="font_display lh_2 c_secondary-n2 font_0 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_secondary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Starting @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 11595
9.2.3.1 Whats Happening Next - Grid
At times before the end of the conference but if there is no scheduled session.
Example
Default styling
End of Current Scheduled Program
End of Current Scheduled Program
The Current Program has ended
But the event is not over yet and there could possibly be more.
Check back soon for more information or view pass sessions from the On Demand Page.
<section class="">
<h2 class="font_bold font_display c_primary-n1 m-b_4"><div class="flex_row:md flex flex_column">
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
<div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
End of Current Scheduled Program
</div>
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
</div></h2>
<div class="columns_1">
<article class="relative isolation_isolate flex flex_column">
<div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
<header class="reading-typography font-size_up text_center">
<h3 class="c_secondary-n2">
The Current Program has ended
</h3>
<p> But the event is not over yet and there could possibly be more.<br> Check back soon for more information or view pass sessions from the <a class="link" href='ondemand'>On Demand Page</a>.</p>
</header>
</div>
</article>
</div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100">
<strong class="text_center c_accent">This Event ends on Saturday, Nov. 20, 2021 @ 8:00 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></strong>
</aside>
</section>Code Sample
Source: dist/css/virtual_boot.css, line 11573
9.2.3.2 Whats Happening Next - Grid
At times between breaks of sessions the whats happening next will be a grid will show a whats happening next grid because there are no sessions playing.
Example
Default styling
Coming Soon
Coming Soon
3652 Cardiovascular Update for the Clinician III Arrhythmia Cardiovascular Blood Vessel Electrocardiogram Electrocardiogram
Starting @ 11:15 a.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
3652 Cardiovascular Update for the Clinician III Chest Pain Valvular Heart Disease Pharmacologic Cardiovascular Electrocardiographic
Starting @ 11:15 a.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
3652 Cardiovascular Update for the Clinician III Clinical Valvular Heart Disease
Starting @ 11:15 a.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
Industry Session | Nonaccredited
<section class="">
<h2 class="font_bold font_display c_primary-n1 m-b_4"><div class="flex_row:md flex flex_column">
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
<div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
Coming Soon
</div>
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
</div></h2>
<div class="gap_5 grid columns_3:lg columns_2:md columns_1">
<article class="relative isolation_isolate flex flex_column">
<div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
<header>
<h3 class="font_display lh_2 c_secondary-n2 font_0 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_secondary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III Arrhythmia Cardiovascular Blood Vessel Electrocardiogram Electrocardiogram
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Starting @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
</div>
</article> <article class="relative isolation_isolate flex flex_column">
<div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
<header>
<h3 class="font_display lh_2 c_secondary-n2 font_0 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_secondary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III Chest Pain Valvular Heart Disease Pharmacologic Cardiovascular Electrocardiographic
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Starting @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
</div>
</article> <article class="relative isolation_isolate flex flex_column">
<div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
<header>
<h3 class="font_display lh_2 c_secondary-n2 font_0 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_secondary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III Clinical Valvular Heart Disease
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Starting @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<div class="c_secondary-n1 m-t_auto font-size_down-2"> <strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong></div>
</div>
</article> </div>
</section>Code Sample
Source: dist/css/virtual_boot.css, line 11529
9.2.3.3 Whats Happening Next - Non Accredited
During the day there will be gaps that will not have a video or session playing so we want to broadcast the information of what will be playing soon.
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Sub.Credits.NonAccredited - Non Accredited Tag
Sub Components in Design:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
Data Elements:
Example
Default styling
3652 Cardiovascular Update for the Clinician III
Starting @ 11:15 a.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
Industry Session | Nonaccredited
NOTE:
the Date in the Starting message is conditional. If the session starts on a day that isn't today then the date will be displayed.<article class="relative isolation_isolate flex flex_column">
<div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
<header>
<h3 class="font_display lh_2 c_secondary-n2 font_0 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_secondary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Starting @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<div class="c_secondary-n1 m-t_auto font-size_down-2"> <strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong></div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 11319
9.2.4 Whats Happening Now
Condensed Sessions are used for listing designs that are not full featured.
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Sub Components in Design:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
Data Elements:
Example
Default styling
3652 Cardiovascular Update for the Clinician III
Ending @ 12:15 p.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
<article class="relative isolation_isolate flex flex_column">
<div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
<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> </div>
<div class="br-t_3 br_primary-2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
<div class="p_2"> </div>
<header class="p-t_3">
<h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Ending @ 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
</aside>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 11464
9.2.4.1 Whats Happening Now Grid
A zone on the page that displays the current live session.
Example
Default styling
Playing Now
Playing Now
3652 Cardiovascular Update for the Clinician III
Ending @ 12:15 p.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
3652 Cardiovascular Update for the Clinician III Blood Vessel Clinical Valvular Heart Disease Cardiovascular Pharmacologic Arrhythmia
Ending @ 12:15 p.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
3652 Cardiovascular Update for the Clinician III Side Effect Pharmacologic Clinical Pericardial Valvular Cardiovascular Clinical Electrocardiogram
Ending @ 12:15 p.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
<section class="">
<h2 class="font_bold font_display c_primary-n1 m-b_4"><div class="flex_row:md flex flex_column">
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
<div class="flex_auto flex_shrink p-x_4 lh_1 text_center">
Playing Now
</div>
<div class="flex_auto grid">
<span class="br-tl_radius br-t_2 br_solid br_inherit self_center"></span>
</div>
</div></h2>
<div class="gap_5 grid columns_3:lg columns_2:md columns_1">
<article class="relative isolation_isolate flex flex_column">
<div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
<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> </div>
<div class="br-t_3 br_primary-2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
<div class="p_2"> </div>
<header class="p-t_3">
<h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Ending @ 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
</aside>
</div>
</article> <article class="relative isolation_isolate flex flex_column">
<div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
<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 Blood Vessel Clinical Valvular Heart Disease Cardiovascular Pharmacologic Arrhythmia 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> </div>
<div class="br-t_3 br_primary-2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
<div class="p_2"> </div>
<header class="p-t_3">
<h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III Blood Vessel Clinical Valvular Heart Disease Cardiovascular Pharmacologic Arrhythmia
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Ending @ 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
</aside>
</div>
</article> <article class="relative isolation_isolate flex flex_column">
<div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
<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 Side Effect Pharmacologic Clinical Pericardial Valvular Cardiovascular Clinical Electrocardiogram 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> </div>
<div class="br-t_3 br_primary-2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
<div class="p_2"> </div>
<header class="p-t_3">
<h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III Side Effect Pharmacologic Clinical Pericardial Valvular Cardiovascular Clinical Electrocardiogram
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Ending @ 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
</aside>
</div>
</article> </div>
</section>Code Sample
Source: dist/css/virtual_boot.css, line 11416
9.2.4.2 Whats Now Item - Horizontal
Whats happening now items are used for listing designs that are not full featured. When there is only one on a full width page you can use this horizontal design.
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Sub Components in Design:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
Data Elements:
Example
Default styling
3652 Cardiovascular Update for the Clinician III
Ending @ 12:15 p.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white">
<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 relative flex flex_row:md flex_colum">
<div class="flex_auto w_100 max-w_20 p_4 gap-x_5:lg gap-x_4:md self_center">
<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> </div>
<div class="p_4 flex_auto self_center flex flex_column gap-y_3:md gap-y_2:md">
<header class="p-t_3">
<h3 class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
<strong class="font_bold p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="block font_display lh_2 font-size_up-1">
Cardiovascular Update for the Clinician III </span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Ending @ 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100">
<a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
</aside>
</div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 11366
9.2.4.3 Whats Happening Now NON-Accredited
Condensed Sessions are used for listing designs that are not full featured.
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Sub Components in Design:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.EndTime - Session End Time
Data Elements:
Example
Default styling
3652 Cardiovascular Update for the Clinician III
Ending @ 12:15 p.m. EDT
Category:
- Channel 1
- Navigating Health Care Economics
<article class="relative isolation_isolate flex flex_column">
<div class="b_n5 m-b_n5 p-x_4:md p-x_5:lg relative z_1">
<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> </div>
<div class="br-t_3 br_secondary-n2 br_radius br_solid c_black flex flex_column font_0 m-b_4 p-t_5 p_4 shadow_overlap-light t_n5 z_0 flex_column flex gap_3 bg_white flex_auto">
<div class="p_2"> </div>
<header class="p-t_3">
<h3 class="font_display lh_2 c_primary-n2 font_1 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
<span class="font_display lh_2 c_primary-n2 m_0 font-size_up-2">
Cardiovascular Update for the Clinician III
</span>
</h3>
</header>
<div class="font_n1 font_ui c_accent-n1">Ending @ 12:15 p.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
<div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
<li>Channel 1</li>
<li>Navigating Health Care Economics</li>
</ul></div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100 m-t_auto">
<div class="bg_secondary-n2 br_radius c_white p_3 p-y_2 font-size_down-1">
<strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong> </div>
<a href="#" aria-label="navigate to" class="btn btn-outline-primary btn-sm flex_auto expanded-click-area">Watch</a>
</aside>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 10819
9.3 Session
The basic session is Session with a title that has a playlist of presentations
Sub.Presentation.List - Presentation List
Sub.ActionButtons.NoDetails - Action Buttons
Sub.ActionButtons.Favorite.Small - Favorite Button
Sub.PlayingDateTime - Playing Date Time
Sub.CategoryFlags - Category Flags
Sub Components in Design:
Data.Session.ID - Session ID
Data.Session.Title - Session title
Data Elements:
Example
Default styling
- Navigating Health Care Economics
- Category Tag
3652 Cardiovascular Update for the Clinician III
Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
Presentations
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Introduction 1 min
- Presentation 25 min
- Panel Discussion 5 min
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white">
<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 gap-x_4 gap-x_5:lg">
<header>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_2 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1">
<strong class="font_bold p-r_3">3652</strong>
Cardiovascular Update for the Clinician III </span>
</h3>
<div class="font_0 font_ui"><span class="c_accent-n2">Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span></div>
<div class="font_n1 font_ui"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 ">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></div>
</header>
<div class="flex_grow m-x_auto m-l_auto:lg m-r_0:lg w_100 max-w_20:md">
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="download calendar reminder" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<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>
<h4 class="font-size_up p-x_3 c_primary-n2 font_medium">Presentations</h4>
<ul class="ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3">
<li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
<div class="br-b_2 br_black-2 br_solid m-b_n3 m-t_3 m-x_n4">
<button class="bg_black-2 bg_transparent br-bl_square br-br_square br_0 br_br_square c_primary-n2 h:c_primary-n4 font-size_down-1 link m-x_4 p-x_4 p-y_3 lh_1" type="button" data-toggle="collapse" data-target="#extendPresentationData" aria-expanded="true" aria-controls="extendPresentationData" data-bs-toggle="collapse">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i> Presentation Details </button>
<div class="collapse show" id="extendPresentationData" style="">
<div class="bg_black-2 br_none br_square card card-body">
<ul class="ul_none flex flex_column items_stretch">
<li class="br-b_1 br_solid br_black-3"> Introduction <span class="c_primary font_bold float_right">1 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Presentation <span class="c_primary font_bold float_right">25 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Panel Discussion <span class="c_primary font_bold float_right">5 min</span>
</li>
</ul>
</div>
</div>
</div>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li></ul> </div>
</div>
<div class="c_black flex flex_wrap font_n3 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_grow uppercase 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 10875
9.3.1 Session Collapse
The basic session is Session with a title that has a playlist of presentations
Example
Default styling
- Navigating Health Care Economics
- Category Tag
3652 Cardiovascular Update for the Clinician III
Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- 30 minutes
- 4 presentations
Presentations
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Introduction 1 min
- Presentation 25 min
- Panel Discussion 5 min
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
-
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white" id="session_7226">
<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 gap-x_4 gap-x_5:lg">
<header>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_2 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1">
<strong class="font_bold p-r_3">3652</strong>
Cardiovascular Update for the Clinician III </span>
</h3>
<div class="font_0 font_ui"><span class="c_accent-n2">Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span></div>
<div class="font_n1 font_ui"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 ">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 ">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></div>
</header>
<div class="flex_grow m-x_auto m-l_auto:lg m-r_0:lg w_100 max-w_20:md">
<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">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
<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>
<div class="p-x_4 p-b_4 flex flex_column font_copy font_0">
<ul class="font-size_down ul_none flex flex_row flex_wrap justify_start c_black-7 m-t_auto lh_0 items_end">
<li class="inline-block p-r_3 p_2"><span class="font-size_up c_primary-n2 block"><i class="fal fa-clock"></i> 30</span> minutes</li>
<li class="inline-block p-r_3 p_2"><span class="font-size_up c_primary-n2 z_2 block">4</span> presentations</li>
</ul>
</div>
<div id="collapseExample" class="collapse">
<h4 class="font-size_up p-x_3 c_primary-n2 font_medium">Presentations</h4>
<ul class="ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3">
<li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
<div class="br-b_2 br_black-2 br_solid m-b_n3 m-t_3 m-x_n4">
<button class="bg_black-2 bg_transparent br-bl_square br-br_square br_0 br_br_square c_primary-n2 h:c_primary-n4 font-size_down-1 link m-x_4 p-x_4 p-y_3 lh_1" type="button" data-toggle="collapse" data-target="#extendPresentationData" aria-expanded="true" aria-controls="extendPresentationData" data-bs-toggle="collapse">
<i class="a:rotation fa-fw fa-times fas self_center text_center"></i> Presentation Details </button>
<div class="collapse show" id="extendPresentationData" style="">
<div class="bg_black-2 br_none br_square card card-body">
<ul class="ul_none flex flex_column items_stretch">
<li class="br-b_1 br_solid br_black-3"> Introduction <span class="c_primary font_bold float_right">1 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Presentation <span class="c_primary font_bold float_right">25 min</span>
</li>
<li class="br-b_1 br_solid br_black-3"> Panel Discussion <span class="c_primary font_bold float_right">5 min</span>
</li>
</ul>
</div>
</div>
</div>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li> <li class="br-t_1 br_black-3 br_solid p-x_4 p-y_3 m_0 lh_2 bg_white relative font_ui">
<div class="float_right inline p_3 m-r_n3 m-t_n3"><a href="#" aria-label="mark as favorite" class="btn btn-secondary btn-sm flex_none a:bg_alert-n2 h:bg_alert-n4 font-size_down-2" ><i class="fas fa-heart"></i></a></div>
<span data-title="title" class="font-size_up-1 inline font_display lh_2">New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</span>
<span class="font-size-down "><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 block w_100 block w_100 font-size_down-1">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></span>
<span class="font-size-down-1 c_accent-n1 font_italic block">11:45 – 11:49 a.m. <abbr title="EASTERN DAYLIGHT TIME, UTC -4">ET</abbr></span>
</li></ul> </div>
</div>
</div>
<div class="c_black flex flex_wrap font_n3 justify_start p_3 br-br_radius br-bl_radius bg_black-2 br_solid br_1 br-t_0 br_black-3 relative">
<div class="flex_grow uppercase 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><a class="absolute bg_primary br-bl_radius br-br_radius c_white p-x_3 p_2 r_3 t_0" href="#session_7226">top</a></div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 11112
9.3.2 Non Accredited Session
There are sessions that are tagged as non accredited which means they are not eligible for credit and are industry specific.
Components: Sub.FacultyList.SessionAndPresentation - Session Faculty & Faculty List Sub.Credits.NonAccredited - Non Accredited Message Sub.ActionButtons.NoDetails - Action Button w/o Details
Example
Default styling
- Industry Theater
- Navigating Health Care Economics
3652 Cardiovascular Update for the Clinician III
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
Industry Session | Nonaccredited
<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white br_secondary-n2">
<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_secondary-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 bg_secondary-n2 ">
<ul class="ul_inline-pipe">
<li>Industry Theater</li>
<li>Navigating Health Care Economics</li>
</ul>
</div>
<div class="p_4 p-b_2 flex flex_column flex_row:lg gap-x_4 gap-x_5:lg">
<header>
<h2 class="font_n1 uppercase c_black-7">
<strong class="font_bold p-r_2">3652</strong> Cardiovascular Update for the Clinician III
</h2>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_2 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1">
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty </span>
</h3>
</header>
<div class="flex_grow m-x_auto m-l_auto:lg m-r_0:lg w_100 max-w_20:md">
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="download calendar reminder" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<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>
<div>
<div class="p-x_4 p-b_4 flex flex_column font_0 font_copy">
<div class="font_medium m-b_3"><span class="c_accent-n2">Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span></div>
<div class="font-size_down-1"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 inline">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></div>
</div>
</div>
</div>
</div>
<div class="c_black flex flex_wrap font_n3 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_grow uppercase m-l_auto c_secondary-n2">
<strong class="font_xbold uppercase"><i class="fas fa-info-circle p-r_3"></i>Industry Session | Nonaccredited</strong> </div>
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 11073
9.3.3 No Results
When the results are empty the user is presented with a message.
Example
Default styling
OH NO! We couldn't find any results for your search.
Search Help
It is easy to search for a session, but its also easy to have a typo. Check your spelling and try again.
Click the `Clear Search` button to return to all sessions.
<article class="c_black font_0 br-t_3 br_solid br_radius isolation_isolate shadow_overlap-light bg_white br_black-4 bg_warning-n1 m-y_5 m-x_3">
<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_black-4" >
<div class="p_4 p-b_2 flex flex_column flex_row:lg gap-x_4 gap-x_5:lg">
<header class="c_white">
<h2 class="font_2 c_white font_display font_bold lh_1">
<span class="font-size_up-2 block uppercase"><i class="fas fa-exclamation-triangle"></i> OH NO!</span>
<span class="font-size_down inline-block lh_0 m-t_2">We couldn't find any results for your search.</span>
</h2>
<h3 class="font_0 font_bold font_copy lh_0 m-b_2 m-t_4 uppercase">Search Help</h3>
<p class="font_copy m-b_4 lh_2 font_0">
It is easy to search for a session, but its also easy to have a typo. Check your spelling and try again.
<hr>
Click the `Clear Search` button to return to all sessions.
</p>
</header>
<div class="flex_grow m-x_auto m-l_auto:lg m-r_0:lg w_100 max-w_10:md flex flex_column items_center justify_center">
<aside class="flex flex_none flex_column gap-y_3 m-l_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="navigate to" class="br_1 br_solid br_white-3 btn btn-secondary flex_auto shadow_overlap-light">Clear Search <i class="fas fa-times p-l_3"></i></a>
</nav>
</aside> </div>
</div>
</div>
</div>
<div class="c_black flex flex_wrap font_n3 justify_start p_3 br-br_radius br-bl_radius bg_warning-n3 br_solid br_1 br-t_0 br_black-3">
</div>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 10927
9.3.4 Session Shell
A session shell is when there is only one presentation.
Example
Default styling
- Navigating Health Care Economics
- Category Tag
3652 Cardiovascular Update for the Clinician III
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white">
<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 gap-x_4 gap-x_5:lg">
<header>
<h2 class="font_n1 uppercase c_black-7">
<strong class="font_bold p-r_2">3652</strong> Cardiovascular Update for the Clinician III
</h2>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_2 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1">
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty </span>
</h3>
</header>
<div class="flex_grow m-x_auto m-l_auto:lg m-r_0:lg w_100 max-w_20:md">
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="download calendar reminder" class="btn btn-secondary flex_none a:bg_alert-n2"><i class="fas fa-calendar"></i></a>
<a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<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>
<div>
<div class="p-x_4 p-b_4 flex flex_column font_0 font_copy">
<div class="font_medium m-b_3"><span class="c_accent-n2">Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span></div>
<div class="font-size_down-1"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 inline">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></div>
</div>
</div>
</div>
</div>
<div class="c_black flex flex_wrap font_n3 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_grow uppercase 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 11033
9.4 Condensed Session
Condensed Sessions are used for listing designs that are not full featured.
Sub.ActionButtons - Watch Button
Sub Components in Design:
Data.Session.ID - Session ID
Data.Session.Title - Session Title
Data.Agenda.LiveTime - Live Time
Data Elements:
Example s
.p_4.bg_black-1.shadow_emboss-light.br_radius.br_1.br_solid.br_black-3
embossed background
3652 Cardiovascular Update for the Clinician III
@ 11:15 a.m. – 11:15 a.m. EDT
<article class="[modifier] flex_column flex gap_3">
<header>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_2 m_0">
<strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6">3652</strong>
<span class="block font_display lh_2 font-size_up-1">
Cardiovascular Update for the Clinician III </span>
</h3>
</header>
<div class="font_0 font_ui c_accent-n1">@ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></div>
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md w_100">
<a href="#" aria-label="navigate to" class="btn btn-outline-primary flex_auto">Watch</a>
</aside>
</article>Code Sample
Source: dist/css/virtual_boot.css, line 10975
9.5 On Demand
After the completion of a video the Sessions are broken down to the individual presentations and stored in the On Demand Area for viewing.
Sub.Credits.Dots - Credit Dots
Sub.FacultyList.SessionAndPresentation - Session & Presentation Faculty List
Sub.PlayingDateTime - Playing Date Time
Sub.ActionButtons.OnDemand - Action Buttons
Sub.CategoryFlags - Category Flags
Sub Components in Design:
Data.Presentation.Title - Presentation Title
Data.Session.Title - Session Title
Data.Session.ID - Session ID
Data Elements:
Example
Default styling
- Navigating Health Care Economics
- Category Tag
3652 Cardiovascular Update for the Clinician III
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. EDT
- Session Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Session Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- Role Type 1:
- Pepper H. Soda III, MD, FACC ( New York, NY, USA)
- Role Type 2:
- Dianna Denesik III ( New York, NY, USA)
- Miguel Romaguera ( New York, NY, USA)
- Jeanette Franecki ( New York, NY, USA)
- CME
- CNE
- COP
- MOCII
<article class="c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white">
<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 gap-x_4 gap-x_5:lg">
<header>
<h2 class="font_n1 uppercase c_black-7">
<strong class="font_bold p-r_2">3652</strong> Cardiovascular Update for the Clinician III
</h2>
<h3 class="font_display m-b_3 lh_2 c_primary-n2 font_2 p-r_4:lg">
<span class="block font-size_up-1 font_display lh_1">
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty </span>
</h3>
</header>
<div class="flex_grow m-x_auto m-l_auto:lg m-r_0:lg w_100 max-w_20:md">
<aside class="flex flex_none flex_column gap-y_3 m-x_auto:md max-w_30:md p-b_4 p-b_4:md w_100">
<nav aria-label="session actions" class="flex flex_none flex_row gap-x_2 gap-y_3 justify_between">
<a href="#" aria-label="mark as favorite" class="btn btn-secondary flex_none a:bg_alert-n2 h:bg_alert-n4 flex_none grid items_center text_center [active]" ><i class="fas fa-heart"></i></a> <a href="#" aria-label="navigate to" class="btn btn-primary flex_auto">Watch</a>
</nav>
<a href="#" aria-label="download attachments" class="br_radius btn btn-outline-secondary btn-sm flex_auto font-size_down-1 w_100"><i class="far fa-paperclip"></i> Attachments</a>
</aside> </div>
</div>
<div>
<div class="p-x_4 p-b_4 flex flex_column font_0 font_copy">
<div class="font_medium m-b_3"><span class="c_accent-n2">Saturday, Nov. 20, 2021 @ 11:15 a.m. – 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></span></div>
<div class="font-size_down-1"><ul class="ul_inline-semicolon font_regular font_copy">
<li class="no-after font_medium c_primary-n1 inline">Session Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Session Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Role Type 1:</li>
<li>Pepper H. Soda III, MD, FACC <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li class="no-after font_medium c_primary-n1 inline">Role Type 2:</li>
<li>Dianna Denesik III <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Miguel Romaguera <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
<li>Jeanette Franecki <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
</ul></div>
</div>
</div>
</div>
</div>
<div class="c_black flex flex_wrap font_n3 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_grow uppercase 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>