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 as or buttons 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>