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>Links and buttons
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.
<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">|</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">|</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">|</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.
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.
<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">|</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">|</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">|</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>