zurb-foundation-5/doc/includes/typography/examples_typography_lists.html

Foundation 5 for npm (no code modification from original repo)

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
<ul class="disc">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>
  ```
  {{/markdown}}  
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <ul class="disc">
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested list item</li>
          <li>Nested list item</li>
          <li>Nested list item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
<ul class="circle">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>
  ```
  {{/markdown}}  
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <ul class="circle">
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
<ul class="square">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>
  ```
  {{/markdown}}  
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <ul class="square">
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
<ul class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ul>
  ```
  {{/markdown}}  
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <ul class="no-bullet">
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ul>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ul>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>


<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
<ol>
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ol>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ol>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
 </ol>
  ```
  {{/markdown}}  
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <ol>
      <li>List item with a much longer description or more content.</li>
      <li>List item</li>
      <li>List item
        <ol>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
          <li>Nested List Item</li>
        </ol>
      </li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ol>
  </div>
</div>


<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
<dl>
  <dt>Definition Title</dt>
  <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
</dl>
  ```
  {{/markdown}}  
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
    <dl>
      <dt>Definition Title</dt>
      <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
    </dl>
  </div>
</div>