Stilguiden VGR

Lists 

<!-- <h2>Unordered list</h2> -->
<ul>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>

<!-- <h2>Ordered list</h2> -->
<ol>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
</ol>

<!-- <h2>Unstyled list</h2> -->
<ul class="vgr-unstyled-list">
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>
 
<!-- <h2>Unordered list</h2> -->
<ul>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
</ul>

<!-- <h2>Ordered list</h2> -->
<ol>
  <li>Ordered list item</li>
  <li>Ordered list item</li>
  <li>Ordered list item</li>
</ol>

<!-- <h2>Unstyled list</h2> -->
<ul class="vgr-unstyled-list">
  <li>Unordered list item</li>
  <li>Unordered list item</li>
  <li>Unordered list item</li>
</ul>
 
/* No context defined for this component. */

Text from The U.S. Web Design Standards

Implementation

Lists are styled by default. For unstyled lists, use either the vgr-unstyled-list class or unstyled list mixin: @include unstyled-list;.

Usability

When to use

  • Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
  • Use unordered lists to display text in no specific order.

When to consider something different

  • If you need to communicate long lists of narrative text.

Guidelines

  • Use sentence case and begin lists with a capital letter.
  • Use punctuation appropriate to the text. Do not leave sentences without periods.