---
title: Lists
layout: common-ux-layout.hbs
---

<section class="sg-section">
  <h3>Check list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">
        {{>list_check text-contentful.data.fields.components.0.fields}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h2>In Text Content Box</h2>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <h3>Ordered list</h3>
      <div class="module-library-block" data-code="html">{{>text-content-list-ordered}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h3>Unordered list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>text-content-list-unordered}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h3>Link list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>text_content_link_list link-list-contentful}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h3>Ordered list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>list-ordered}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h3>Unordered list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>list-unordered}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h3>Unstyled list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>list-unstyled}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h3>Inline list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>list-inline}}</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h3>Key-value list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>list_key_value valueList=facts.facts
        className='col-double'}}</div>
    </div>
  </div>
</section>


<section class="sg-section">
  <h3>Key-value list</h3>
  <div class="sg-grid responsive">
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>list_key_value valueList=facts.facts
        className='grid-triple'}}</div>
    </div>
  </div>
</section>
</div>