<!-- Default -->
<h2 class="label">Default</h2>

<ol class="">
    <li>Example List Item</li>
    <li>Example List Item</li>
    <li>Example List Item</li>
    <li>Example List Item</li>
</ol>

<!-- Alpha Low -->
<h2 class="label">Alpha Low</h2>

<ol class="alpha-low">
    <li>Alpha Low List Items</li>
    <li>Alpha Low List Items</li>
    <li>Alpha Low List Items</li>
    <li>Alpha Low List Items</li>
</ol>

<!-- Alpha Upper -->
<h2 class="label">Alpha Upper</h2>

<ol class="alpha-upper">
    <li>Alpha Upper List Items</li>
    <li>Alpha Upper List Items</li>
    <li>Alpha Upper List Items</li>
    <li>Alpha Upper List Items</li>
</ol>

<!-- Decimal -->
<h2 class="label">Decimal</h2>

<ol class="decimal">
    <li>Decimal List Items</li>
    <li>Decimal List Items</li>
    <li>Decimal List Items</li>
    <li>Decimal List Items</li>
</ol>

<!-- Decimal Zero -->
<h2 class="label">Decimal Zero</h2>

<ol class="decimal-zero">
    <li>Decimal Zero List Items</li>
    <li>Decimal Zero List Items</li>
    <li>Decimal Zero List Items</li>
    <li>Decimal Zero List Items</li>
</ol>

<!-- None -->
<h2 class="label">No Style</h2>

<ol class="none">
    <li>No list style List Items</li>
    <li>No list style List Items</li>
    <li>No list style List Items</li>
    <li>No list style List Items</li>
</ol>

<!-- Roman Low -->
<h2 class="label">Roman Low</h2>

<ol class="roman-low">
    <li>Roman Low List Items</li>
    <li>Roman Low List Items</li>
    <li>Roman Low List Items</li>
    <li>Roman Low List Items</li>
</ol>

<!-- Roman Upper -->
<h2 class="label">Roman Upper</h2>

<ol class="roman-upper">
    <li>Roman Upper List Items</li>
    <li>Roman Upper List Items</li>
    <li>Roman Upper List Items</li>
    <li>Roman Upper List Items</li>
</ol>

<!-- Special Numbers -->
<h2 class="label">Special Numbers</h2>

<ol class="number-list">
    <li>Special Number List Items</li>
    <li>Special Number List Items</li>
    <li>Special Number List Items</li>
    <li>Special Number List Items</li>
</ol>

<!-- Step List -->
<h2 class="label">Step List</h2>

<ol class="step-list">
    <li>Step List Items</li>
    <li>Step List Items</li>
    <li>Step List Items</li>
    <li>Step List Items</li>
</ol>

<!-- Timeline -->
<ol class="timeline">
    <li>
        <h3>July</h3>
        <p>- Something important happened</p>
    </li>
    <li>
        <h3>August</h3>
        <p><span>Reminds me of sesame street</span></p>
        <p>More details required</p>
    </li>
    <li>
        <h3>September</h3>
        <p>Three Things!! hahaha</p>
    </li>
    <li>
        <h3>October</h3>
        <p>Four Things! hahaha</p>
    </li>
    <li>
        <h2>November</h2>
        <p>Works fine with just text too.</p>
    </li>
    <li>
        <h2>December</h2>
        <p>All essential learning activities, learning content and learning tools for your subject are found within this site. Your Subject Outline (in the left-side navigation menu) is the first document you need to read before commencing to study. The
            Subject Outline is an accurate and historical record of the curriculum and scope of your subject, and should be available 14 days before the start of a study session.</p>
    </li>
</ol>

<!-- Default -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Alpha Low -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Alpha Upper -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Decimal -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Decimal Zero -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- None -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Roman Low -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Roman Upper -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Special Numbers -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Step List -->
<h2 class="label">{{ modifier }}</h2>

<ol class="{{ class }}">
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
  <li>{{ text }}</li>
</ol>

<!-- Timeline -->
<ol class="timeline">
  <li>
    <h3>July</h3>
    <p>- Something important happened</p>
  </li>
  <li>
    <h3>August</h3>
    <p><span>Reminds me of sesame street</span></p>
    <p>More details required</p>
  </li>
  <li>
    <h3>September</h3>
    <p>Three Things!! hahaha</p>
  </li>
  <li>
    <h3>October</h3>
    <p>Four Things! hahaha</p>
  </li>
  <li>
    <h2>November</h2>
    <p>Works fine with just text too.</p>
  </li>
  <li>
    <h2>December</h2>
    <p>All essential learning activities, learning content and learning tools for your subject are found within this site. Your Subject Outline (in the left-side navigation menu) is the first document you need to read before commencing to study. The
      Subject Outline is an accurate and historical record of the curriculum and scope of your subject, and should be available 14 days before the start of a study session.</p>
  </li>
</ol>

A variety of numerical systems can be applied to Ordered Lists using classes. This enables them to be changed quickly by simply changing the class rather than adding letters and numbers to each list item.