EC System

Timelines

Documentation • Demo

Timeline and Time schedule

Why and how to use this component

A timeline is a way of displaying a list of events in chronological order.

There are two variants of this component:

  • timeline
  • time schedule

When to use this component

  • timeline: for bigger time ranges
  • time schedule: more granular, for hours (used on event)
{#
  Parameters:
    - "limit" (integer) (default: 0): max number of items to display (0 = display all)
    - "button_label" (string) (default: 'Show all timeline')
    - "items" (array) (default: []): array of objects containing
      - "title" (string)
      - "body" (string)
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-timeline' with {
  'limit': limit|default(0),
  'button_label': button_label|default('Show all timeline'),
  'items': items|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'ec'
} only %}
 
{
  "limit": 3,
  "button_label": "Show all timeline",
  "items": [
    {
      "title": "By late-2013",
      "body": "\n        <p class=\"ecl-paragraph\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.\n        </p>\n        <p class=\"ecl-paragraph\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.\n        </p>\n      "
    },
    {
      "title": "By late-2014",
      "body": "\n        <p class=\"ecl-paragraph\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.\n        </p>\n      "
    },
    {
      "title": "By late-2015",
      "body": "\n        <p class=\"ecl-paragraph\">\n          The Commission will convene the first energy infrastructure forum to discuss and find solutions to issues that are common to all regions across Europe.\n        </p>\n        <p class=\"ecl-paragraph\">\n          The Commission will convene the first energy infrastructure forum to discuss and find solutions to issues that are common to all regions across Europe.\n        </p>\n      "
    },
    {
      "title": "By late-2016",
      "body": "\n        <p class=\"ecl-paragraph\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.\n        </p>\n      "
    },
    {
      "title": "By late-2017",
      "body": "\n        <p class=\"ecl-paragraph\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.\n        </p>\n      "
    },
    {
      "title": "By late-2018",
      "body": "\n        <p class=\"ecl-paragraph\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.\n        </p>\n      "
    }
  ],
  "_demo": {
    "scripts": "\n      document.addEventListener('DOMContentLoaded', function () { ECL.timelines(); });\n      "
  }
}
 
<section class="ecl-timeline">
  <ul class="ecl-timeline__list">
    <li class="ecl-timeline__item">
      <div class="ecl-heading ecl-heading--h4 ecl-timeline__title">By late-2013</div>
      <div class="ecl-timeline__body">
        <p class="ecl-paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.
        </p>
        <p class="ecl-paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.
        </p>
      </div>
    </li>
    <li class="ecl-timeline__item">
      <div class="ecl-heading ecl-heading--h4 ecl-timeline__title">By late-2014</div>
      <div class="ecl-timeline__body">
        <p class="ecl-paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.
        </p>
      </div>
    </li>
    <li class="ecl-timeline__item">
      <div class="ecl-heading ecl-heading--h4 ecl-timeline__title">By late-2015</div>
      <div class="ecl-timeline__body">
        <p class="ecl-paragraph">
          The Commission will convene the first energy infrastructure forum to discuss and find solutions to issues that are common to all regions across Europe.
        </p>
        <p class="ecl-paragraph">
          The Commission will convene the first energy infrastructure forum to discuss and find solutions to issues that are common to all regions across Europe.
        </p>
      </div>
    </li>
    <li class="ecl-timeline__item ecl-timeline__item--over-limit">
      <div class="ecl-heading ecl-heading--h4 ecl-timeline__title">By late-2016</div>
      <div class="ecl-timeline__body">
        <p class="ecl-paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.
        </p>
      </div>
    </li>
    <li class="ecl-timeline__item ecl-timeline__item--over-limit">
      <div class="ecl-heading ecl-heading--h4 ecl-timeline__title">By late-2017</div>
      <div class="ecl-timeline__body">
        <p class="ecl-paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.
        </p>
      </div>
    </li>
    <li class="ecl-timeline__item ecl-timeline__item--over-limit">
      <div class="ecl-heading ecl-heading--h4 ecl-timeline__title">By late-2018</div>
      <div class="ecl-timeline__body">
        <p class="ecl-paragraph">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tellus congue, pretium nibh eu, mattis ligula. Integer tempus varius enim ut scelerisque. Curabitur rutrum vestibulum elit ac pulvinar.
        </p>
      </div>
    </li>
  </ul>

  <button type="submit" class="ecl-button ecl-button--call ecl-button--caret-down ecl-timeline__button">Show all timeline</button>
</section>
  • Content: 
    /**
 * Timeline
 * @define timeline
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-timeline/generic-component-timeline';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('ec-style-typography-heading', 'ec-component-button'));

// Use generic mixin
@include exports('ec-component-timeline') {
  @include ecl-timeline();
}
  • URL: /components/raw/ec-component-timeline/ec-component-timeline.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-timeline/ec-component-timeline.scss
  • Size: 412 Bytes
  • Handle: @ecl/ec-component-timeline
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-timeline/ec-component-timeline.twig