List group

List groups are a flexible and powerful component for displaying a series of content.

Basic example

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<ul class="nj-list-group">
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
</ul>

Dense

Add nj-list-group--sm to make list group more compact.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<ul class="nj-list-group nj-list-group--sm">
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
</ul>

Active items

Add .active to a .nj-list-group__item to indicate the current active selection.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<ul class="nj-list-group">
  <li class="nj-list-group__item active">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
</ul>

Disabled items

Add .disabled to a .nj-list-group__item to make it appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<ul class="nj-list-group">
  <li class="nj-list-group__item disabled">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
</ul>

Borderless item

Add nj-list-group--no-border for a list group without borders.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<ul class="nj-list-group nj-list-group--no-border">
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
  <li class="nj-list-group__item">Lorem ipsum dolor sit amet</li>
</ul>

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states.

Be sure to not use the standard .btn classes here.

<div class="nj-list-group">
  <a href="#" class="nj-list-group__item active">
    Lorem ipsum dolor sit amet
  </a>
  <a href="#" class="nj-list-group__item">Lorem ipsum dolor sit amet</a>
  <a href="#" class="nj-list-group__item">Lorem ipsum dolor sit amet</a>
  <a href="#" class="nj-list-group__item">Lorem ipsum dolor sit amet</a>
</div>

With <button>s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a>s don’t support the disabled attribute.

<div class="nj-list-group">
  <button type="button" class="nj-list-group__item active">
    Lorem ipsum dolor sit amet
  </button>
  <button type="button" class="nj-list-group__item">Lorem ipsum dolor sit amet</button>
  <button type="button" class="nj-list-group__item">Lorem ipsum dolor sit amet</button>
  <button type="button" class="nj-list-group__item" disabled>Lorem ipsum dolor sit amet</button>
</div>

With icons

Add icons to any list group item.

  • tag_faces Lorem ipsum dolor sit amet
  • music_note Lorem ipsum dolor sit amet
  • flash_on Lorem ipsum dolor sit amet
<ul class="nj-list-group">
  <li class="nj-list-group__item">
    <i class="material-icons md-24 mr-1">tag_faces</i>
    Lorem ipsum dolor sit amet
  </li>
  <li class="nj-list-group__item">
    <i class="material-icons md-24 mr-1">music_note</i>
    Lorem ipsum dolor sit amet
  </li>
  <li class="nj-list-group__item">
    <i class="material-icons md-24 mr-1">flash_on</i>
    Lorem ipsum dolor sit amet
  </li>
</ul>

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

  • Lorem ipsum dolor sit amet 14
  • Lorem ipsum dolor sit amet 2
  • Lorem ipsum dolor sit amet 1
<ul class="nj-list-group">
  <li class="nj-list-group__item justify-content-between align-items-center">
    Lorem ipsum dolor sit amet
    <span class="nj-badge nj-badge--blue-corporate">14</span>
  </li>
  <li class="nj-list-group__item justify-content-between align-items-center">
    Lorem ipsum dolor sit amet
    <span class="nj-badge nj-badge--blue-corporate">2</span>
  </li>
  <li class="nj-list-group__item justify-content-between align-items-center">
    Lorem ipsum dolor sit amet
    <span class="nj-badge nj-badge--blue-corporate">1</span>
  </li>
</ul>

Custom content

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

nj
List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

nj
List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

nj
List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

<div class="nj-list-group">
  <div href="#" class="nj-list-group__item">
    <div class="nj-avatar mr-3">
      <div class="nj-avatar__picture">
        <div class="nj-avatar__initials">nj</div>
      </div>
    </div>
    <div class="flex-grow-1 mr-2">
      <h5 class="mb-1">List</h5>
      <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
    </div>
    <div class="d-flex flex-row align-items-center">
      <a href="#" class="nj-link mr-2">edit</a>
      <span class="text-gray-300">&#x007C;</span>
      <a href="#" class="nj-link ml-2">more</a>
    </div>
  </div>
  <div href="#" class="nj-list-group__item">
    <div class="nj-avatar mr-3">
      <div class="nj-avatar__picture">
        <div class="nj-avatar__initials">nj</div>
      </div>
    </div>
    <div class="flex-grow-1 mr-2">
      <h5 class="mb-1">List</h5>
      <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
    </div>
    <div class="d-flex flex-row align-items-center">
      <a href="#" class="nj-link mr-2">edit</a>
      <span class="text-gray-300">&#x007C;</span>
      <a href="#" class="nj-link ml-2">more</a>
    </div>
  </div>
  <div href="#" class="nj-list-group__item">
    <div class="nj-avatar mr-3">
      <div class="nj-avatar__picture">
        <div class="nj-avatar__initials">nj</div>
      </div>
    </div>
    <div class="flex-grow-1 mr-2">
      <h5 class="mb-1">List</h5>
      <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
    </div>
    <div class="d-flex flex-row align-items-center">
      <a href="#" class="nj-link mr-2">edit</a>
      <span class="text-gray-300">&#x007C;</span>
      <a href="#" class="nj-link ml-2">more</a>
    </div>
  </div>
</div>

Another example:

List

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Generic image
List

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Generic image
List

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Generic image
<div class="nj-list-group">
  <div href="#" class="nj-list-group__item">
    <div class="nj-avatar mr-3">
      <div class="nj-avatar__picture"></div>
    </div>
    <div class="flex-grow-1 mr-2">
      <h5>List</h5>
      <p class="mt-1 text-gray-400">Lorem ipsum dolor sit amet</p>
      <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
      <div class="mt-3 d-flex flex-row align-items-center">
        <a href="#" class="nj-link mr-2">edit</a>
        <span class="text-gray-300">&#x007C;</span>
        <a href="#" class="nj-link ml-2">more</a>
      </div>
    </div>
    <img src="/assets/img/img-generic.jpg" alt="Generic image" width="282" />
  </div>
  <div href="#" class="nj-list-group__item">
    <div class="nj-avatar mr-3">
      <div class="nj-avatar__picture"></div>
    </div>
    <div class="flex-grow-1 mr-2">
      <h5>List</h5>
      <p class="mt-1 text-gray-400">Lorem ipsum dolor sit amet</p>
      <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
      <div class="mt-3 d-flex flex-row align-items-center">
        <a href="#" class="nj-link mr-2">edit</a>
        <span class="text-gray-300">&#x007C;</span>
        <a href="#" class="nj-link ml-2">more</a>
      </div>
    </div>
    <img src="/assets/img/img-generic.jpg" alt="Generic image" width="282" />
  </div>
  <div href="#" class="nj-list-group__item">
    <div class="nj-avatar mr-3">
      <div class="nj-avatar__picture"></div>
    </div>
    <div class="flex-grow-1 mr-2">
      <h5>List</h5>
      <p class="mt-1 text-gray-400">Lorem ipsum dolor sit amet</p>
      <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
      <div class="mt-3 d-flex flex-row align-items-center">
        <a href="#" class="nj-link mr-2">edit</a>
        <span class="text-gray-300">&#x007C;</span>
        <a href="#" class="nj-link ml-2">more</a>
      </div>
    </div>
    <img src="/assets/img/img-generic.jpg" alt="Generic image" width="282" />
  </div>
</div>