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 8205

13.11.1 Auxiliary Data

Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.

Sub.Credits.NonAccredited - Non Accredited Sub.FacultyList.AuxSession - Session Faculty Lists Sub.Credits.Dots - Credit Dots Sub.Tags.Category - Category Sub.Tags.Filter - Tags
Sub Components in Design:

    Example 

    <aside class="flex_none max-w_20:md max-w_25:lg w_100 ">
    <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 1</h4>
    <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
    <ul class="ul_inline-semicolon font_regular font_copy">
      <li>Marty Little <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>Eileen Marvin <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>Chelsea Dach DVM <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
    </ul>
    </div>
    <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-users p-r_3"></i> Role Type 2</h4>
    <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down">
    <ul class="ul_inline-semicolon font_regular font_copy">
      <li>Wm Price<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>Mrs. Jeffrey Cartwright <span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
      <li>CEmmett Spencer<span class="opacity_9 font_light m-l_2">( New York, NY, USA)<span></li>
    </ul>
    </div>    <h4 class="font-size_up c_black-6 font_medium capitalize"><i class="fas fa-file-certificate p-r_3"></i> Credits</h4>
    <div class="p-y_3 br-t_1  br_primary-2 br_solid font-size_down-1">
      <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>
    <h4 class="font-size_up  c_black-6 font_medium"><i class="fas fa-tag p-r_3"></i>category</h4>
    <div class="br-t_1  br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
        <ul class="ul_inline-comma">
          <li>Channel 1</li>
          <li>Navigating Health Care Economics</li>
        </ul>    </div>
    <h4 class="font-size_up  c_black-6 font_medium"><i class="fas fa-tags p-r_3"></i>tags</h4>
    <div class="br-t_1  br_primary-2 br_solid p-y_3 c_black-7 font-size_down">
      <ul class="ul_inline-comma">
        <li>Tag Name 1</li>
        <li>Daugherty - Larkin</li>
        <li>relationships</li>
        <li>web-readiness</li>
      </ul>    </div>
</aside>
    Copy Code