Lists

<ol class="ecl-ordered-list">
  <li class="ecl-ordered-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit<ol
      class="ecl-ordered-list">
      <li class="ecl-ordered-list__item">Duis commodo nibh eget magna tincidunt, in volutpat diam consequat. Nulla in
        blandit leo. Quisque ultricies molestie porta</li>
      <li class="ecl-ordered-list__item">Phasellus suscipit eu augue nec suscipit</li>
    </ol>
  </li>
  <li class="ecl-ordered-list__item">Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis
    feugiat. Vivamus eget turpis a est lacinia blandit. Suspendisse tellus lorem, aliquam at ante quis, dignissim
    iaculis lectus. Duis pellentesque neque faucibus convallis scelerisque</li>
  <li class="ecl-ordered-list__item">Vestibulum sed accumsan ipsum. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia curae<ol class="ecl-ordered-list">
      <li class="ecl-ordered-list__item">Morbi vitae tortor accumsan</li>
      <li class="ecl-ordered-list__item">Nulla facilisi</li>
      <li class="ecl-ordered-list__item">Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus</li>
    </ol>
  </li>
</ol>

<ul class="ecl-unordered-list">
  <li class="ecl-unordered-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit<ul
      class="ecl-unordered-list">
      <li class="ecl-unordered-list__item">Duis commodo nibh eget magna tincidunt, in volutpat diam consequat. Nulla in
        blandit leo. Quisque ultricies molestie porta</li>
      <li class="ecl-unordered-list__item">Phasellus suscipit eu augue nec suscipit</li>
    </ul>
  </li>
  <li class="ecl-unordered-list__item">Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis
    feugiat. Vivamus eget turpis a est lacinia blandit. Suspendisse tellus lorem, aliquam at ante quis, dignissim
    iaculis lectus. Duis pellentesque neque faucibus convallis scelerisque</li>
  <li class="ecl-unordered-list__item">Vestibulum sed accumsan ipsum. Vestibulum ante ipsum primis in faucibus orci
    luctus et ultrices posuere cubilia curae<ul class="ecl-unordered-list">
      <li class="ecl-unordered-list__item">Morbi vitae tortor accumsan</li>
      <li class="ecl-unordered-list__item">Nulla facilisi</li>
      <li class="ecl-unordered-list__item">Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus</li>
    </ul>
  </li>
</ul>

<ul class="ecl-unordered-list ecl-unordered-list--no-marker">
  <li class="ecl-unordered-list__item">Lorem ipsum dolor sit amet, consectetur adipiscing elit<ul
      class="ecl-unordered-list">
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Duis commodo nibh eget magna</a></li>
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Phasellus suscipit</a></li>
    </ul>
  </li>
  <li class="ecl-unordered-list__item">Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis
    feugiat. Vivamus eget turpis a est lacinia blandit</li>
  <li class="ecl-unordered-list__item">Vestibulum sed accumsan ipsum<ul class="ecl-unordered-list">
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Morbi vitae tortor accumsan</a></li>
      <li class="ecl-unordered-list__item">Nulla facilisi</li>
      <li class="ecl-unordered-list__item">Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus</li>
    </ul>
  </li>
</ul>

<ul class="ecl-unordered-list ecl-unordered-list--divider">
  <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Lorem ipsum dolor sit amet, consectetur
      adipiscing elit</a>
    <ul class="ecl-unordered-list">
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Duis commodo nibh eget magna</a></li>
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Phasellus suscipit</a></li>
    </ul>
  </li>
  <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Nam dignissim condimentum pulvinar. Nullam
      volutpat tortor vel turpis iaculis feugiat. Vivamus eget turpis a est lacinia blandit</a></li>
  <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Vestibulum sed accumsan ipsum</a>
    <ul class="ecl-unordered-list">
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Morbi vitae tortor accumsan</a></li>
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Nulla facilisi</a></li>
      <li class="ecl-unordered-list__item"><a class="ecl-link" href="/example">Phasellus in metus et libero scelerisque
          sagittis sollicitudin at lectus</a></li>
    </ul>
  </li>
</ul>

<dl class="ecl-description-list" data-ecl-description-list
  data-ecl-description-list-more-label="See all items" data-ecl-description-list-visible-items="2"
  data-ecl-auto-init="DescriptionList">
  <dt class="ecl-description-list__term">Label 01</dt>
  <dd class="ecl-description-list__definition">Descriptive text with <a href="/example" class="ecl-link">inline link</a>
  </dd>
  <dt class="ecl-description-list__term">Label 02</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 03</dt>
  <dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt.</dd>
  <dt class="ecl-description-list__term">Label 04</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><span class="ecl-link__label">Standalone link</span><svg
            class="ecl-icon ecl-icon--2xs ecl-link__icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.aa842b0d.svg#external"></use>
          </svg></a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 05</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--inline">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 1</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 2</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 3</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 4</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 06</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link ecl-link--standalone">Very
          very very very very very very very very very very very veryveryveryvery long standalone link that wraps in
          multiple lines</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 07</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#facebook"></use>
          </svg><span class="ecl-link__label">social network 1</span></a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#twitter"></use>
          </svg><span class="ecl-link__label">social network 2</span></a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#mastodon"></use>
          </svg><span class="ecl-link__label">social network 3</span></a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 08</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--tag">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Long link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Long link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 09</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item">Taxonomy item</li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item</a></li>
      <li class="ecl-description-list__definition-item">Taxonomy item</li>
      <li class="ecl-description-list__definition-item">Taxonomy item</li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item</a></li>
    </ul>
  </dd>
</dl>

<dl class="ecl-description-list ecl-description-list--horizontal" data-ecl-description-list
  data-ecl-description-list-more-label="See all items" data-ecl-description-list-visible-items="2"
  data-ecl-auto-init="DescriptionList">
  <dt class="ecl-description-list__term">Label 01</dt>
  <dd class="ecl-description-list__definition">Descriptive text with <a href="/example" class="ecl-link">inline link</a>
  </dd>
  <dt class="ecl-description-list__term">Label 02</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 03</dt>
  <dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt.</dd>
  <dt class="ecl-description-list__term">Label 04</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><span class="ecl-link__label">Standalone link</span><svg
            class="ecl-icon ecl-icon--2xs ecl-link__icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.aa842b0d.svg#external"></use>
          </svg></a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 05</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--inline">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 1</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 2</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 3</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone">Standalone link 4</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 06</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link ecl-link--standalone">Very
          very very very very very very very very very very very veryveryveryvery long standalone link that wraps in
          multiple lines</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 07</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--link">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#facebook"></use>
          </svg><span class="ecl-link__label">social network 1</span></a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#twitter"></use>
          </svg><span class="ecl-link__label">social network 2</span></a></li>
      <li class="ecl-description-list__definition-item"><a href="/example"
          class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
            focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#mastodon"></use>
          </svg><span class="ecl-link__label">social network 3</span></a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 08</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--tag">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Long link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Long link tag</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-tag">Link tag</a></li>
    </ul>
  </dd>
  <dt class="ecl-description-list__term">Label 09</dt>
  <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy">
    <ul class="ecl-description-list__definition-list" data-ecl-description-list-collapsible>
      <li class="ecl-description-list__definition-item">Taxonomy item</li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item</a></li>
      <li class="ecl-description-list__definition-item">Taxonomy item</li>
      <li class="ecl-description-list__definition-item">Taxonomy item</li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item</a></li>
      <li class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item</a></li>
    </ul>
  </dd>
</dl>