View on GitHub

Bullet list

List allows users to view individual, but related, text items grouped together.

On this page

You can find here the OUDS Bullet list design guidelines.

Overview

Bullet lists can be unordered, ordered, bare or a mix. All types are based on the class .bullet-list applied to an ul or ol element.

Unordered lists

Add a .bullet-list class to an ul element to display an unordered list, this will display a custom icon as the list marker.

Default display

  • Item
  • Item
  • Item
<ul class="bullet-list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
html

Nested unordered lists

The marker depends on the level of nesting.

  • Bullet lists
  • Can have:
    • Nested lists
    • With:
      • Another marker
      • Each
  • That's all
<ul class="bullet-list">
    <li>Bullet lists</li>
    <li>Can have:
      <ul>
        <li>Nested lists</li>
        <li>With:
          <ul>
            <li>Another marker</li>
            <li>Each</li>
          </ul>
      </ul>
    </li>
    <li>That's all</li>
</ul>
html

Marker color

Add the class .bullet-list-default-color to switch to the default body color for the marker.

  • Item
  • Item
    • Sub item
    • Sub item
<ul class="bullet-list bullet-list-default-color">
    <li>Item</li>
    <li>Item
      <ul>
        <li>Sub item</li>
        <li>Sub item</li>
      </ul>
    </li>
</ul>
html

You can mix and match colors between list levels by using .bullet-list-default-color and .bullet-list-brand-color.

  • Item
  • Item
    • Sub item
    • Sub item
      • Sub item
      • Sub item
<ul class="bullet-list bullet-list-default-color">
    <li>Item</li>
    <li>Item
      <ul class="bullet-list-brand-color">
        <li>Sub item</li>
        <li>Sub item
          <ul class="bullet-list-default-color">
            <li>Sub item</li>
            <li>Sub item</li>
          </ul>
        </li>
      </ul>
    </li>
</ul>
html

Custom marker

The list marker can be customized by setting the --bs-bullet-list-custom-marker custom property either in a CSS class or in the style attribute of the targeted ul or li. Custom marker should only be applied to one level of the list.

CSS class

Define a CSS class with the desired SVG inside the --bs-bullet-list-custom-marker custom property. This will avoid repeating the SVG code if you plan to have several bullet lists with this same marker.

  • Heart item
    • Heart item
    • Heart item
  • Heart item
<style>
  .bullet-list-heart {
    --bs-bullet-list-custom-marker: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M15.474 9.514 10 15.577 4.526 9.514l-.002-.003A2.868 2.868 0 0 1 8.69 5.572l.838.796.472.455.472-.455.838-.796.008-.008a2.868 2.868 0 0 1 4.159 3.947l-.003.003Zm1.251-5.302A4.78 4.78 0 0 0 10 4.18a4.78 4.78 0 0 0-6.815 6.7L10 18.393l6.815-7.514a4.78 4.78 0 0 0-.09-6.667Z'/></svg>");
  }
</style>

<ul class="bullet-list bullet-list-heart">
    <li>Heart item
      <ul>
        <li>Heart item</li>
        <li>Heart item</li>
      </ul>
    </li>
    <li>Heart item</li>
</ul>
html

Inline SVG in ul

Inlined SVG requires properly escaped characters. Some reserved characters, such as <, > and ", must be URL-encoded or escaped. When customizing the CSS variable, you must handle this yourself.

  • Heart item
  • Heart item
<ul class="bullet-list" style="--bs-bullet-list-custom-marker: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M15.474 9.514 10 15.577 4.526 9.514l-.002-.003A2.868 2.868 0 0 1 8.69 5.572l.838.796.472.455.472-.455.838-.796.008-.008a2.868 2.868 0 0 1 4.159 3.947l-.003.003Zm1.251-5.302A4.78 4.78 0 0 0 10 4.18a4.78 4.78 0 0 0-6.815 6.7L10 18.393l6.815-7.514a4.78 4.78 0 0 0-.09-6.667Z'/%3E%3C/svg%3E&#34;);">
    <li>Heart item</li>
    <li>Heart item</li>
</ul>
html

Different custom markers

To have a different marker icon for each item on the same level, add the class or style attribute to the lis instead of the ul.

  • Calendar item
    • Item
    • Item
  • Address book item
<style>
  .marker-calendar {
    --bs-bullet-list-custom-marker: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M800 175H700v-38c0-20.71-16.789-37-37.5-37a37.5 37.5 0 0 0-37.5 37.5V175H350.011L350 137.5a37.5 37.5 0 0 0-75 0V175H100v625a75 75 0 0 0 75 75h700V250a75 75 0 0 0-75-75Zm25 650H187.5a37.5 37.5 0 0 1-37.5-37.5V400h637.5a37.5 37.5 0 0 1 37.5 37.5V825ZM250 262.5a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0V250h.011v-37.493A62.5 62.5 0 1 1 250 262.5Zm350 0a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0l-.011-12.5H700v-37a61.471 61.471 0 0 1 25 49.5 62.5 62.5 0 0 1-125 0Z'/></svg>");
  }
  .marker-address-book {
    --bs-bullet-list-custom-marker: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M800 100.017 200 100v125.007h-25a49.975 49.975 0 1 0 0 99.95h25v125.05h-25A50 50 0 1 0 175 550h25v124.985h-25a50.016 50.016 0 0 0 0 100.032h25v50.161a74.724 74.724 0 0 0 75 74.677L875 900l-.121-725.1A74.793 74.793 0 0 0 800 100.017ZM537.5 249.833a87.5 87.5 0 1 1-87.5 87.5 87.5 87.5 0 0 1 87.5-87.5ZM675 749.992H449.9a49.914 49.914 0 0 1-49.9-50V588c0-75.939 61.561-138.058 137.5-138.058S675 512.061 675 588v161.992Z'/></svg>");
  }
