Ready Added in 1.0.0

Lists

Lists are used to group and organize collections of content.

Migrating to Rivet 2

This version of Rivet is deprecated. View the list documentation on the Rivet 2 website.

Unordered list

List Item One
List Item Two
List Item Three
List Item Four

<ul>
    <li>List Item One</li>
    <li>List Item Two</li>
    <li>List Item Three</li>
    <li>List Item Four</li>
</ul>

Ordered list

List Item One
List Item Two
List Item Three
List Item Four

<ol>
    <li>List Item One</li>
    <li>List Item Two</li>
    <li>List Item Three</li>
    <li>List Item Four</li>
</ol>

Plain list

You can use the helper class .rvt-plain-list to remove list formatting for display purposes.

List Item One
List Item Two
List Item Three
List Item Four

<ul class="rvt-plain-list">
    <li>List Item One</li>
    <li>List Item Two</li>
    <li>List Item Three</li>
    <li>List Item Four</li>
</ul>

Inline list

You can use the helper class .rvt-inline-list to remove list formatting and display list items inline. These items will have some extra right and bottom margin applied to them (for instance, where they flow onto more than one line).

List Item One
List Item Two
List Item Three
List Item Four

<ul class="rvt-inline-list">
    <li>List Item One</li>
    <li>List Item Two</li>
    <li>List Item Three</li>
    <li>List Item Four</li>
</ul>

Definition list

Definition list item one: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.; Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Definition list item two: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Definition list item three: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<dl>
   <dt>Definition list item one</dt>
   <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
   <dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
   <dt>Definition list item two</dt>
   <dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
   <dt>Definition list item three</dt>
   <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</dd>
</dl>

Usability notes

Use unordered lists <ul> when your collection has no specific order
Use ordered lists <ol> when you want to display content in some specific order like ranking or a series of steps in a process
Use definition lists to display groups of terms with descriptions like a glossary or other metadata

Microcopy notes

Follow the IT Communications Office’s style guide here:

Maintain a parallel structure. If you begin a list item with a verb, all others should begin with a verb too.
Don’t include punctuation unless a complete sentence follows in the same bullet (like in the sentence above)

Resources

W3C Docs about all the lists.