List
Group and organize lists of content
Overview #
Use the list component to group and organize lists of content.
Examples #
<ul class="rvt-list">
<li>Item 1</li>
<li>
Item 2
<ul class="rvt-list">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul><ol class="rvt-list">
<li>Item 1</li>
<li>
Item 2
<ol class="rvt-list">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ol>
</li>
<li>Item 3</li>
</ol><ul class="rvt-list-plain">
<li>Item 1</li>
<li>Item 2
<ul class="rvt-list-plain">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul><ul class="rvt-list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul><dl class="rvt-list-description">
<dt>Description list item one</dt>
<dd>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.</dd>
<dt>Description list item two</dt>
<dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
<dt>Description list item three</dt>
<dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</dd>
</dl>Usage #
Do
- Use lists to help make content easier for users to understand
- Follow the IU Editorial Style Guide when writing and formatting lists
Don't
- Nest lists more than two levels deep if possible
- Override Rivet CSS to use unusual symbols for bullets