Bullet list

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

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 24 24'><path d='M12 20a.63.63 0 0 1-.462-.2l-8.16-8.754A5.427 5.427 0 0 1 2 7.436C2 4.439 4.449 2 7.46 2c1.846 0 3.543.938 4.54 2.428A5.476 5.476 0 0 1 16.54 2c.349 0 .63.28.63.627a.629.629 0 0 1-.63.627 4.205 4.205 0 0 0-3.947 2.77.63.63 0 0 1-1.186 0 4.205 4.205 0 0 0-3.948-2.77c-2.316 0-4.2 1.876-4.2 4.182 0 1.02.374 2.003 1.052 2.768L12 18.451l7.699-8.258a4.174 4.174 0 0 0 .058-5.446.626.626 0 0 1 .077-.884.632.632 0 0 1 .887.076 5.418 5.418 0 0 1-.088 7.095L12.462 19.8A.63.63 0 0 1 12 20Z'/><path d='M5.274 8.512a.472.472 0 0 1-.465-.394 3.078 3.078 0 0 1 3.04-3.571c.073 0 .145.006.217.014l.054.005a.47.47 0 0 1 .429.51.475.475 0 0 1-.512.427l-.066-.006c-.04-.004-.081-.01-.123-.01a2.134 2.134 0 0 0-2.107 2.478.47.47 0 0 1-.467.547Z'/></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 24 24'%3E%3Cpath d='M12 20a.63.63 0 0 1-.462-.2l-8.16-8.754A5.427 5.427 0 0 1 2 7.436C2 4.439 4.449 2 7.46 2c1.846 0 3.543.938 4.54 2.428A5.476 5.476 0 0 1 16.54 2c.349 0 .63.28.63.627a.629.629 0 0 1-.63.627 4.205 4.205 0 0 0-3.947 2.77.63.63 0 0 1-1.186 0 4.205 4.205 0 0 0-3.948-2.77c-2.316 0-4.2 1.876-4.2 4.182 0 1.02.374 2.003 1.052 2.768L12 18.451l7.699-8.258a4.174 4.174 0 0 0 .058-5.446.626.626 0 0 1 .077-.884.632.632 0 0 1 .887.076 5.418 5.418 0 0 1-.088 7.095L12.462 19.8A.63.63 0 0 1 12 20Z'/%3E%3Cpath d='M5.274 8.512a.472.472 0 0 1-.465-.394 3.078 3.078 0 0 1 3.04-3.571c.073 0 .145.006.217.014l.054.005a.47.47 0 0 1 .429.51.475.475 0 0 1-.512.427l-.066-.006c-.04-.004-.081-.01-.123-.01a2.134 2.134 0 0 0-2.107 2.478.47.47 0 0 1-.467.547Z'/%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 24 24'><path d='M19.333 23H4.667C3.197 23 2 21.822 2 20.375V5.937C2 4.49 3.196 3.313 4.667 3.313h1.125c.368 0 .666.293.666.656a.661.661 0 0 1-.666.656H4.667c-.736 0-1.333.588-1.334 1.312v14.438c.001.724.598 1.312 1.334 1.313h14.666c.736-.001 1.333-.588 1.334-1.313V5.937c-.001-.724-.598-1.311-1.334-1.312h-1.666v.656a.662.662 0 0 1-.667.642.662.662 0 0 1-.667-.642V2.656c0-.362.299-.656.667-.656.368 0 .667.294.667.656v.657h1.666C20.803 3.313 22 4.49 22 5.937v14.438C22 21.822 20.804 23 19.333 23ZM15.48 12.418h3.125c.046 0 .084.037.084.082v1.846a.083.083 0 0 1-.084.082H15.48a.083.083 0 0 1-.083-.082V12.5c0-.045.037-.082.083-.082Zm3.209-3.61v1.846a.083.083 0 0 1-.084.082H15.48a.083.083 0 0 1-.083-.082V8.81c0-.046.037-.082.083-.082h3.125c.046 0 .084.036.084.082Zm-8.292 0c0-.045.037-.081.083-.081h3.125c.046 0 .084.036.084.082v1.845a.083.083 0 0 1-.084.082H10.48a.083.083 0 0 1-.083-.082V8.81Zm.083 7.302h3.125c.046 0 .084.036.084.082v1.845a.083.083 0 0 1-.084.082H10.48a.083.083 0 0 1-.083-.082v-1.845c0-.046.037-.082.083-.082Zm-.083-3.61c0-.045.037-.082.083-.082h3.125c.046 0 .084.037.084.082v1.846a.083.083 0 0 1-.084.082H10.48a.083.083 0 0 1-.083-.082V12.5Zm-5-3.691c0-.046.037-.082.083-.082h3.125c.046 0 .083.036.083.082v1.845a.083.083 0 0 1-.083.082H5.48a.083.083 0 0 1-.083-.082V8.81Zm.083 7.3h3.125c.046 0 .083.037.083.083v1.845a.083.083 0 0 1-.083.082H5.48a.083.083 0 0 1-.083-.082v-1.845c0-.046.037-.082.083-.082ZM5.396 12.5c0-.045.037-.082.083-.082h3.125c.046 0 .083.037.083.082v1.846a.083.083 0 0 1-.083.082H5.48a.083.083 0 0 1-.083-.082V12.5ZM14 4.625H9.667v.656A.662.662 0 0 1 9 5.938a.662.662 0 0 1-.667-.657V2.656A.662.662 0 0 1 9 2.015c.363 0 .659.285.667.641v.657H14a.67.67 0 0 1 .595.322.648.648 0 0 1 0 .668.67.67 0 0 1-.595.322Z'/></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 24 24'><path d='M16.289 12.085c.042.039.226.222.295.3.035.04.38.479.512.729.028.055.121.26.153.346.024.063.121.414.133.487v.002c.023.135.034.257.034.371 0 1.505-1.461 2.368-4.009 2.368s-4.01-.863-4.01-2.368c0-1.142.943-2.416 2.333-3.018a2.857 2.857 0 0 1-.574-1.74c0-1.444 1.01-2.619 2.251-2.619 1.24 0 2.25 1.175 2.25 2.619 0 .669-.219 1.279-.575 1.742.313.136.612.308.889.516.048.036.246.2.318.265Zm-2.882-3.913c-.551 0-1.017.636-1.017 1.39 0 .752.466 1.388 1.017 1.388.55 0 1.016-.636 1.016-1.389s-.466-1.389-1.016-1.389Zm2.045 4.817a3.057 3.057 0 0 0-2.045-.81c-1.584 0-2.776 1.299-2.776 2.14 0 .84 1.434 1.14 2.776 1.14 1.341 0 2.775-.3 2.775-1.14a.984.984 0 0 0-.014-.152 9.931 9.931 0 0 0-.081-.297 6.93 6.93 0 0 0-.089-.195 5.715 5.715 0 0 0-.35-.489 6.323 6.323 0 0 0-.196-.197Zm5.681-5.514c.34 0 .617.275.617.615v11.815c0 .974-.795 1.767-1.773 1.767H6.234a1.772 1.772 0 0 1-1.773-1.767v-1.53H3.94A.941.941 0 0 1 3 17.44a.94.94 0 0 1 .94-.936h.52v-3.751h-.52a.94.94 0 0 1-.94-.937c0-.515.423-.936.94-.936h.52v-3.75h-.52A.941.941 0 0 1 3 6.191c0-.515.423-.937.94-.937h.52V3.767C4.46 2.793 5.257 2 6.235 2h13.743c.978 0 1.773.793 1.773 1.767V4.92a.616.616 0 0 1-1.234 0V3.767a.54.54 0 0 0-.54-.537H6.235a.54.54 0 0 0-.54.537v1.488h.812a.94.94 0 0 1 .94.937.94.94 0 0 1-.94.936h-.812v3.75h.812a.94.94 0 0 1 .94.938.94.94 0 0 1-.94.936h-.812v3.75h.812a.94.94 0 0 1 .94.937.94.94 0 0 1-.94.937h-.812v1.529a.54.54 0 0 0 .54.538h13.743a.54.54 0 0 0 .54-.538V8.09c0-.34.275-.615.616-.615Z'/></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 24 24'><path fill-rule='evenodd' d='M17.934 5.583 9.262 15.14l-3.228-3.552c-.415-.44-1.41-.489-1.958.128-.544.614-.332 1.485.082 1.922l4.182 4.614c.208.22.667.498.94.498.272 0 .672-.24.88-.46l9.676-10.643c.414-.439.637-1.344.083-1.943-.561-.609-1.57-.56-1.985-.121Z'/></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

Step
Step
Step
Step
Step
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

Category
Category
1. Subcategory
2. Subcategory
  1. Sub subcategory
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.

This is an ordered list
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

Here's an ordered list
With a few list items
It can also have
1. Several nested list
2. As you can see
  1. Lorem ipsum
  2. Deep nested
As the previous unordered list

Bullet list

On this page On this page

Overview

Unordered lists

Default display

Nested unordered lists

Marker color

Custom marker

CSS class

Inline SVG in ul

Different custom markers

Tick marker

Using SCSS

Using a custom marker

Ordered lists

Default display

Nested ordered lists

Mixed lists

Bare lists

Text style

Body medium

Font weight normal

Utilities

Unstyled

Inline

Native list

On this page

Inline SVG in `ul`