List groups

Material design list groups are specialized versions of their bootstrap counterparts, opting for the flexbox layout to achieve the varieties specified. (Specification)

Contents

Single line

Text

<ul class="list-group">
  <li class="list-group-item">Text only</li>
  <a href="#" class="list-group-item">Link item</a>
  <button type="button" class="list-group-item">Button item</button>
  <a href="#" class="list-group-item active">Active link item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
</ul>

Dense

<ul class="list-group bmd-list-group-sm">
  <li class="list-group-item">Text</li>
  <a href="#" class="list-group-item">Link item</a>
  <button type="button" class="list-group-item">Button item</button>
  <a href="#" class="list-group-item active">Active link item</a>
  <a href="#" class="list-group-item disabled">Disabled item</a>
</ul>

Icons and labels

<ul class="list-group">
  <a class="list-group-item">
    <i class="material-icons">inbox</i>
    Icon left
  </a>
  <a class="list-group-item">
    <span class="label label-default label-pill">14</span>
    Label pill left
  </a>  
  
  <a class="list-group-item">
    <i class="material-icons">inbox</i>
    Icons left and right
    <i class="material-icons">face</i>
  </a>
  <a class="list-group-item">
    <span class="label label-default label-pill">14</span>
    Label pill left and right
    <span class="label label-default label-pill">14</span>
  </a>  

  <a class="list-group-item">
    Icon right
    <i class="material-icons pull-xs-right">face</i>
  </a>
  <a class="list-group-item">
    Label pill right
    <span class="label label-default label-pill pull-xs-right">14</span>
  </a>  
  
  <a class="list-group-item">
    <span class="label label-default label-pill">14</span>
    Label pill and icon
    <i class="material-icons">inbox</i>
  </a>  
  <a class="list-group-item">
    <i class="material-icons">inbox</i>
    Icon and label pill
    <span class="label label-default label-pill">14</span>
  </a>  
</ul>

Double line

Text

<ul class="list-group">
  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Some text</p>
    </div>
  </a>
  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Some text</p>
    </div>
  </a>
  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Some text</p>
    </div>
  </a>  
</ul>

Dense

<ul class="list-group bmd-list-group-sm">
  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Some text</p>
    </div>
  </a>
  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Some text</p>
    </div>
  </a>
  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Some text</p>
    </div>
  </a>  
</ul>

Icons and labels

<ul class="list-group">
  <a class="list-group-item">
    <i class="material-icons">inbox</i>
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Icon left</p>
    </div>
  </a>

  <a class="list-group-item">
    <span class="label label-default label-pill">14</span>
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Icon left</p>
    </div>
  </a>

  <a class="list-group-item">
    <i class="material-icons">inbox</i>
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Icons left and right</p>
    </div>
    <i class="material-icons">face</i>
  </a>

  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Icon right</p>
    </div>
    <i class="material-icons pull-xs-right">face</i>
  </a>

  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">List group item heading</p>
      <p class="list-group-item-text">Label pill to the right</p>
    </div>
    <span class="label label-default label-pill pull-xs-right">14</span>
  </a>
</ul>

Three line

Text

<ul class="list-group">
  <a class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">Linked list group item heading</p>
      <p class="list-group-item-text">This disallows more than two lines.  Hopefully an ellipsis ends this text.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
    </div>
  </a>
  <li class="list-group-item">
    <div class="bmd-list-group-col">
      <p class="list-group-item-heading">Text list group item heading</p>
      <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
    </div>
  </li>
</ul>

Classes

Classes BS Equivalent Differences
.list-group-item .list-group-item

Flexbox layout, including conveniences for icon and label layout.
.bmd-list-group-col

None

Flexbox column - additional class to use within an .list-group-item for layout, such as a multi-line content section.
.bmd-list-group-sm

None

Use on .bmd-list-group for the dense list display

Variables

See variables/_list-group.scss for a complete list of variables. Key variables are below:

Variable Value Comment
$list-group-bg inherit

Original value was #fff, but it seemed that too often list-groups needed the background to be inherited from the underlying container.