Skip to Main Content

Pelican Design System icon Pelican Design System List Group

List Group

Give items in a list more visual prominence.

Edit on GitHub

On this page:

Best Practices

  • List group items are best for items which need to be more prominence than a simple bullet list.
  • Be sure to use an <ol> rather than an <ul> for a numbered list.
  • Do make sure to add the list-group-numbered class for a numbered list to the <ol>.

Usage

Static Text List

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
An item A second item A thirditem A fourth item And a fifth one 
<div class="list-group" role="list-group">
  <a role="list-item" href="#" class="list-group-item list-group-item-action">An item</a>
  <a role="list-item" href="#" class="list-group-item list-group-item-action">A second item</a>
  <a role="list-item" href="#" class="list-group-item list-group-item-action">A thirditem</a>
  <a role="list-item" href="#" class="list-group-item list-group-item-action">A fourth item</a>
  <a role="list-item" href="#" class="list-group-item list-group-item-action">And a fifth one</a>
</div>
Previous
Next
Page top