Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/library_boot.css, line 8983

10.12.1 Auxiliary Data

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

ClassList: Sub.ClassList.Border.PrimaryTop - Border Primary Top

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

    Example

    Default styling

    <aside class="">
    <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="flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase">
            <li class="lh_0 flex_none">
                <span class="bg_CME-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CME</span>    </li>
            <li class="lh_0 flex_none">
                <span class="bg_CNE-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">CNE</span>    </li>
            <li class="lh_0 flex_none">
                <span class="bg_AAPA-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center">AAPA</span>    </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 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 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