Lists - Components

Ordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit
1. Duis commodo nibh eget magna tincidunt, in volutpat diam consequat. Nulla in blandit leo. Quisque ultricies molestie porta
2. Phasellus suscipit eu augue nec suscipit
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
Vestibulum sed accumsan ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae
1. Morbi vitae tortor accumsan
2. Nulla facilisi
3. Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus

<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>

Try it yourself on the playground

Playground

Unordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Duis commodo nibh eget magna tincidunt, in volutpat diam consequat. Nulla in blandit leo. Quisque ultricies molestie porta
- Phasellus suscipit eu augue nec suscipit
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
Vestibulum sed accumsan ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae
- Morbi vitae tortor accumsan
- Nulla facilisi
- Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus

Fullscreen

<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>

Try it yourself on the playground

Playground

Unstyled

Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Duis commodo nibh eget magna
- Phasellus suscipit
Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis feugiat. Vivamus eget turpis a est lacinia blandit
Vestibulum sed accumsan ipsum
- Morbi vitae tortor accumsan
- Nulla facilisi
- Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus

Fullscreen

<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"><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">Nulla facilisi</li>
      <li class="ecl-unordered-list__item">Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus</li>
    </ul>
  </li>
</ul>

Try it yourself on the playground

Playground

With dividers

Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Duis commodo nibh eget magna
- Phasellus suscipit
Nam dignissim condimentum pulvinar. Nullam volutpat tortor vel turpis iaculis feugiat. Vivamus eget turpis a est lacinia blandit
Vestibulum sed accumsan ipsum
- Morbi vitae tortor accumsan
- Nulla facilisi
- Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus

Fullscreen

<ul class="ecl-unordered-list ecl-unordered-list--divider">
  <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"><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">Nulla facilisi</li>
      <li class="ecl-unordered-list__item">Phasellus in metus et libero scelerisque sagittis sollicitudin at lectus</li>
    </ul>
  </li>
</ul>

Try it yourself on the playground

Playground

Description list

Fullscreen

<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="false" role="img">
            <title>Link to an external domain</title>
            <use xlink:href="/dist/media/icons.e3d8f25c.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.a7d77119.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.a7d77119.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.a7d77119.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>

Try it yourself on the playground

Playground

Description list (horizontal)

Fullscreen

<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="false" role="img">
            <title>Link to an external domain</title>
            <use xlink:href="/dist/media/icons.e3d8f25c.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.a7d77119.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.a7d77119.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.a7d77119.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>

Try it yourself on the playground

Playground