WebMD Ignite DX Engine

List Group: Multicolumn 

<div class="row">
    <div class="col-sm-12">
        <ul class="hgm-list-group multi" data-columns="3">
            <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">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>
            <li class="hgm-list-group__item">And a sixth one</li>
            <li class="hgm-list-group__item">And a seventh list item</li>
            <li class="hgm-list-group__item">And a eight list item</li>
            <li class="hgm-list-group__item">And a ninth list item</li>
            <li class="hgm-list-group__item">And a tenth list item</li>
            <li class="hgm-list-group__item">11 list item</li>
            <li class="hgm-list-group__item">12 list item</li>
            <li class="hgm-list-group__item">13 list item</li>
            <li class="hgm-list-group__item">14 list item</li>
        </ul>
    </div>
</div>
 
<div class="row">
    <div class="col-sm-12">
        <ul class="hgm-list-group multi" data-columns="3">
            <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">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>
            <li class="hgm-list-group__item">And a sixth one</li>
            <li class="hgm-list-group__item">And a seventh list item</li>
            <li class="hgm-list-group__item">And a eight list item</li>
            <li class="hgm-list-group__item">And a ninth list item</li>
            <li class="hgm-list-group__item">And a tenth list item</li>
            <li class="hgm-list-group__item">11 list item</li>
            <li class="hgm-list-group__item">12 list item</li>
            <li class="hgm-list-group__item">13 list item</li>
            <li class="hgm-list-group__item">14 list item</li>
        </ul>
    </div>
</div>
 
/* 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