Styleguide

Lists

Ordered

  1. Item one
  2. Item two
    1. Item two:a
    2. Item two:b
    3. Item two:c
  3. Item three
%ol
  %li Item one
  %li Item two
  %ol
    %li Item two:a
    %li Item two:b
    %li Item two:c
  %li Item three

<ol>
  <li>Item one</li>
  <li>Item two</li>
  <ol>
    <li>Item two:a</li>
    <li>Item two:b</li>
    <li>Item two:c</li>
  </ol>
  <li>Item three</li>
</ol>

Unordered

  • Item one
  • Item two
    • Item two:a
    • Item two:b
    • Item two:c
  • Item three
%ul
  %li Item one
  %li Item two
  %ul
    %li Item two:a
    %li Item two:b
    %li Item two:c
  %li Item three

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <ul>
    <li>Item two:a</li>
    <li>Item two:b</li>
    <li>Item two:c</li>
  </ul>
  <li>Item three</li>
</ul>

Bare

  • Item one
  • Item two
    • Item two:a
    • Item two:b
    • Item two:c
  • Item three
%ul.bare-list
  %li Item one
  %li Item two
  %ul.bare-list
    %li Item two:a
    %li Item two:b
    %li Item two:c
  %li Item three

<ul class='bare-list'>
  <li>Item one</li>
  <li>Item two</li>
  <ul class='bare-list'>
    <li>Item two:a</li>
    <li>Item two:b</li>
    <li>Item two:c</li>
  </ul>
  <li>Item three</li>
</ul>

Dotted Line

  • Item one
  • Item two
    • Item two:a
    • Item two:b
    • Item two:c
  • Item three
%ul.bare-list
  %li Item one
  %li Item two
  %ul.list--dotted-line
    %li Item two:a
    %li Item two:b
    %li Item two:c
  %li Item three

<ul class='bare-list'>
  <li>Item one</li>
  <li>Item two</li>
  <ul class='list--dotted-line'>
    <li>Item two:a</li>
    <li>Item two:b</li>
    <li>Item two:c</li>
  </ul>
  <li>Item three</li>
</ul>