{% load i18n %}

<div class="col-md-4">
  <h3>{% trans "Ordered List" %}</h3>
  <ol>
    <li>Ordered list</li>
    <li>Here's a nested unordered list
      <ul>
        <li>Nested Unordered list</li>
        <li>Nested ordered list
          <ol>
            <li>The first</li>
            <li>And the second</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Ordered List item</li>
    <li>Nested Ordered list
      <ol>
        <li>Some point</li>
        <li>Nested Unordered list
          <ul>
            <li>The first</li>
            <li>And the second</li>
          </ul>
        </li>
      </ol>
    </li>
  </ol>
</div>

<div class="col-md-4">
  <h3>{% trans "Unordered List" %}</h3>
  <ul>
    <li>Unordered list test</li>
    <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Yet another element in the list</li>
    <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  </ul>
  <h3>{% trans "Definition List" %}</h3>
  <dl>
    <dt>definition list dt</dt>
    <dd>definition list dd</dd>
    <dt>definition list dt</dt>
    <dd>definition list dd</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd>
    <dt>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit</dd>
  </dl>
</div>

<div class="col-md-4">
  <h3>{% trans "Custom List" %}</h3>
  <ul class="arrow">
    <li>Unordered list test</li>
    <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Yet another element in the list</li>
    <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  </ul>
  <ul class="angle">
    <li>Unordered list test</li>
    <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Yet another element in the list</li>
    <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  </ul>
</div>