<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>An ordered list with varying list styles for each level (up to three levels deep). Commonly used for terms and conditions or any content that requires clear differentiation.
<div class="ds-block">
<p>An ordered list:</p>
<ol class="ds-ordered-list-mixed">
<li>list item</li>
<li>list item</li>
<li>Nested ordered list (second-level: alphabetical)
<ol>
<li>list item</li>
<li>list item</li>
<li>Nested ordered list (third level: lower-case roman)
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</li>
</ol>
</li>
<li>list item</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>