EU System

Rich Text Lists

Documentation • Demo

Rich Text Lists

Lists display related content. This can be done either in an ordered or an unordered way.

This section only talks about Rich Text Lists, which are mainly used to bring structure and scannability into a piece of content. If you want to use lists to for displaying data from similar content types, or for navigation - check out the relevant components.

Unordered lists

Bullet points help break up large blocks of text, make complex articles and blog posts easier to grasp, and make key information stand out.

  • lorem
  • ipsum
  • dolor

Ordered lists

Only use numbered lists when there is a sequence in the list of items.

An ordered list can be numerical or alphabetical.

  1. lorem
  2. ipsum
  3. dolor
  1. lorem
  2. ipsum
  3. dolor
<h3 class="ecl-heading ecl-heading--h3">Unordered list</h3>

<ul class="ecl-list">
  <li>Item 1</li>
  <li>Item 2
    <ul class="ecl-list">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
    </ul>
  </li>
</ul>

<h3 class="ecl-heading ecl-heading--h3">Unstyled list</h3>

<ul class="ecl-list ecl-list--unstyled">
  <li>Item 1</li>
  <li>Item 2
    <ul class="ecl-list ecl-list--unstyled">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
    </ul>
  </li>
</ul>

<h3 class="ecl-heading ecl-heading--h3">Inline list</h3>

<ul class="ecl-list ecl-list--inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<h3 class="ecl-heading ecl-heading--h3">Ordered list</h3>

<ol class="ecl-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol class="ecl-list">
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ol>
  </li>
</ol>

<h3 class="ecl-heading ecl-heading--h3">Ordered list (alpha)</h3>

<ol class="ecl-list ecl-list--alpha">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol class="ecl-list ecl-list--alpha">
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ol>
  </li>
</ol>
 
/* No context defined for this component. */
 
<h3 class="ecl-heading ecl-heading--h3">Unordered list</h3>

<ul class="ecl-list">
  <li>Item 1</li>
  <li>Item 2
    <ul class="ecl-list">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
    </ul>
  </li>
</ul>

<h3 class="ecl-heading ecl-heading--h3">Unstyled list</h3>

<ul class="ecl-list ecl-list--unstyled">
  <li>Item 1</li>
  <li>Item 2
    <ul class="ecl-list ecl-list--unstyled">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
      <li>Item 2.3</li>
    </ul>
  </li>
</ul>

<h3 class="ecl-heading ecl-heading--h3">Inline list</h3>

<ul class="ecl-list ecl-list--inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<h3 class="ecl-heading ecl-heading--h3">Ordered list</h3>

<ol class="ecl-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol class="ecl-list">
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ol>
  </li>
</ol>

<h3 class="ecl-heading ecl-heading--h3">Ordered list (alpha)</h3>

<ol class="ecl-list ecl-list--alpha">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ol class="ecl-list ecl-list--alpha">
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ol>
  </li>
</ol>
  • Content: 
    @import '@ecl/eu-base/eu-base';
@import '@ecl/generic-style-typography-list/generic-style-typography-list--editor';

@include exports('eu-style-typography-list--editor') {
  @include ecl-editor-typography-list();
}
  • URL: /components/raw/eu-style-typography-list/eu-style-typography-list--editor.scss
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-typography/eu-style-typography-list/eu-style-typography-list--editor.scss
  • Size: 215 Bytes
  • Content: 
    /**
 * List
 * @define list
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-style-typography-list/generic-style-typography-list';

// Use generic mixin
@include exports('eu-style-typography-list') {
  @include ecl-typography-list();
}
  • URL: /components/raw/eu-style-typography-list/eu-style-typography-list.scss
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-typography/eu-style-typography-list/eu-style-typography-list.scss
  • Size: 273 Bytes
  • Handle: @ecl/eu-style-typography-list
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-typography/eu-style-typography-list/eu-style-typography-list.twig