Demo Style Guide

1.2 Bases.Lists List

Default style for ordered and unordered lists.

Example

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.
Wath if some paragraphs are in the list?
- Item 0
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- - Item 0
  - Item 1
  - Item 2
  - Item 3
  - Item 4
  - Item 5

Item 0
Item 1
Item 2
Item 3
Item 4
Item 5
An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.
Wath if some paragraphs are in the list?
1. Item 0
2. Item 1
3. Item 2
4. Item 3
5. Item 4
6. Item 5
7. 1. Item 0
  2. Item 1
  3. Item 2
  4. Item 3
  5. Item 4
  6. Item 5

Markup

  <ul>
          <li>Item 0</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        <li> An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.</li>
    <li>
      <p>Wath if some paragraphs are in the list?</p>
    </li>
    <li>
      <ul>
                  <li>Item 0</li>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                  <li>
            <ul>
                              <li>Item 0</li>
                              <li>Item 1</li>
                              <li>Item 2</li>
                              <li>Item 3</li>
                              <li>Item 4</li>
                              <li>Item 5</li>
                          </ul>
          </li>
      </ul>
    </li>
  </ul>
  <ol>
          <li>Item 0</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        <li> An other item but with more text to show you how the list element will look like it a sentence need to go to a new line.</li>
    <li>
      <p>Wath if some paragraphs are in the list?</p>
    </li>
    <li>
      <ol>
                  <li>Item 0</li>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
                  <li>
            <ol>
                              <li>Item 0</li>
                              <li>Item 1</li>
                              <li>Item 2</li>
                              <li>Item 3</li>
                              <li>Item 4</li>
                              <li>Item 5</li>
                          </ol>
          </li>
      </ol>
    </li>
  </ol>

Source: _bases/_list.scss, line 1