This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/virtual_boot.css, line 11852

9.1.1 Day Grid with Channels.

There is need to override the default css variables of this design if you are going to shift away from the default. The units of time are set to increments of 5 minutes.

Example

Full Program

Channel Name 1 Channel Name 2 Channel Name 3 Channel Name 4
9:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
FORMAT:
In the real design the hours should be in the format of "3 p.m" and not military time of "15:00"
NOTE:
Limitation of this design because of the pattern library. The Hours could be formatted differently to reflect the AM and PM. But this build needs to be done in military time because of lack of dynamic labels for the hours. 
<h2 class="c_primary font_display">Full Program</h2>
<nav class="bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light m-b_5">
<ul class="flex_column flex_row:md nav">
        <li class="br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a
            id="BasicLink-tab" data-bs-toggle="tab" data-bs-target="#BasicLink"  role="tab" aria-controls="BasicLink" aria-selected="true"
            class="a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4" href="#">List with Search</a>
        </li>
        <li class=" br-t_3 br_solid:md br_white-0 m-l_1 nav-item">
            <a
                id="ActiveLink-tab" data-bs-toggle="tab" data-bs-target="#ActiveLink"  role="tab" aria-controls="ActiveLink" aria-selected="true"
                class="active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4"
                href="#">Schedule View</a>
        </li>
      </ul>
</nav>
<section id="day" class="grid:md flex flex_column gap-y_3 gap-y_0:md relative font_0:lg font_n1 font_n2:md isolation_isolate m-y_4">
<header class="day_grid grid:md sticky t_0 bg_white display_none z_3 br-b_1 br_primary br_solid" style="grid-column:1/-1; grid-row:channelName/channelName ">
<span class="channel-start_1 channel-end_1 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 1</span>
<span class="channel-start_2 channel-end_2 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 2</span>
<span class="channel-start_3 channel-end_3 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 3</span>
<span class="channel-start_4 channel-end_4 font_bold uppercase p_2 text_center overflow_ellipsis">Channel Name 4</span>
</header>
    <div class="channel channel_1 bg_black-2 display_none block:md channel-start_1 channel-end_1" ></div>
    <div class="channel channel_2 bg_black-_05 display_none block:md channel-start_2 channel-end_2" ></div>
    <div class="channel channel_3 bg_black-2 display_none block:md channel-start_3 channel-end_3" ></div>
    <div class="channel channel_4 bg_black-05 display_none block:md channel-start_4 channel-end_4" ></div>
    <div class="hour hour_9 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">9:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_9-00 time-end_10-00 channel-start_3 channel-end_4">
      <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"></div>
      <div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
        </ul>
      </div>
      <div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
        <header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
          <a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
        </header>
        <aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
      </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">
        <div class=" uppercase flex flex_wrap font-size_down-2 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>    <div class="hour hour_10 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">10:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_10-00 time-end_11-40 channel-start_1 channel-end_1">
      <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"></div>
      <div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
        </ul>
      </div>
      <div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
        <header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
          <a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
        </header>
        <aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
      </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">
        <div class=" uppercase flex flex_wrap font-size_down-2 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="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3  relative overflow_hidden time-start_10-00 time-end_11-40 channel-start_2 channel-end_3">
      <div class="br-b_0 br-t_3 br-tl_radius br-tr_radius br_black-3 br_secondary-n2 br_solid flex flex_column font_ui m-b_0 m-b_n2 m-x_n1 opacity_none p_0"></div>
      <div class="font-size_down-2 p_2 uppercase bg_secondary-n2 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>Industry Theater</li>
        </ul>
      </div>
      <div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4 br-b_1 br_solid br_secondary-n2">
        <header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
          <a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
        </header>
        <aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
      </div>
      <div class="bg_black-2 br-bl_radius br-br_radius br-t_0 br_1 br_black-3 br_solid c_black flex flex_wrap font-size_down-2 justify_start lh_0 m-b_n1 p_3">
        <div class="flex_grow uppercase m-l_auto c_secondary-n2" "="">
            <strong class="font_xbold uppercase"><i class="fas fa-info-circle"></i> Nonaccredited | Industry Session</strong>        </div>
    </div>
    </article>    <div class="hour hour_11 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">11:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <div class="hour hour_12 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">12:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_12-00 time-end_13-00 channel-start_1 channel-end_3">
      <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"></div>
      <div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
        </ul>
      </div>
      <div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
        <header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
          <a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
        </header>
        <aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
      </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">
        <div class=" uppercase flex flex_wrap font-size_down-2 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>    <div class="hour hour_13 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">13:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <article class="z_2 m-y_2:md br_1 br_black-3 br_radius br_solid c_black flex flex_column isolation_isolate shadow_overlap-light bg_white h:bg_primary-5 m-x_3 relative overflow_hidden time-start_13-30 time-end_15-10 channel-start_3 channel-end_4">
      <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"></div>
      <div class="font-size_down-2 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 class="">Navigating Health Care Economics</li>
        </ul>
      </div>
      <div class="flex flex_auto flex_column gap-y_3 p-b_2 p_4">
        <header class="font_display m-b_3 lh_2 c_primary-n2 p-r_4:lg font-size_up-1 lh_1">
          <a class="expanded-click-area h:undecorated"><strong class="font_bold p-r_2 block">3652-15612</strong> New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty</a>
        </header>
        <aside class="font-size_down font_ui c_accent-n2 m-b_3">@ 11:00 a.m. – 12:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr></aside>
      </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">
        <div class=" uppercase flex flex_wrap font-size_down-2 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>    <div class="hour hour_14 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">14:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <div class="hour hour_15 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">15:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <div class="hour hour_16 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">16:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div>    <div class="hour hour_17 br-t_1 br_solid br_accent-2 relative m-t_4 m-t_0:md z_0">
        <span class="c_accent-n2 font-size_up-2 font_display hour_label lh_0 opacity_7 self_start p_3 sticky:md t_5:md">17:00</span>
        <div class="minutes opacity_3 bg_accent-4 flex_column:md justify_stretch absolute t_0 r_0 b_0 l_0 display_none flex:md">
            <span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span><span class="minutes_10 flex_auto"></span><span class="minutes_10 flex_auto bg_white"></span>
        </div>
    </div></section>
Copy Code