List

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

Example

The most basic list 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 the list 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 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 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 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 active">
    <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 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 ml-1">14</span>
  </li>
  <li class="nj-list-group__item justify-content-between align-items-center">
    Lorem ipsum dolor sit amet
    <span class="nj-badge ml-1">2</span>
  </li>
  <li class="nj-list-group__item justify-content-between align-items-center">
    Lorem ipsum dolor sit amet
    <span class="nj-badge ml-1">1</span>
  </li>
</ul>

Custom content

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

List

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

List

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

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 nj-avatar--default-icon flex-shrink-0 mr-2"></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 flex-shrink-0 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 nj-avatar--default-icon flex-shrink-0 mr-2"></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 flex-shrink-0 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 nj-avatar--default-icon flex-shrink-0 mr-2"></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 flex-shrink-0 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 nj-avatar--default-icon flex-shrink-0 mr-2"></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 flex-shrink-0 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 nj-avatar--default-icon flex-shrink-0 mr-2"></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 flex-shrink-0 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 nj-avatar--default-icon flex-shrink-0 mr-2"></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 flex-shrink-0 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>