Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Program

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

7.1.1 Presentation - Condensed

Presentation designs on the Search page.

Sub.FacultyList - Faculty List Sub.Credits - Credits Sub.Search.TimeMarkers - Time Markers
Sub Components in Design:
    Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
    Data Elements: 
      <article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
    <div class="flex flex_row font_ui justify_start relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius">
        <main class="flex flex_column flex_auto gap_4 justify_between flex_auto relative w_100 isolation_isolate">
            <h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
                <a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
                    Presentation of the findings 
                </a>
            </h2>
        </main>
        <aside class="flex_auto flex flex_column items_center justify_center">
            <span class="font-size_down inline-block lh_0  c_black-8 text_center nowrap">
                <span class="font-size_up c_accent-n2 block ">
                <i class="fal fa-clock"></i>
                15
                </span>
                minutes
            </span>
        </aside>
    </div>
</article>
      Copy Code

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

      7.1.1.1 Presentation - Condensed Playable

      Presentation designs on the Search page.

      Sub.FacultyList - Faculty List Sub.Credits - Credits Sub.Search.TimeMarkers - Time Markers
      Sub Components in Design:
        Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
        Data Elements:

          Example

          Default styling

        • Presentation of the findings 

          • <li class="flex flex_row font_ui justify_between br-t_1 br-b_1  br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 p_2 p_3:md h:bg_white-8 br_radius relative">
    <h3 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto">
        Presentation of the findings 
    </h3>
    <span class="flex_none flex flex_column items_center justify_center ">
        <a class="font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light">
            <i class="fas fa-play"></i>
        </a>
    </span>
</li>
          Copy Code

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

          7.1.2 Presentation - Condensed Playing

          Presentation designs on the Search page.

          Sub.FacultyList - Faculty List Sub.Credits - Credits Sub.Search.TimeMarkers - Time Markers
          Sub Components in Design:
            Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
            Data Elements: 
              <article class="br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3">
    <div class="flex flex_row font_ui justify_start relative w_100 gap_4 p_4 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
        <main class="flex_auto">
            <h2 class="font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0">
                <a class="c_inherit-all expanded-click-area z_1 h:undecorated undecorated">
                    Presentation of the findings 
                </a>
            </h2>
        </main>
        <aside class="flex_none flex flex_column items_center justify_center">
            <span class="font-size_up-2 inline-block lh_0  c_accent text_center nowrap">
                <i class="fas fa-play"></i>
            </span>
        </aside>
    </div>
</article>
              Copy Code

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

              7.1.3 Presentation - Home

              Presentation designs on the home page.

              Sub.FacultyList - Faculty List Sub.ProgressBar - Progress Sub.Credits - Credits
              Sub Components in Design:
                Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
                Data Elements:

                  Example

                  Default styling

                  Cardiovascular Update for the Clinician III Clinical Update for the Blood Vessel Electrocardiogram Blood Vessel Blood Vessel Valvular Heart Disease Electrocardiographic Electrocardiographic Pharmacologic Side Effect Blood Vessel Arrhythmia Blood Vessel Arrhythmia Electrocardiographic

                  • 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
                  • AAPA 
                  <div>
	<article class="flex flex_grow flex_column w_100  inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
		<div class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4 ">
			<div class="font_display m-b_3 lh_2 ">
				<h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
					<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
						<span class="absolute t_n2 z_3 p-x_3 r_0">
							<a class="inline-block m-x_n3 m-t_n1 ">
							    <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
							        <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
							        <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
							    </span>
							</a>						</span>
					</span>
					<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> Cardiovascular Update for the Clinician III</strong>
					<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Blood Vessel Electrocardiogram Blood Vessel Blood Vessel Valvular Heart Disease Electrocardiographic Electrocardiographic Pharmacologic Side Effect Blood Vessel Arrhythmia Blood Vessel Arrhythmia Electrocardiographic  
					</a>
				</h2>
			</div>
			<div class="c_black-8 font_copy font-size_down-1">
				<ul class="ul_inline-semicolon font_regular font_copy">
				  <li class="no-after font_medium c_primary-n1 block w_100 ">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  ">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>
			<ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
				<li class="inline-block p-r_3 p_2 lh_0">
				    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
				    minutes
				</li>				<li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
				    <a href="#" class="undecorated h:undecorated expanded-click-area">
				    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
				        Attachments
				    </a>
				</li>			</ul>
            <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                <li class="lh_0 flex_none">
                    <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>    </li>
                <li class="lh_0 flex_none">
                    <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>    </li>
                <li class="lh_0 flex_none">
                    <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>    </li>
            </ul>		</div>
		<div class="p_2 p_3:md">
			<aside class="bg_secondary-3 h:bg_primary-3 p-x_4 p-y_3 br_radius flex flex_row texture_dust relative">
			    <a class="expanded-click-area" href="player@"><i class="fa fa-play p-x_3 c_primary"></i></a>
			    <div class="progress w_100 self_center br_black-2 br_solid bg_black-4 br_1 br_round h_0lh font_n4">
			        <div class="progress-bar bg_accent" role="progressbar" style="width: %" aria-valuenow="" aria-valuemax="100"></div>
			    </div>
			</aside>		</div>
	</article>
