Style Guide

Components & Shortcodes
Internal Reference
Modules
External Reference

Lists

Table of Contents

Standard Markup

  1. Fee
  2. Fi
  3. Fo
  4. Fum
  1. first item
  2. second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  3. third item
  1. first item
  2. second item
    • second item first subitem
    • second item second subitem
    • second item third subitem
  3. third item
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>


<ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Arrow Markup

  • Fee
  • Fi
  • Fo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus libero, rhoncus ac dui ut, semper tincidunt velit. Sed sit amet vestibulum diam. Aliquam eget lacus volutpat, eleifend dui in, maximus risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rhoncus mi nulla, vitae mollis est varius vel. Vivamus imperdiet elementum tortor, eget vestibulum neque auctor commodo.
  • Fum
    • second item first subitem
    • second item second subitem
    • second item third subitem
  • Foo
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  • Foo
    • second item first subitem
    • second item second subitem
    • second item third subitem
<ul class="list-arrows">
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus libero, rhoncus ac dui ut, semper tincidunt velit. Sed sit amet vestibulum diam. Aliquam eget lacus volutpat, eleifend dui in, maximus risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rhoncus mi nulla, vitae mollis est varius vel. Vivamus imperdiet elementum tortor, eget vestibulum neque auctor commodo.</li>
  <li>Fum
        <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
    <li>Foo
        <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
      <li>Foo
        <ul class="list-arrows">
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
</ul>

Timeline Markup

  • Fee
  • Fi
  • Fo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus libero, rhoncus ac dui ut, semper tincidunt velit. Sed sit amet vestibulum diam. Aliquam eget lacus volutpat, eleifend dui in, maximus risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rhoncus mi nulla, vitae mollis est varius vel. Vivamus imperdiet elementum tortor, eget vestibulum neque auctor commodo.
  • Fum
    • second item first subitem
    • second item second subitem
    • second item third subitem
  • Foo
    • second item first subitem
    • second item second subitem
    • second item third subitem
  • Foo
    • second item first subitem
    • second item second subitem
    • second item third subitem
<ul class="list-timeline">
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus libero, rhoncus ac dui ut, semper tincidunt velit. Sed sit amet vestibulum diam. Aliquam eget lacus volutpat, eleifend dui in, maximus risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse rhoncus mi nulla, vitae mollis est varius vel. Vivamus imperdiet elementum tortor, eget vestibulum neque auctor commodo.</li>
  <li>Fum
        <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
    <li>Foo
        <ul class="list-arrows">
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
      <li>Foo
        <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
</ul>