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">
<li class="nj-list__item">Lorem ipsum dolor sit amet</li>
<li class="nj-list__item">Lorem ipsum dolor sit amet</li>
<li class="nj-list__item">Lorem ipsum dolor sit amet</li>
<li class="nj-list__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 nj-list--sm">
<li class="nj-list__item">Lorem ipsum dolor sit amet</li>
<li class="nj-list__item">Lorem ipsum dolor sit amet</li>
<li class="nj-list__item">Lorem ipsum dolor sit amet</li>
<li class="nj-list__item">Lorem ipsum dolor sit amet</li>
</ul>See more examples directly on the storybooks, links at the top of the page.