List Groups

A versatile component for displaying a series of content.

Bordered List

Lorem ipsum dolor
Suscipit, eaque ab fugit
Abore incidunt quam
Totam nulla earum nobis sequi
Nulla earum nobis tenetur

Code Example Shortcut: z-list-border

<ul class="list-group">
  <li class="list-group-item">Lorem ipsum dolor</li>
  <li class="list-group-item">Suscipit, eaque ab fugit</li>
  <li class="list-group-item">Abore incidunt quam</li>
  <li class="list-group-item">Totam nulla earum nobis sequi</li>
  <li class="list-group-item">Nulla earum nobis tenetur</li>
</ul>

Flush

Lorem ipsum dolor
Suscipit, eaque ab fugit
Abore incidunt quam

Code Example Shortcut: z-list-flush

<ul class="list-group list-group-flush">
  <li class="list-group-item">Lorem ipsum dolor</li>
  <li class="list-group-item">Suscipit, eaque ab fugit</li>
  <li class="list-group-item">Abore incidunt quam</li>
</ul>

Active Item

Lorem ipsum dolor
Suscipit, eaque ab fugit
Abore incidunt quam

Code Example Shortcut: z-list-active

<h3 class="pt-3">Active Item</h3>
<ul class="list-group">
  <li class="list-group-item active">Lorem ipsum dolor</li>
  <li class="list-group-item">Suscipit, eaque ab fugit</li>
  <li class="list-group-item">Abore incidunt quam</li>
</ul>

disabled Item

Lorem ipsum dolor
Suscipit, eaque ab fugit
Abore incidunt quam

Code Example Shortcut: z-list-disabled

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Lorem ipsum dolor</li>
  <li class="list-group-item">Suscipit, eaque ab fugit</li>
  <li class="list-group-item">Abore incidunt quam</li>
</ul>

Links

Lorem ipsum dolor Suscipit, eaque ab fugit Uam praesentium velit ad alias

Code Example Shortcut: z-list-links

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Lorem ipsum dolor</a>
  <a href="#" class="list-group-item list-group-item-action">Suscipit, eaque ab fugit</a>
  <a href="#" class="list-group-item list-group-item-action">Uam praesentium velit ad alias</a>
</div>

Contextual Example

Success
Warning
Danger
Notice

Code Example Shortcut: z-list-success, list-warning, list-danger, list-notice

<ul class="list-group">
    <li class="list-group-item success">Success</li>
    <li class="list-group-item warning">Warning</li>
    <li class="list-group-item danger">Danger</li>
    <li class="list-group-item notice">Notice</li>
</ul>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.