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

layout	title	group
docs	List groups	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
.mdb-list-group-item	.list-group-item	{% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
.mdb-list-group-col	{% markdown %}None{% endmarkdown %}	{% markdown %}Flexbox column - additional class to use within an `.mdb-list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
.right	{% 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 %}
.mdb-list-group-sm	{% 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 %}

• Text only
Link item Button item Active link item Disabled item

{% endexample %}

Dense

{% example html %}

• Text
Link item Button item Active link 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 %}

Linked 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.

• Text 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 %}