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 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