</div>
                  Copy Code

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

                  7.1.4 Presentation - Home Version 2

                  experimental

                  Presentation designs on the home page.

                  Sub.FacultyList - Faculty List Sub.ProgressBar - Progress Sub.Credits - Credits
                  Sub Components in Design:
                    Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
                    Data Elements:

                      Example

                      Default styling

                      caution:
                      This item is not finalized and might be subject to change 
                      <div>
    <article class="flex flex_grow flex_column w_100  inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
        <div class="flex flex_row font_ui justify_start relative w_100 gap_3">
            <main
                class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4 ">
                <div class="font_display m-b_3 lh_2 ">
                    <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
					<span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
						<span class="absolute t_n2 z_3 p-x_3 r_0">
							<a class="inline-block m-x_n3 m-t_n1 ">
							    <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
							        <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
							        <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
							    </span>
							</a>						</span>
					</span>
					<strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> Cardiovascular Update for the Clinician III</strong>
					<a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Cardiovascular Cardiovascular Clinical Chest Pain Chest Pain Arteriosclerosis Myocardial Valvular Heart Disease Valvular Valvular Heart Disease Arrhythmia Valvular Pharmacologic Arrhythmia  
					</a>
				</h2>
                </div>
                <div class="c_black-8 font_copy font-size_down-1">
                    <ul class="ul_inline-semicolon font_regular font_copy">
                      <li class="no-after font_medium c_primary-n1 block w_100 ">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  ">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>
                <ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
                    minutes
                </li>                <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
                    <a href="#" class="undecorated h:undecorated expanded-click-area">
                    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
                        Attachments
                    </a>
                </li>                </ul>
                <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                    <li class="lh_0 flex_none">
                        <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>    </li>
                    <li class="lh_0 flex_none">
                        <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>    </li>
                    <li class="lh_0 flex_none">
                        <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>    </li>
                </ul>            </main>
            <aside class="flex_none p-x_3:md p-b_3">
                <ul
                    class="b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
                    <li class="flex_auto p-b_3 m-b_auto">
                        <a class="inline-block m-x_n3 m-t_n1 ">
                            <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
                                <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
                                <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
                            </span>
                        </a>                    </li>
                </ul>
            </aside>
        </div>
        <div class="p_2 p_3:md">
            <aside class="bg_secondary-3 h:bg_primary-3 p-x_4 p-y_3 br_radius flex flex_row texture_dust relative">
                <a class="expanded-click-area" href="player@"><i class="fa fa-play p-x_3 c_primary"></i></a>
                <div class="progress w_100 self_center br_black-2 br_solid bg_black-4 br_1 br_round h_0lh font_n4">
                    <div class="progress-bar bg_accent" role="progressbar" style="width: %" aria-valuenow="" aria-valuemax="100"></div>
                </div>
            </aside>        </div>
    </article>
</div>
                      Copy Code

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

                      7.1.5 Presentation - List

                      Presentation designs on the Search page.

                      Sub.FacultyList - Faculty List Sub.Credits - Credits Sub.Search.TimeMarkers - Time Markers
                      Sub Components in Design:
                        Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
                        Data Elements:

                          Example

                          Default styling

                          <div>
    <article class="flex flex_grow flex_column w_100  p-x_3:lg br-t_1 br_solid br_black-3">
        <div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate p_4 ">
                <div class="font_display m-b_3 lh_2 ">
                    <h2 class="font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0">
                    <a class="c_inherit-all expanded-click-area z_1">
                        Presentation of the findings 
                    </a>
                    </h2>
                </div>
                <div class="c_black-8 font_copy font-size_down-1">
                    <ul class="ul_inline-semicolon font_regular font_copy">
                      <li class="no-after font_medium c_primary-n1 block w_100 ">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  ">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>
                <ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
                    minutes
                </li>                <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
                    <a href="#" class="undecorated h:undecorated expanded-click-area">
                    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
                        Attachments
                    </a>
                </li>                </ul>
        </div>
        <div class="p_2 p_3:md">
            <aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
                <strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
                <ul class="ul_inline-pipe">
                    <li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
                    <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  0:53</a></li>
                    <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  2:30</a></li>
                </ul>
            </aside>        </div>
    </article>
