Lists

Lists break content into easily digestible pieces.

We use lists to organize information and make it easier to scan. Lists can:

  • Communicate information in a concise way.
  • Represent a series of steps.
  • Group similar items under a heading.

Bulleted list

Ingredients for Oreo-stuffed brownies

  • 225g butter, melted and cooled slightly
  • 1 cup caster sugar
  • 1½ cups packed brown sugar
  • 2 tsp vanilla extract
  • 4 eggs
  • 1 tsp salt
  • 1 cup cocoa powder, sifted
  • 1½ cups plain flour
  • 1 cup chocolate chips
  • 1 (154g) packet of Oreos
  • Use bulleted lists unless items are in a sequence (in that case, use a numbered list).
  • Include a descriptive header or lead-in text to provide context.
  • Avoid showing too many items. Our brains usually can’t process more than 5-9 pieces of information at once.
  • Organize in a logical way using location, alphabet, time, category, or hierarchy.
{% toggleText('bulleted-list') %}
<ul class="bulleted-list">
    <li>225g butter, melted and cooled slightly</li>
    <li>1 cup caster sugar</li>
    <li>1½ cups packed brown sugar</li>
    <li>2 tsp vanilla extract</li>
    <li>4 eggs</li>
    <li>1 tsp salt</li>
    <li>1 cup cocoa powder, sifted</li>
    <li>1½ cups plain flour</li>
    <li>1 cup chocolate chips</li>
    <li>1 (154g) packet of Oreos</li>
</ul>

Numbered list

  1. Preheat oven to 350°F
  2. In a large bowl, combine wet ingredients
  3. Stir in flour, a little at a time
  4. Pour mixture into pan
  5. Bake for 35-40 minutes
  • Use a numbered list when the sequence of items is important (for example, step-by-step instructions).
  • Don’t nest lists within lists—limit to one level.
{% toggleText('numbered-list') %}
<ol class="numbered-list">
    <li>Preheat oven to 350°F</li>
    <li>In a large bowl, combine wet ingredients</li>
    <li>Stir in flour, a little at a time</li>
    <li>Pour mixture into pan</li>
    <li>Bake for 35-40 minutes</li>
</ol>
  • Don’t use bulleted or numbered lists for links.
{% toggleText('link-list') %}
<ul class="link-list">
    <li><a href="">Oreo-stuffed brownie recipe</a></li>
    <li><a href="">Oreo-stuffed chocolate chip cookie recipe</a></li>
    <li><a href="">Fitbit.com</a></li>
</ul>