List Group: Links

Ready

HTML
View
Context
Info
Notes


        
        <div class="hgm-list-group">
    <a href="#" class="hgm-list-group__item link">An item</a>
    <a href="#" class="hgm-list-group__item link">A second item</a>
    <a href="#" class="hgm-list-group__item link active" aria-current="true">A third item</a>
    <a href="#" class="hgm-list-group__item link">A fourth item</a>
    <a href="#" class="hgm-list-group__item link">And a fifth one</a>
</div>


        <div class="hgm-list-group">
    <a href="#" class="hgm-list-group__item link">An item</a>
    <a href="#" class="hgm-list-group__item link">A second item</a>
    <a href="#" class="hgm-list-group__item link active" aria-current="true">A third item</a>
    <a href="#" class="hgm-list-group__item link">A fourth item</a>
    <a href="#" class="hgm-list-group__item link">And a fifth one</a>
</div>


        
            
            /* No context defined. */

Handle: @list-group--links
Variants (7): Default , Active , Justified , Links , Multicolumn , Multicolumn Links , Numbered
Preview:
- With layout
- Component only
Filesystem Path: assets/hg-mercury-theme-engine/styleguide/02-blocks/list-group/list-group--links.hbs

Customizations

The list group can be converted to multi-column via combination of css classes and data-attributes.

CSS Classes

multi - set this class on the root element (hgm-list-group) to adjust all list items for multi-column usage

Data Attributes

data-columns - indicate the number of columns the list should be spread across (list defaults to single column on mobile); valid values are 2 through 6