Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

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)
         11:45 – 11:49 a.m. ET
      • 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)
         11:45 – 11:49 a.m. ET
        • 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)
         11:45 – 11:49 a.m. ET
      • 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)
         11:45 – 11:49 a.m. ET
      • 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>
      Copy Code