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

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>

<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

Copy Code

Arches: Virtual ACC