List

<div class="ds-block">

    <p>An ordered list:</p>
    <ol>
        <li>list item </li>
        <li>list item
            <ol>
                <li>Nested unordered list
                    <ol>
                        <li>list item</li>
                        <li>Nested unordered list
                            <ol>
                                <li>list item</li>
                                <li>list item</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>list item
            <ul>
                <li>Nested ordered list
                    <ul>
                        <li>list item</li>
                        <li>Nested ordered list
                            <ul>
                                <li>list item</li>
                                <li>list item</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>list item</li>
    </ul>


</div>

<div class="ds-block">

    <p>An unordered list:</p>
    <ul>
        <li>list item </li>
        <li>list item
            <ul>
                <li>Nested unordered list
                    <ul>
                        <li>list item</li>
                        <li>Nested unordered list
                            <ul>
                                <li>list item</li>
                                <li>list item</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>list item
            <ol>
                <li>Nested ordered list
                    <ol>
                        <li>list item</li>
                        <li>Nested ordered list
                            <ol>
                                <li>list item</li>
                                <li>list item</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>list item</li>
    </ul>

</div>

<div class="ds-block">

  <dl title="Nautical terms">
    <dt>Knot</dt>
    <dd>
      <p>A <em>knot</em> is a unit of speed equaling 1 
      nautical mile per hour (1.15 miles per hour or 1.852 
      kilometers per hour).</p>
    </dd>
    <dt>Port</dt>
    <dd>
      <p><em>Port</em> is the nautical term (used on 
      boats and ships) that refers to the left side
      of a ship, as perceived by a person facing towards 
      the bow (the front of the vessel).</p>
    </dd>
    <dt>Starboard</dt>
    <dd>
      <p><em>Starboard</em> is the nautical term (used 
      on boats and ships) that refers to the right 
      side of a vessel, as perceived by a person 
      facing towards the bow (the front of the vessel).</p>
    </dd>
  </dl>

</div>

<div class="ds-block">

    <p>A tick list:</p>
    <ul class="ds-tick-list">
        <li>list item</li>
        <li>list item</li>
        <li class="ds-ticklist__cross">list item</li>
        <li>list item</li>
    </ul>

</div>

<div class="ds-block">

    <p>Two column list:</p>
    <div class="ds-list ds-list--two-col">
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
        </ul>
    </div>

    <p>Three column list:</p>
    <div class="ds-list ds-list--three-col">
        <ul class="ds-tick-list">
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
        </ul>
    </div>

    <p>Four column list:</p>
    <div class="ds-list ds-list--four-col">
        <ol>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 1</li>
            <li>list item 2</li>
        </ol>
    </div>

</div>