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': 'eu'
} 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 */ export * from '@ecl/generic-component-timeline';
- URL: /components/raw/eu-component-timeline/eu-component-timeline.js
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-timeline/eu-component-timeline.js
- Size: 70 Bytes
-
Content:
/** * Timeline * @define timeline */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-component-timeline/generic-component-timeline'; // Check if overridden dependencies are already loaded, if needed @include check-imports(('eu-style-typography-heading', 'eu-component-button')); // Use generic mixin @include exports('eu-component-timeline') { @include ecl-timeline(); }
- URL: /components/raw/eu-component-timeline/eu-component-timeline.scss
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-timeline/eu-component-timeline.scss
- Size: 412 Bytes
- Handle: @ecl/eu-component-timeline
- Tags: molecule
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-timeline/eu-component-timeline.twig