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 9024

13.14.5 Faceted Search

Facet Groups

Sub.Search.FacetCheckbox - Single Facet Checkbox Sub.CollapseIcon - Collapse Icon
Sub Components in Design:

    Example

  • Primary Category
    collapse
    less | more
    • NOTE:
    by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links. 
    <li data-name="library-search-facet" class="bg_white-8 br_radius m-t_3 p_3  max-w_20:md " >
    <header class="flex font-size_up m-y_2">
        <div class="flex_auto  self_center p-l_0 lh_1 font-size_up font_medium">Primary Category </div>
         <div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseFacetGroupPrimaryID" role="button" aria-expanded="true" aria-controls="#CollapseFacetGroupPrimaryID">
           <div class="flex_none self_center"> collapse </div>
           <div class="flex_none" >
               <span class="fa-stack">
                 <i class="fas fa-minus fa-stack-1x"></i>
                 <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
               </span>
           </div>
         </div>    </header>
    <main id="CollapseFacetGroupPrimaryID" class="p_1 collapse show" style="">
        <ul class="p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid">
            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_7835" id="checkfacet_7835" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_7835" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_7835ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_0300" id="checkfacet_0300" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0300" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0300ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_0849" id="checkfacet_0849" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_0849" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_0849ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8490" id="checkfacet_8490" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8490" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8490ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>            <li class="m-y_2">
                <div class="input flex user-select_none relative h:bg_black-1 br_radius">
                    <div class="flex_none p-l_3 p-r_3 self_center"><input type="checkbox" name="checkfacet_8066" id="checkfacet_8066" class="font-size_up"></div>
                    <div class="flex_auto self_center p-l_2 p-y_2"><label for="checkfacet_8066" class="font-size_up lh_2 block"><span class="font_regular p-y_2 inline-block p-y_1:md"> facet_8066ut nobis est<small class="flex_auto p-l_2 font_light c_accent font-size_down-1">58</small></span></label></div>
                    <!---->
                </div>
            </li>        </ul>
        <footer class="text_center font-size_down c_primary-n1 p-t_3"><span class="cursor_not-allowed c_black-3">less</span><span class="c_primary"> | </span><span class="link h:underline h:black link h:underline h:black cursor_pointer">more</span></footer>
    </main>
</li>
    Copy Code