Unordered List

  • List item 1
  • List item 2
    • Nested item 2-1
    • Nested item 2-2
      • Deeply nested item
  • List item 3
scss/canvas/component/_list.scss

Ordered List

  1. First item
  2. Second item
    1. Nested numbered item 1
    2. Nested numbered item 2
  3. Third item
scss/canvas/component/_list.scss

CSS Variables

CSS Variable Default
--ul-indent 1.1em
--ol-indent 1.1em
--ul-li-padding-left 0.2em
--ol-li-padding-left 0.2em
scss/canvas/component/_list.scss

Customization Example

Override indent and padding:

---
style: |
  :root {
    --ul-indent: 2em;
    --ul-li-padding-left: 0.5em;
  }
---
  • This list has larger indent
    • Nested items are also affected
    • More spacing from bullet
scss/canvas/component/_list.scss

Fragment List (Click to reveal)

Use * instead of - for unordered lists to reveal items one by one:

  • First item (appears first)
  • Second item (click to reveal)
  • Third item (click to reveal)
scss/canvas/component/_list.scss