Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

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