mdb-ui-kit/docs/material-design/list-group.md

layout	title	group
docs	List group	material-design

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

The material classes introduced are:

Classes	BS Equivalent	Differences
{% markdown %}`.mdb-list-group-item`{% endmarkdown %}	{% markdown %}`.list-group-item`{% endmarkdown %}	{% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
{% markdown %}`.mdb-list-group-col`{% endmarkdown %}	{% markdown %}None{% endmarkdown %}	{% markdown %}Flexbox column - additional class to use within a `.list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
{% markdown %}`.right`{% endmarkdown %}	{% markdown %}None{% endmarkdown %}	{% markdown %}Flex layout marker - additional class needed when only one icon/label is present and it should be right aligned. Only valid as a child of `.mdb-list-group-item`{% endmarkdown %}
{% markdown %}`.mdb-list-group-sm`{% endmarkdown %}	{% markdown %}None{% endmarkdown %}	{% markdown %}Use on `.mdb-list-group` for the dense list display{% endmarkdown %}

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Single line

Text

{% example html %}

• Inbox
Link item Button item Disabled item

{% endexample %}

Dense

{% example html %}

• Inbox
Link item Button item Disabled item

{% endexample %}

Icons and labels

{% example html %}

• inbox Icon left
• 14 Label pill left
• inbox Icons left and right face
• 14 Label pill left and right 14
• Icon .right face
• Label pill .right 14
• 14 Label pill and icon inbox
• inbox Icon and label pill 14

{% endexample %}

Double line

Text

{% example html %}

• List group item heading

  Some text

• List group item heading

  Some text

• List group item heading

  Some text

{% endexample %}

Dense

{% example html %}

• List group item heading

  Some text

• List group item heading

  Some text

• List group item heading

  Some text

{% endexample %}

Icons and labels

{% example html %}

• inbox

  List group item heading

  Icon left

• 14

  List group item heading

  Icon left

• inbox

  List group item heading

  Icons left and right

  face

• List group item heading

  Icon right

  face

• List group item heading

  Label pill to the right

  14

{% endexample %}

Three line

Text

{% example html %}

• List group item heading

  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.

• List group item heading

  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.

{% endexample %}