</div>
                          Copy Code

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

                          7.1.6 Presentation - Search

                          Presentation designs on the Search page.

                          Sub.FacultyList - Faculty List Sub.Credits - Credits Sub.Search.TimeMarkers - Time Markers
                          Sub Components in Design:
                            Data.Session.Title - Session Title Data.Presentation.Title - Presentation Title
                            Data Elements:

                              Example

                              Default styling

                              Cardiovascular Update for the Clinician III Clinical Update for the Cardiovascular Myocardial Valvular Electrocardiographic Pharmacologic Pharmacologic Clinical Arteriosclerosis Electrocardiogram Side Effect Cardiovascular Clinical Valvular Valvular Heart Disease

                              • 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
                              • AAPA 
                              <div>
    <article class="flex flex_grow flex_column w_100  inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
        <div class="flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate p_4 ">
                <div class="font_display m-b_3 lh_2 ">
                    <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
                        <span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
                            <span class="absolute t_n2 z_3 p-x_3 r_0">
                                <a class="inline-block m-x_n3 m-t_n1 ">
                                    <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
                                        <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
                                        <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
                                    </span>
                                </a>                            </span>
                        </span>
                        <strong class="block c_black-6 uppercase font_bold font-size_down lh_1 m_0 "> Cardiovascular Update for the Clinician III</strong>
                        <a class="c_inherit-all expanded-click-area z_1 inline"> Clinical Update for the Cardiovascular Myocardial Valvular Electrocardiographic Pharmacologic Pharmacologic Clinical Arteriosclerosis Electrocardiogram Side Effect Cardiovascular Clinical Valvular Valvular Heart Disease  
                        </a>
                    </h2>
                </div>
                <div class="c_black-8 font_copy font-size_down-1">
                    <ul class="ul_inline-semicolon font_regular font_copy">
                      <li class="no-after font_medium c_primary-n1 block w_100 ">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  ">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>
                <ul class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
                    minutes
                </li>                <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
                    <a href="#" class="undecorated h:undecorated expanded-click-area">
                    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i> <span class="p-r_3">PDF</span></span>
                        Attachments
                    </a>
                </li>                </ul>
                <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                    <li class="lh_0 flex_none">
                        <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>    </li>
                    <li class="lh_0 flex_none">
                        <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>    </li>
                    <li class="lh_0 flex_none">
                        <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>    </li>
                </ul>        </div>
        <div class="p_2 p_3:md">
            <aside class="flex flex_row flex_wrap font_ui inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light p_2 p_3:md">
                <strong class="p-r_3 block w_100">Search Word Found At These Time Markers</strong>
                <ul class="ul_inline-pipe">
                    <li class="c_primary uppercase font_medium"><a href="#" class="link"><i class="fas fa-play c_primary font-size_down-1 self_center"></i> start</a></li>
                    <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  0:53</a></li>
                    <li><a href="#" class="link"><i class="fas fa-step-forward c_primary font-size_down-1 self_center"></i>  2:30</a></li>
                </ul>
            </aside>        </div>
    </article>
