WebMD Ignite DX Engine

List Group: Active 

<ul class="hgm-list-group">
    <li class="hgm-list-group__item">An item</li>
    <li class="hgm-list-group__item">A second item</li>
    <li class="hgm-list-group__item active" aria-current="true">A third item</li>
    <li class="hgm-list-group__item">A fourth item</li>
    <li class="hgm-list-group__item">And a fifth one</li>
</ul>
 
<ul class="hgm-list-group">
    <li class="hgm-list-group__item">An item</li>
    <li class="hgm-list-group__item">A second item</li>
    <li class="hgm-list-group__item active" aria-current="true">A third item</li>
    <li class="hgm-list-group__item">A fourth item</li>
    <li class="hgm-list-group__item">And a fifth one</li>
</ul>
 
/* No context defined. */

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