Lists - Components

Ordered list

Jobs, growth and investment
1. Investment Plan for Europe: the Juncker Plan
2. European Semester
Digital single market
Energy union and climate
1. Security, solidarity and trust
2. A fully-integrated internal energy market
3. 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

Playground

Unordered 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

Fullscreen

<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

Playground

Without bullet

Fullscreen

<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

Playground

With dividers

Fullscreen

<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

Playground

Description list

European Commission: The executive body of the European Union formed in 1967, which initiates action in the EU and mediates between member governments. Former name (until 1993): Commission of the European Communities
European Union
EU: An association of European nations formed in 1993 for the purpose of achieving political and economic integration.
Citizen: A native or naturalized member of a state or nation who owes allegiance to its government and is entitled to its protection; An inhabitant of a city or town, especially one entitled to its privileges or franchises.

Fullscreen

<dl class="ecl-description-list">
  <dt class="ecl-description-list__term">European Commission</dt>
  <dd class="ecl-description-list__definition">The executive body of the European Union formed in 1967, which initiates
    action in the EU and mediates between member governments. Former name (until 1993): Commission of the European
    Communities</dd>
  <dt class="ecl-description-list__term">European Union</dt>
  <dt class="ecl-description-list__term">EU</dt>
  <dd class="ecl-description-list__definition">An association of European nations formed in 1993 for the purpose of
    achieving political and economic integration.</dd>
  <dt class="ecl-description-list__term">Citizen</dt>
  <dd class="ecl-description-list__definition">A native or naturalized member of a state or nation who owes allegiance
    to its government and is entitled to its protection</dd>
  <dd class="ecl-description-list__definition">An inhabitant of a city or town, especially one entitled to its
    privileges or franchises.</dd>
</dl>

Try it yourself on the playground

Playground

Description list (horizontal)

European Commission: The executive body of the European Union formed in 1967, which initiates action in the EU and mediates between member governments. Former name (until 1993): Commission of the European Communities
European Union: An association of European nations formed in 1993 for the purpose of achieving political and economic integration.
Citizen: A native or naturalized member of a state or nation who owes allegiance to its government and is entitled to its protection

Fullscreen

<dl class="ecl-description-list ecl-description-list--horizontal">
  <dt class="ecl-description-list__term">European Commission</dt>
  <dd class="ecl-description-list__definition">The executive body of the European Union formed in 1967, which initiates
    action in the EU and mediates between member governments. Former name (until 1993): Commission of the European
    Communities</dd>
  <dt class="ecl-description-list__term">European Union</dt>
  <dd class="ecl-description-list__definition">An association of European nations formed in 1993 for the purpose of
    achieving political and economic integration.</dd>
  <dt class="ecl-description-list__term">Citizen</dt>
  <dd class="ecl-description-list__definition">A native or naturalized member of a state or nation who owes allegiance
    to its government and is entitled to its protection</dd>
</dl>

Try it yourself on the playground

Playground

Description list (taxonomy)

Science areas: Energy and transportStandards
Keywords: ElectricityElectromobilityEnergyEnergy storageSecurityTransportLow carbon

Fullscreen

<dl class="ecl-description-list ecl-description-list--taxonomy">
  <dt class="ecl-description-list__term">Science areas</dt>
  <dd class="ecl-description-list__definition"><span class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy
      and transport</span><span class="ecl-tag ecl-tag--display ecl-description-list__tag">Standards</span></dd>
  <dt class="ecl-description-list__term">Keywords</dt>
  <dd class="ecl-description-list__definition"><span
      class="ecl-tag ecl-tag--display ecl-description-list__tag">Electricity</span><span
      class="ecl-tag ecl-tag--display ecl-description-list__tag">Electromobility</span><span
      class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy</span><span
      class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy storage</span><span
      class="ecl-tag ecl-tag--display ecl-description-list__tag">Security</span><span
      class="ecl-tag ecl-tag--display ecl-description-list__tag">Transport</span><span
      class="ecl-tag ecl-tag--display ecl-description-list__tag">Low carbon</span></dd>
</dl>

Try it yourself on the playground

Playground