Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

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

13.12.1.1 Auxiliary Data Abstracts

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

Sub.Credits.Dots - Credit Dots Sub.Tags.Category - Category Sub.Tags.Filter - Tags
Sub Components in Design:

    Example

    Default styling

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