List groups

List group styles for HTML ordered, unordered and definition list types.

Source file
src/css/list-groups.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/list-groups.css

Included with:

Default (anchor)

Unordered (anchor)

  • List item
  • List item
  • List item
Example HTML 
<ul class="list-group">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

Ordered (anchor)

  1. List item
  2. List item
  3. List item
  1. Link item
  2. Link item
  3. Link item
Example HTML 
<ol class="list-group">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

<ol class="list-links">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ol>

Definition (anchor)

Term 1
Description
Description
Term 2
Description
Description
Term 1
Description
Description
Term 2
Description
Description
Term 1
Description
Description
Term 2
Description
Description
Example HTML 
<dl class="list-group">
  <dt>Term 1</dt>
    <dd>Description</dd>
    <dd>Description</dd>
  <dt>Term 2</dt>
    <dd>Description</dd>
    <dd>Description</dd>
</dl>

<dl class="list-links">
  <dt><a href="#">Term 1</a></dt>
    <dd><a href="#">Description</a></dd>
    <dd><a href="#">Description</a></dd>
  <dt><a href="#">Term 2</a></dt>
    <dd><a href="#">Description</a></dd>
    <dd><a href="#">Description</a></dd>
</dl>

<dl class="list-links">
  <dt>Term 1</dt>
    <dd><a href="#">Description</a></dd>
    <dd><a href="#">Description</a></dd>
  <dt>Term 2</dt>
    <dd><a href="#">Description</a></dd>
    <dd><a href="#">Description</a></dd>
</dl>

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
Example HTML 
<ul class="list-group light">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links light">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

<ul class="list-group dark">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links dark">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

Primary colors (anchor)

The list groups color classes use the primary colors variables, the source file is included separately.

Source file
src/css/colors/color-list-groups.css
View on GitHub
https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-list-groups.css

Included with:

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
Example HTML 
<ul class="list-group-primary">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links-primary">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

<ul class="list-group-success">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links-success">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

<ul class="list-group-danger">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links-danger">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

<ul class="list-group-info">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links-info">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

<ul class="list-group-warning">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links-warning">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>

<ul class="list-group-secondary">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

<ul class="list-links-secondary">
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
  <li><a href="#">Link item</a></li>
</ul>
Previous: Dropdowns
Next: Popovers