Unordered lists
Unordered lists offer a basic way to separate items and display them in a visually-appealing and accessible way. We have a few different styles to meet various needs.
Jump to a component:
Default unordered lists
Use a default unordered list in most cases.
Styling
These lists have bullets and allow for nesting.
How to use for Default unordered lists
Use the “bulleted list” option in the toolbar.
Development info for Default unordered lists
Stylesheet location:
/_source/styles/base/_typography.scss
<ul>
<li></li>
<li>
<ul> <!-- could also be <ol> -->
<li></li>
</ul>
</li>
</ul>
Example of Default unordered lists
- This is a list item in a basic unordered list.
- This is a nested list item in a basic unordered list – it has a link.
- This is a list item in a basic unordered list.
Lists with no bullets
If you need a list without bullets (this is usually only the case in callouts), use this style.
Styling
These lists look just like default unordered lists, but don’t have the bullets.
How to use for Lists with no bullets
Add in the HTML (see “development info”).
Development info for Lists with no bullets
Stylesheet location:
/_source/styles/base/_typography.scss
Lists with no bullets shouldn’t be nested – put them all at the same level.
<ul class="no-bullets"> <li></li> </ul>
Example of Lists with no bullets
- This is a list item in a list with no bullets.
- This is a list item in a list with no bullets – it has a link.
Yes-no lists
Use yes-no lists to make lists of yes or no items easy to understand at a glance. It uses Font Awesome icons and color to visually show which items are “no” and which are “yes”.
Styling
“Yes” list items display a green checkmark icon next to them, and “no” list items display a red prohibition icon.
How to use for Yes-no lists
Add in the HTML (see “development info”).
Development info for Yes-no lists
Stylesheet location:
/_source/styles/base/_typography.scss
- Don’t add the icons manually – they’re added with CSS.
- For accessibility, you need to add a visually-hidden “yes” or “no” to the beginning of each list item.
<ul class="yes-no"> <li class="yes"><span class="visually-hide">Yes: </span>This is a "yes" item.</li> <li class="no"><span class="visually-hide">No: </span>This is a "no" item.</li> </ul>
Example of Yes-no lists
- Yes: This is a “yes” item in a yes-no list.
- No: This is a “no” item in a yes-no list.
- Yes: This is a “yes” item in a yes-no list.
Index lists
You can use index lists for long lists of short items in order to save space. It’s a specialized type of list and should only be used in certain circumstances, and usually for long lists of links. Usually, a default list is what you need.
Styling
Index lists have an underlined main heading and two columns. The list items flow left to right, left to right across and down the columns, and don’t have bullets.
Responsive behavior for Index lists
The two columns become one column on small screens.
How to use for Index lists
Add in the HTML (see “development info”).
Development info for Index lists
Stylesheet location:
/_source/styles/base/_typography.scss
- Don’t use the
"no-bullets"class or manually create the columns – this is done with CSS. - Each index list should have a heading to give context to the items. Headings must be
<h4>. - The
<ul>and<li>inside don’t have a class.
<div class="indexlist">
<h4>Items</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>