--- layout: docs title: List groups 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](https://www.google.com/design/spec/components/lists.html#lists-specs)) ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Single line ### Text {% example html %} {% endexample %} ### Dense {% example html %} {% endexample %} ### Icons and labels {% example html %} {% endexample %} ## Double line ### Text {% example html %} {% endexample %} ### Dense {% example html %} {% endexample %} ### Icons and labels {% example html %} {% endexample %} ## Three line ### Text {% example html %} {% endexample %} ## Classes
Classes BS Equivalent Differences
.list-group-item .list-group-item {% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
.bmd-list-group-col {% markdown %}None{% endmarkdown %} {% markdown %}Flexbox column - additional class to use within an `.list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
.bmd-list-group-sm {% markdown %}None{% endmarkdown %} {% markdown %}Use on `.bmd-list-group` for the dense list display{% endmarkdown %}
## Variables See `variables/_list-group.scss` for a complete list of variables. Key variables are below:
Variable Value Comment
$list-group-bg inherit {% markdown %}Original value was `#fff`, but it seemed that too often list-groups needed the background to be inherited from the underlying container.{% endmarkdown %}