Ordered list
- Jobs, growth and investment
- Investment Plan for Europe: the Juncker Plan
- European Semester
- Digital single market
- Energy union and climate
- Security, solidarity and trust
- A fully-integrated internal energy market
- Energy efficiency
<ol class="ecl-ordered-list">
<li class="ecl-ordered-list__item">Jobs, growth and investment<ol class="ecl-ordered-list">
<li class="ecl-ordered-list__item">Investment Plan for Europe: the Juncker Plan</li>
<li class="ecl-ordered-list__item">European Semester</li>
</ol>
</li>
<li class="ecl-ordered-list__item">Digital single market</li>
<li class="ecl-ordered-list__item">Energy union and climate<ol class="ecl-ordered-list">
<li class="ecl-ordered-list__item">Security, solidarity and trust</li>
<li class="ecl-ordered-list__item">A fully-integrated internal energy market</li>
<li class="ecl-ordered-list__item">Energy efficiency</li>
</ol>
</li>
</ol>
Try it yourself on the playground
PlaygroundUnordered list
- Jobs, growth and investment
- Investment Plan for Europe: the Juncker Plan
- European Semester
- Digital single market
- Energy union and climate
- Security, solidarity and trust
- A fully-integrated internal energy market
- Energy efficiency
<ul class="ecl-unordered-list">
<li class="ecl-unordered-list__item">Jobs, growth and investment<ul class="ecl-unordered-list">
<li class="ecl-unordered-list__item">Investment Plan for Europe: the Juncker Plan</li>
<li class="ecl-unordered-list__item">European Semester</li>
</ul>
</li>
<li class="ecl-unordered-list__item">Digital single market</li>
<li class="ecl-unordered-list__item">Energy union and climate<ul class="ecl-unordered-list">
<li class="ecl-unordered-list__item">Security, solidarity and trust</li>
<li class="ecl-unordered-list__item">A fully-integrated internal energy market</li>
<li class="ecl-unordered-list__item">Energy efficiency</li>
</ul>
</li>
</ul>
Try it yourself on the playground
PlaygroundWithout bullet
<ul class="ecl-unordered-list ecl-unordered-list--no-bullet">
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Jobs, growth and
investment</a>
<ul class="ecl-unordered-list">
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Investment Plan for
Europe: the Juncker Plan</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">European
Semester</a></li>
</ul>
</li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Digital single
market</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Energy union and
climate</a>
<ul class="ecl-unordered-list">
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Security, solidarity
and trust</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">A fully-integrated
internal energy market</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Energy
efficiency</a></li>
</ul>
</li>
</ul>
Try it yourself on the playground
PlaygroundWith dividers
<ul class="ecl-unordered-list ecl-unordered-list--divider">
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Jobs, growth and
investment</a>
<ul class="ecl-unordered-list">
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Investment Plan for
Europe: the Juncker Plan</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">European
Semester</a></li>
</ul>
</li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Digital single
market</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Energy union and
climate</a>
<ul class="ecl-unordered-list">
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Security, solidarity
and trust</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">A fully-integrated
internal energy market</a></li>
<li class="ecl-unordered-list__item"><a class="ecl-link ecl-link--standalone" href="/example">Energy
efficiency</a></li>
</ul>
</li>
</ul>
Try it yourself on the playground
PlaygroundDescription list
<dl class="ecl-description-list" data-ecl-description-list="" data-ecl-description-list-more-label="See all items"
data-ecl-description-list-visible-items="3" data-ecl-auto-init="DescriptionList">
<dt class="ecl-description-list__term">Standard text</dt>
<dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, <a href="/example"
class="ecl-link">consectetur adipiscing elit</a>. Suspendisse ut sapien condimentum, aliquet turpis sit amet,
finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis</dd>
<dt class="ecl-description-list__term">Standalone links</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--link"
data-ecl-description-list-collapsible=""><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#copy"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#download"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#global"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#file"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#presentation"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></dd>
<dt class="ecl-description-list__term">Links inline</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--inline"
data-ecl-description-list-collapsible=""><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a></dd>
<dt class="ecl-description-list__term">Taxonomy list</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy"
data-ecl-description-list-collapsible=""><span class="ecl-description-list__definition-item">Taxonomy item
1</span><span class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item
2</a></span><span class="ecl-description-list__definition-item">Taxonomy item 3</span><span
class="ecl-description-list__definition-item">Taxonomy item 4</span><span
class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item 5</a></span></dd>
</dl>
Try it yourself on the playground
PlaygroundDescription list (horizontal)
- Standard text
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut sapien condimentum, aliquet turpis sit amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis
- Standalone links
- Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
- Links inline
- Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
- Taxonomy list
- Taxonomy item 1Taxonomy item 2Taxonomy item 3Taxonomy item 4
<dl class="ecl-description-list ecl-description-list--horizontal">
<dt class="ecl-description-list__term">Standard text</dt>
<dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, <a href="/example"
class="ecl-link">consectetur adipiscing elit</a>. Suspendisse ut sapien condimentum, aliquet turpis sit amet,
finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis</dd>
<dt class="ecl-description-list__term">Standalone links</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--link"><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#copy"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#download"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></dd>
<dt class="ecl-description-list__term">Links inline</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--inline"><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a></dd>
<dt class="ecl-description-list__term">Taxonomy list</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy"><span
class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item 1</a></span><span
class="ecl-description-list__definition-item">Taxonomy item 2</span><span
class="ecl-description-list__definition-item">Taxonomy item 3</span><span
class="ecl-description-list__definition-item"><a href="/example" class="ecl-link">Taxonomy item 4</a></span></dd>
</dl>
Try it yourself on the playground
Playground