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. Don’t forget the aria-current="true"
attribute.
- 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" aria-current="true">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>
With active borders on the right side
<ul class="nj-list-group">
<li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border active"
aria-current="true">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</li>
<li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</li>
<li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</li>
<li class="nj-list-group__item nj-list-group__item--clickable nj-list-group__item--right-border">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</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>
Links and buttons
Use a
s or button
s with the nj-list-group__item--clickable
class to create actionable list items with hover, disabled, and active states.
Be sure to not use the standard .btn
classes here.
<ul class="nj-list-group">
<li class="nj-list-group__item nj-list-group__item--clickable active"
aria-current="true">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</li>
<li class="nj-list-group__item nj-list-group__item--clickable">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</li>
<li class="nj-list-group__item nj-list-group__item--clickable">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</li>
<li class="nj-list-group__item nj-list-group__item--clickable">
<a href="#">
Lorem ipsum dolor sit amet
</a>
</li>
</ul>
With icons
Add icons to any list item.
- Icon text alternative Lorem ipsum dolor sit amet
- Icon text alternative Lorem ipsum dolor sit amet
- Icon text alternative Lorem ipsum dolor sit amet
<ul class="nj-list-group">
<li class="nj-list-group__item">
<span aria-hidden="true" class="material-icons nj-list-group__item-icon">tag_faces</span>
<span class="nj-sr-only">Icon text alternative</span>
Lorem ipsum dolor sit amet
</li>
<li class="nj-list-group__item active" aria-current="true">
<span aria-hidden="true" class="material-icons nj-list-group__item-icon">music_note</span>
<span class="nj-sr-only">Icon text alternative</span>
Lorem ipsum dolor sit amet
</li>
<li class="nj-list-group__item">
<span aria-hidden="true" class="material-icons nj-list-group__item-icon">flash_on</span>
<span class="nj-sr-only">Icon text alternative</span>
Lorem ipsum dolor sit amet
</li>
</ul>
With content on the right
Add content on the right to any list item to show unread counts, activity, and more. To do so, use the .nj-list-group__item-right-content
modifier.
-
List item with a badge on the right
14
- List item with an icon on the right Icon text alternative
-
List item with a tag on the right
Small tag
<ul class="nj-list-group">
<li class="nj-list-group__item">
List item with a badge on the right
<p class="nj-badge nj-badge--information nj-list-group__item-right-content">14</p>
</li>
<li class="nj-list-group__item">
List item with an icon on the right
<span aria-hidden="true" class="material-icons nj-list-group__item-icon nj-list-group__item-right-content">chevron_right</span>
<span class="nj-sr-only">Icon text alternative</span>
</li>
<li class="nj-list-group__item active" aria-current="true">
List item with a tag on the right
<div class="nj-tag nj-tag--sm nj-list-group__item-right-content">
<span class="nj-tag__text">Small tag</span>
</div>
</li>
</ul>