Language selection

Search

List group

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use list group components to contain related content.

Design and coding

Basic use

Default

Use to group related content as an unordered list. Add links by using anchor tags instead of list items (that means use a parent <div> instead of a <ul>).

Appearance

No links:

  • Text
  • Text

With links:

Link text Link text (active item) Link text
Correct use

Compliance point(s):

  • Use an unordered list element (<ul>) only when there are no links
  • Use the <div> element when there are links
  • Apply the .active class when the link target matches the current page address
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// No links:
<ul class="list-group">
  <li class="list-group-item">...</li>
  <li class="list-group-item">...</li>
</ul>

// With links:
<div class="list-group">
  <a href="#" class="list-group-item">...</a>
  <a href="#" class="list-group-item active">...</a>
  <a href="#" class="list-group-item">...</a>
</div>

Enhanced use

Colours

Use colour classes to style list items, default or linked.

Appearance

No links:

  • Text
  • Text
  • Text
  • Text

With links:

Link text Link text Link text Link text

With links (active state):

Link text (active item) Link text (active item) Link text (active item) Link text (active item)
Correct use

Compliance point(s):

  • Background colours can be added:
    • .list-group-item-success for when the item is correct
    • .list-group-item-info for when the item is informational
    • .list-group-item-warning for when the item warns to the user
    • .list-group-item-danger for when the item or action is dangerous
  • Apply the .active class when the link target matches the current page address
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// No links:
<ul class="list-group">
  <li class="list-group-item list-group-item-success">...</li>
  <li class="list-group-item list-group-item-info">...</li>
  <li class="list-group-item list-group-item-warning">...</li>
  <li class="list-group-item list-group-item-danger">...</li>
</ul>

// With links:
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">...</a>
  <a href="#" class="list-group-item list-group-item-info">...</a>
  <a href="#" class="list-group-item list-group-item-warning">...</a>
  <a href="#" class="list-group-item list-group-item-danger">...</a>
</div>


// With links (active state):
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success active">...</a>
  <a href="#" class="list-group-item list-group-item-info active">...</a>
  <a href="#" class="list-group-item list-group-item-warning active">...</a>
  <a href="#" class="list-group-item list-group-item-danger active">...</a>
</div>

Badges

Use the badges component to any list group item, and it is automatically positioned on the right.

Appearance

No links:

  • 14 Text
  • 2 Text

With links:

14 Link text 2 Link text (active item) 5 Link text
Correct use

Compliance point(s):

Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// No links:
<ul class="list-group">
  <li class="list-group-item"><span class="badge">14</span> ...</li>
  <li class="list-group-item"><span class="badge">2</span> ...</li>
</ul>

// With links:
<div class="list-group">
  <a href="#" class="list-group-item"><span class="badge">14</span> ...</a>
  <a href="#" class="list-group-item active"><span class="badge">2</span> ...</a>
  <a href="#" class="list-group-item"><span class="badge">5</span> ...</a>
</div>

Complex content

Use to add structure to list groups. Add nearly any HTML within this list group, even for linked list groups like the one below.

Appearance

No links:

  • Heading

    Content

  • Heading

    Content

With links:

Heading

Content

Heading

Content

Heading

Content
Correct use

Compliance point(s):

  • Use when there is a need to add additional structure within each menu item
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// No links:
<ul class="list-group">
  <li class="list-group-item">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </li>
  ...
</ul>

// With links:
<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </a>
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">...</h4>
    <p class="list-group-item-text">...</p>
  </a>
  ...
</div>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: