Ouds 1.0 – Bullet list

Unordered lists

  • Item
  • Item
  • Item

Nested unordered lists

  • Bullet lists
  • Can have:
    • Nested lists
    • With:
      • Another marker
      • Each
  • That’s all

Marker color

  • Item
  • Item
    • Sub item
    • Sub item

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

Custom marker

CSS class

.bullet-list-heart { –bs-bullet-list-custom-marker: url(« data:image/svg+xml,« ); }
  • Heart item
    • Heart item
    • Heart item
  • Heart item

Inline SVG in ul

  • Heart item
  • Heart item

Different custom markers

.marker-calendar { –bs-bullet-list-custom-marker: url(« data:image/svg+xml,« ); } .marker-address-book { –bs-bullet-list-custom-marker: url(« data:image/svg+xml,« ); }
  • Calendar item
    • Item
    • Item
  • Address book item

Tick marker

Using SCSS

  • Task
  • Task 2
    • Sub item
    • Sub item

Using a custom marker

.bullet-with-tick { –bs-bullet-list-custom-marker: url(« data:image/svg+xml,« ); }
  • Task
  • Task
  • Task

Ordered lists

Default display

  1. Step
  2. Step
  3. Step
  4. Step
  5. Step
  6. Step

Nested ordered lists

  1. Category
  2. Category
    1. Subcategory
    2. Subcategory
      1. Sub subcategory
  3. Other category

Mixed lists

  1. This is an ordered list
  2. With a nested
    • Unordered
    • List
  • This is an unordered list
  • With a nested
    1. Ordered
    2. List

Bare lists

  • Bare bullet lists
  • Do not have a marker
    • They still
    • Have indentation

Text style

Body medium

  • This is a list
  • With a smaller font size

Font weight normal

  • 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

Utilities

Unstyled

  • 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.

Inline

  • This is a list item.
  • And another one.
  • But they’re displayed inline.