</div>
                              Copy Code

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

                              7.2.1 Sessions - Homepage

                              Session Designs on the home page.

                              Sub.Credits - Credits
                              Sub Components in Design:
                                Data.Session.Title - Title
                                Data Elements: 
                                  <div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
    <div class="flex flex_row font_ui justify_start relative w_100">
        <main
            class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
            <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
                <a class="c_inherit-all expanded-click-area z_1">
                    Clinical Update for the Valvular Arrhythmia Chest Pain Arrhythmia Arrhythmia Pericardial Electrocardiogram Myocardial  
                </a>
            </h2>
            <ul
                class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
                    minutes
                </li>                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block">4</span>
                    presentations
                </li>                <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
                    <a href="#" class="undecorated h:undecorated expanded-click-area">
                    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
                        Attachments
                    </a>
                </li>            </ul>
            <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                <li class="lh_0 flex_none">
                    <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>                </li>
                <li class="lh_0 flex_none">
                    <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>                </li>
                <li class="lh_0 flex_none">
                    <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>                </li>
            </ul>
        </main>
        <aside class="flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1">
            <ul
                class="b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
                <li class="flex_auto p-b_3 m-b_auto">
                    <a class="inline-block m-x_n3 m-t_n1 ">
                        <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
                            <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
                            <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
                        </span>
                    </a>                </li>
            </ul>
        </aside>
    </div>
</article>
</div>
                                  Copy Code

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

                                  7.2.2 Sessions - Homepage Version 2

                                  experimental

                                  Session Designs on the home page.

                                  Sub.Credits - Credits
                                  Sub Components in Design:
                                    Data.Session.Title - Title
                                    Data Elements:
                                      caution:
                                      This item is not finalized and might be subject to change 
                                      <div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
    <div class="flex flex_row font_ui justify_start relative w_100">
        <main
            class="flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate gap_3 p_4">
            <h2 class="font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2">
                <span class="aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3" style="width:3.5em">
                    <span class="absolute t_n2 z_3 p-x_3 r_0">
                    <a class="inline-block m-x_n3 m-t_n1 ">
                        <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
                            <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
                            <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
                        </span>
                    </a>                    </span>
                </span>
                <a class="c_inherit-all expanded-click-area z_1 inline">
                    Clinical Update for the  Electrocardiographic Pharmacologic Cardiovascular Electrocardiogram Pharmacologic Pharmacologic Arteriosclerosis Cardiovascular Valvular Chest Pain Pharmacologic Electrocardiographic Valvular Cardiovascular  
                </a>
            </h2>
            <ul
                class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2 clear_both">
                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
                    minutes
                </li>                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block">4</span>
                    presentations
                </li>                <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
                    <a href="#" class="undecorated h:undecorated expanded-click-area">
                    <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
                        Attachments
                    </a>
                </li>            </ul>
            <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                <li class="lh_0 flex_none">
                    <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>                </li>
                <li class="lh_0 flex_none">
                    <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>                </li>
                <li class="lh_0 flex_none">
                    <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>                </li>
            </ul>
        </main>
    </div>
</article>
</div>
                                      Copy Code

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

                                      7.2.3 Sessions - Search

                                      Session Designs on the home page.

                                      Sub.Credits - Credits
                                      Sub Components in Design:
                                        Data.Session.Title - Title
                                        Data Elements: 
                                          <div>
<article class="flex flex_grow w_100 inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2">
    <div class="flex flex_row font_ui justify_start relative w_100">
        <main
            class="flex flex_column gap_3 flex_auto justify_between flex_auto relative w_100 isolation_isolate p_4">
            <h2 class="font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m-t_2">
                <a class="c_inherit-all expanded-click-area z_1">
                    Clinical Update for the 
                </a>
            </h2>
            <ul
                class="ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2">
                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block"><i class="fal fa-clock"></i> 15</span>
                    minutes
                </li>                <li class="inline-block p-r_3 p_2 lh_0">
                    <span class="font-size_up c_accent-n2 block">4</span>
                    presentations
                </li>                 <li class="inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0">
                     <a href="#" class="undecorated h:undecorated expanded-click-area">
                     <span class="font-size_up c_primary-n2 block"><i class="fal fa-paperclip p-r_3"></i><span class="p-r_3">ZIP</span></span>
                         Attachments
                     </a>
                 </li>            </ul>
            <ul class="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
                <li class="lh_0 flex_none">
                    <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>                </li>
                <li class="lh_0 flex_none">
                    <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>                </li>
                <li class="lh_0 flex_none">
                    <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>                </li>
            </ul>
        </main>
        <aside class="flex_none p-x_3:md p-b_3">
            <ul
                class="b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center">
                <li class="flex_auto p-b_3 m-b_auto">
                   <a class="inline-block m-x_n3 m-t_n1 ">
                       <span class="fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3">
                           <i class="fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1"></i>
                           <i class="fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1"></i>
                       </span>
                   </a>                </li>
            </ul>
        </aside>
    </div>
</article>
</div>
                                          Copy Code