</style>

<ul class="bullet-list">
    <li class="marker-calendar">Calendar item
      <ul>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </li>
    <li class="marker-address-book">Address book item</li>
</ul>
html

Tick marker

Using SCSS

The tick marker is not shipped by default in the OUDS Web CSS, set the $enable-bullet-list-tick variable to true to enable the .bullet-list-tick class. Do not forget the .bullet-list-tick if you have nested lists.

  • Task
  • Task 2
    • Sub item
    • Sub item
<!--
  // in your style.scss file before importing OUDS Web source code
  $enable-bullet-list-tick: true;
-->

<ul class="bullet-list bullet-list-tick">
    <li>Task</li>
    <li>Task 2
      <ul>
        <li>Sub item</li>
        <li>Sub item</li>
      </ul>
    </li>
</ul>
html

Using a custom marker

To display a tick list without compiling the Sass source, add a CSS class setting the --bs-bullet-list-custom-marker custom property to the tick SVG. See above for more information.

  • Task
  • Task
  • Task
<style>
  .bullet-with-tick {
    --bs-bullet-list-custom-marker: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M15.474 9.514 10 15.577 4.526 9.514l-.002-.003A2.868 2.868 0 0 1 8.69 5.572l.838.796.472.455.472-.455.838-.796.008-.008a2.868 2.868 0 0 1 4.159 3.947l-.003.003Zm1.251-5.302A4.78 4.78 0 0 0 10 4.18a4.78 4.78 0 0 0-6.815 6.7L10 18.393l6.815-7.514a4.78 4.78 0 0 0-.09-6.667Z'/></svg>");
  }
</style>

<ul class="bullet-list bullet-with-tick">
    <li>Task</li>
    <li>Task</li>
    <li>Task</li>
</ul>
html

Ordered lists

Add a .bullet-list class to an ol element to display an ordered list.

Default display

  1. Step
  2. Step
  3. Step
  4. Step
  5. Step
  6. Step
<ol class="bullet-list">
    <li>Step</li>
    <li>Step</li>
    <li>Step</li>
    <li>Step</li>
    <li>Step</li>
    <li>Step</li>
</ol>
html

Nested ordered lists

  1. Category
  2. Category
    1. Subcategory
    2. Subcategory
      1. Sub subcategory
  3. Other category
<ol class="bullet-list">
    <li>Category</li>
    <li>Category
      <ol>
        <li>Subcategory</li>
        <li>Subcategory
          <ol>
            <li>Sub subcategory</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Other category</li>
</ol>
html

Mixed lists

It's possible to mix ordered and unordered lists, in this case adding the .bullet-list to the nested <ul> or <ol> is necessary.

  1. This is an ordered list
  2. With a nested
    • Unordered
    • List
  • This is an unordered list
  • With a nested
    1. Ordered
    2. List
<ol class="bullet-list">
    <li>This is an ordered list</li>
    <li>With a nested
      <ul class="bullet-list">
        <li>Unordered</li>
        <li>List</li>
      </ul>
    </li>
</ol>

<ul class="bullet-list">
    <li>This is an unordered list</li>
    <li>With a nested
      <ol class="bullet-list">
        <li>Ordered</li>
        <li>List</li>
      </ol>
    </li>
</ul>
html

Bare lists

Do not confuse this style with the .list-unstyled utility that removes all styles from the list, see below

Bare lists have no markers, but retains indentation for alignment.

  • Bare bullet lists
  • Do not have a marker
    • They still
    • Have indentation
<ul class="bullet-list bullet-list-bare">
    <li>Bare bullet lists</li>
    <li>Do not have a marker
      <ul>
        <li>They still</li>
        <li>Have indentation</li>
      </ul>
    </li>
</ul>
html

Text style

By default bullet lists text is displayed as body large and in bold, you can use the following classes to change these defaults.

Body medium

Add .fs-bm to the top ul to use body medium font size.

  • This is a list
  • With a smaller font size
<ul class="bullet-list fs-bm">
  <li>This is a list</li>
  <li>With a smaller font size</li>
</ul>
html

Font weight normal

Add .fw-normal to the top ul to use a normal font weight.

  • This is a list
  • With a normal font weight, you can put links and long texts in here, adding some words just to show how this will wrap
<ul class="bullet-list fw-normal">
  <li>This is a list</li>
  <li>With a normal font weight, you can put <a href="#">links</a> and long texts in here, adding some words just to show how this will wrap</li>
</ul>
html

Utilities

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>
html

Inline

Remove a list's bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

  • This is a list item.
  • And another one.
  • But they're displayed inline.
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>
html

Native list

Only use this where you can not add a class to <ul> and <ol>.

All lists—<ul>, <ol>, and <dl>—have their margin-top removed and a margin-bottom: 1rem. Nested lists have no margin-bottom. We've also reset the padding-left on <ul> and <ol> elements.

  • All lists have their top margin removed
  • And their bottom margin normalized
  • Nested lists have no bottom margin
    • This way they have a more even appearance
    • Particularly when followed by more list items
      • This way they have a more even appearance
      • Particularly when followed by more list items
  • The left padding has also been reset
  1. Here's an ordered list
  2. With a few list items
  3. It can also have
    1. Several nested list
    2. As you can see
      1. Lorem ipsum
      2. Deep nested
  4. As the previous unordered list