WebMD Ignite DX Engine

List Group: Justified 

<ul class="hgm-list-group">
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">An item <span class="hgm-badge">4</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">A second item <span class="hgm-badge">8</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">A third item <span class="hgm-badge">12</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">A fourth item <span class="hgm-badge">2</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">And a fifth one <span class="hgm-badge">6</span></li>
</ul>
 
<ul class="hgm-list-group">
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">An item <span class="hgm-badge">4</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">A second item <span class="hgm-badge">8</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">A third item <span class="hgm-badge">12</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">A fourth item <span class="hgm-badge">2</span></li>
    <li class="hgm-list-group__item d-flex justify-content-between align-items-center">And a fifth one <span class="hgm-badge">6</span></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