Use the timeline component on detail pages to present a series of milestones or events in a certain period of time in the past or in the future. The milestones or events typically lead to a certain end result or a specific end goal.
For instance:
Do not use the timeline component to present the programme of a current event. In this case use the programme component instead.
Do not use the timeline component on overview pages or filter pages. Only use the timeline component on detail pages.
A timeline is divided in phases using an HTML description list.
The terms of the description list represent the names of the phases in time. The descriptions (one or more) per term represent the milestones or events in the specific period of time of the phase.
The descriptions per term are shown using an accordion component with multiple expandable items, one for each milestone or event in the specific period of time of the phase.
Each description can consist of the following elements:
When a description does not have a text paragraph nor a video, the description (title and/or date or subtitle and/or image gallery) is just shown without the use of accordion.
When a description does have at least a text paragraph or a video, an accordion is used. All accordions can be expanded or collapsed.
When a descrption has an image gallery, the image gallery shows one, two or three thumbnails depending on the device’s screen resolution. When there are more images available in an image gallery than can be shown on a certain screen resolution, the last thumbnail shows that there are more images with an action to open all images.
<div class="timeline-wrapper">
<h2 class="visually-hidden">Timeline</h2>
<dl class="timeline accordion">
{# Timeline paragraph BEGIN #}
<div class="timeline-slot" role="listitem">
{# Timeline paragraph title #}
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
{# Timeline item BEGIN #}
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
{# Timeline item title #}
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--1"
data-controls-img="timeline-slot-img--1" class="accordion--button">
Timeline item title
</button>
</h4>
{# Timeline item subtitle #}
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--1" aria-hidden="false">
<div class="content-image hidden-desktop">
{# This is the same image as above #}
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{# Timeline item text #}
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--1"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
{# Timeline item END #}
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--1b"
data-controls-img="timeline-slot-img--1b" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--1b" aria-hidden="false">
<div class="content-image hidden-desktop">
{# This is the same image as above #}
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--1b"
aria-hidden="false">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
{# Timeline item title #}
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--10"
data-controls-img="timeline-slot-img--10" class="accordion--button">
Timeline item title
</button>
</h4>
{# Timeline item subtitle #}
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--10" aria-hidden="false">
<div class="content-image hidden-desktop">
{# This is the same image as above #}
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{# Timeline item text #}
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--10"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
</div>
{# Timeline paragraph END #}
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--2"
data-controls-img="timeline-slot-img--2" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2" aria-hidden="true">
<div class="content-image hidden-desktop">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--2"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--2b"
data-controls-img="timeline-slot-img--2b" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2b" aria-hidden="true">
<div class="content-image hidden-desktop">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--2b"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--3"
data-controls-img="timeline-slot-img--3" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--3" aria-hidden="true">
<div class="content-image hidden-desktop">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--3"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
</div>
<div class="timeline-slot timeline-slot-reverse" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--4"
data-controls-img="timeline-slot-img--4" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--4" aria-hidden="true">
<div class="content-image hidden-desktop">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--4"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--5"
data-controls-img="timeline-slot-img--5" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--5" aria-hidden="true">
<div class="content-image hidden-desktop">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--5"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--7"
data-controls-img="timeline-slot-img--7" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--7" aria-hidden="true">
<div class="content-image hidden-desktop">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--7"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--8"
data-controls-img="timeline-slot-img--8" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--8" aria-hidden="true">
<div class="content-image hidden-desktop">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
{% include '@paragraph' with {
'text': 'This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.'
} %}
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--8"
aria-hidden="true">
{% include '@image-gallery--single' with {
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
</dd>
</div>
</div>
</dl>
</div>
<div class="timeline-wrapper">
<h2 class="visually-hidden">Timeline</h2>
<dl class="timeline accordion">
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--1" data-controls-img="timeline-slot-img--1" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--1" aria-hidden="false">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--1" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--1b" data-controls-img="timeline-slot-img--1b" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--1b" aria-hidden="false">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--1b" aria-hidden="false">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="true" aria-controls="timeline-slot-content--10" data-controls-img="timeline-slot-img--10" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content accordion--expanded" id="timeline-slot-content--10" aria-hidden="false">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ol>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ol>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--10" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--2" data-controls-img="timeline-slot-img--2" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--2" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--2b" data-controls-img="timeline-slot-img--2b" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2b" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--2b" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--3" data-controls-img="timeline-slot-img--3" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--3" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--3" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot timeline-slot-reverse" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--4" data-controls-img="timeline-slot-img--4" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--4" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--4" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<dt>
<h3 class="dt-title">Paragraph title</h3>
</dt>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--5" data-controls-img="timeline-slot-img--5" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--5" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--5" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--7" data-controls-img="timeline-slot-img--7" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--7" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--7" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false" aria-controls="timeline-slot-content--8" data-controls-img="timeline-slot-img--8" class="accordion--button">
Timeline item title
</button>
</h4>
<h5 class="timeline-slot-date">Timeline item subtitle/date</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--8" aria-hidden="true">
<div class="content-image hidden-desktop">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<p>This is the base font. Cake caramels jelly-o lemon drops gummies. Apple pie carrot cake pie powder ice cream icing sweet roll. Caramels chocolate gummies cotton candy dessert apple pie pastry gingerbread. Jelly beans toffee macaroon sweet roll.</p>
<ul>
<li>Candy lollipops</li>
<li>Sugar sweetness</li>
<li>Toffee sticks</li>
</ul>
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--8" aria-hidden="true">
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"></div>
</figure>
</a>
</div>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
</dd>
</div>
</div>
</dl>
</div>
/* No context defined. */
$timeline-border: 6px;
$timeline-m-left-padding: 35px;
$timeline-m-right-padding: 30px;
$timeline-dd-space-between-mobile: 60px;
$timeline-dd-space-between: 90px;
$timeline-dt-left-padding: 0px; // sass-lint:disable-line zero-unit
$timeline-dt-right-padding: 112px;
$roadmap-img-mobile-size: 120px;
$roadmap-img-desktop-size: 170px;
.timeline-wrapper {
max-width: 375px;
@include desktop {
max-width: 970px;
margin: 0 auto;
}
}
dl.timeline {
width: 100%;
padding: 0;
.timeline-slot {
// Timeline-slot title styling.
&-title {
position: relative;
width: 100%;
margin: 0;
border: 0;
background: transparent;
line-height: 36px;
z-index: 2;
button {
width: 100%;
margin-left: -45px;
padding-left: 45px;
color: inherit;
font-size: inherit;
line-height: inherit;
@include desktop {
margin-left: -55px;
padding-left: 55px;
&::after {
right: 100%;
width: 60px;
height: $timeline-border;
background-color: color(cyan-pastel);
content: '';
z-index: 0;
}
}
&::before,
&::after {
position: absolute;
}
// +/- icon
&::before {
display: flex;
left: 0;
align-items: center;
min-width: 36px;
min-height: 36px;
font-size: 1.2rem;
line-height: 1.54rem;
z-index: 1;
}
}
}
&-date {
display: block;
width: 100%;
margin: 0;
padding-top: 5px;
font-weight: normal;
}
&-content,
&-header {
width: 100%;
}
&-content {
&__img {
&:focus,
&:focus-within {
overflow: unset; // The overflow is needed for the accordion animation only
}
}
&:not(.timeline-slot-content__img) {
padding-top: calc($gutter-width/2);
}
.content-image {
padding-bottom: calc($gutter-width/2);
@include desktop {
padding-bottom: 0;
}
}
.gallery-link {
display: block;
}
ul,
ol {
margin-left: 0;
list-style-position: inside;
}
*:last-child {
margin-bottom: 0;
}
}
> dt {
position: relative;
top: 0;
left: 0;
width: 100%;
margin: 0;
text-align: left;
@include desktop {
text-align: center;
}
.dt-title {
@include theme('background-color', 'color-secondary', 'timeline-dt-bg-color');
display: inline-block;
margin: 0;
padding: 2px 10px;
}
}
.item {
display: grid;
position: relative;
grid-template-areas:
"title"
"left";
grid-template-rows: auto auto;
grid-template-columns: 1fr;
@include desktop {
grid-template-areas:
"title title"
"left right";
grid-template-columns: 1fr 1fr;
}
& > dd {
@include theme('border-color', 'color-primary', 'timeline-line-color');
position: relative;
width: 100%;
max-width: none;
margin: 0;
padding-right: calc(#{$gutter-width*.5});
padding-bottom: $timeline-dd-space-between-mobile;
padding-left: calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
@include desktop {
padding-bottom: $timeline-dd-space-between;
}
&::after {
@include theme('border-color', 'color-tertiary-pastel', 'timeline-line-color');
position: absolute;
top: 0;
bottom: 0;
left: $timeline-m-left-padding;
border-left: $timeline-border solid;
content: '';
z-index: 0;
@include desktop {
left: calc(#{$timeline-dt-left-padding} - #{$timeline-border} / 2);
}
}
&.active::before {
@include theme('background-color', 'color-tertiary-pastel', 'timeline-slot-active-indicator-background');
}
.accordion--content {
margin-left: 0;
}
// Video component styling inside a timeline-slot.
.video-wrapper {
position: relative;
width: 100%;
margin-left: 0;
// Fix to add whitespace to the video top and bottom areas.
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
z-index: z('timeline', 'video', 'background');
}
.video {
position: relative;
border: 0;
z-index: z('timeline', 'video', 'player');
.audio-description {
min-height: 40px;
padding-left: 60px;
// Dots after a video intersection.
&::after {
bottom: 4px;
}
}
}
}
}
&:first-of-type {
& > dd {
padding-top: $timeline-dd-space-between-mobile;
@include desktop {
padding-top: $timeline-dd-space-between;
}
}
}
}
&:not(.timeline-slot-reverse) {
.item {
// Alternating timeline-slots get alternating styling (left/right).
&:nth-of-type(odd):not(.item--left),
&.item--right {
.item__image-desktop {
@include desktop {
padding-right: 66px;
padding-left: calc(#{$gutter-width*.5});
grid-area: left;
&::after {
display: none;
}
}
}
.item__content {
@include desktop {
padding-right: calc(#{$gutter-width*.5});
padding-left: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
grid-area: right;
}
}
}
&:nth-of-type(even):not(.item--right),
&.item--left {
.item__image-desktop {
@include desktop {
padding-right: calc(#{$gutter-width*.5});
padding-left: 66px;
grid-area: right;
}
}
.item__content {
@include desktop {
padding-right: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
padding-left: calc(#{$gutter-width*.5});
text-align: right;
grid-area: left;
.timeline-slot-title {
button {
justify-content: flex-end;
margin: 0 0 0 55px;
padding: 0 55px 0 0;
// +/- icon
&::before {
right: 0;
left: auto;
margin: 0 0 0 15px;
padding-right: 4px;
}
&::after {
right: auto;
left: 100%;
}
}
}
&::after {
display: none;
}
}
}
}
}
}
&.timeline-slot-reverse {
.item {
& > dd {
@include desktop {
padding-right: calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
padding-left: calc(#{$gutter-width*.5});
grid-area: right;
}
}
// Alternating timeline-slots get alternating styling (left/right).
&:nth-of-type(even):not(.item--right),
&.item--left {
.item__image-desktop {
@include desktop {
padding-right: 66px;
padding-left: calc(#{$gutter-width*.5});
grid-area: left;
&::after {
display: none;
}
}
}
.item__content {
@include desktop {
padding-right: calc(#{$gutter-width*.5});
padding-left: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
grid-area: right;
}
}
}
&:nth-of-type(odd):not(.item--left),
&.item--right {
.item__image-desktop {
@include desktop {
padding-right: calc(#{$gutter-width*.5});
padding-left: 66px;
grid-area: right;
}
}
.item__content {
@include desktop {
padding-right: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
padding-left: calc(#{$gutter-width*.5});
text-align: right;
grid-area: left;
.timeline-slot-title {
button {
justify-content: flex-end;
margin: 0 0 0 55px;
padding: 0 55px 0 0;
// +/- icon
&::before {
right: 0;
left: auto;
margin: 0 0 0 15px;
padding-right: 4px;
}
&::after {
right: auto;
left: 100%;
}
}
}
&::after {
display: none;
}
}
}
}
}
}
// Last paragraph styling
&:last-of-type {
.item:last-of-type {
& > dd {
padding-bottom: 0;
&::after {
bottom: calc(100% - $gutter-width*.5);
}
}
&:first-of-type {
& > dd {
&::after {
bottom: calc(100% - #{$timeline-dd-space-between-mobile + $gutter-width*.5});
@include desktop {
bottom: calc(100% - #{$timeline-dd-space-between + $gutter-width*.5});
}
}
}
}
}
}
}
}
.roadmap-wrapper {
@include desktop {
max-width: 1070px;
margin: 0 auto;
}
}
dl.roadmap {
counter-reset: item;
.timeline-slot {
position: relative;
padding-bottom: 50px;
padding-left: 60px;
@include desktop {
padding-top: 70px;
padding-left: calc($roadmap-img-desktop-size + 130px);
}
&::before {
@include theme('background-color', 'color-secondary', 'timeline-dt-bg-color');
@include bold-text;
position: absolute;
top: 30px;
left: 0;
padding: 9.5px 19px;
border-radius: 50%;
font-size: 1.2rem;
line-height: 130%;
content: counter(item);
z-index: 2;
counter-increment: item;
@include desktop {
top: 50px;
left: calc($roadmap-img-desktop-size + 30px);
padding: 15.5px 28px;
font-size: 1.5rem;
}
}
&::after {
@include theme('background-color', 'color-tertiary-pastel', 'timeline-line-color');
position: absolute;
top: 49px;
left: 22px;
width: 6px;
height: calc(100% - 49px);
content: '';
z-index: 1;
@include desktop {
top: 69px;
left: calc($roadmap-img-desktop-size + 62px);
height: calc(100% - 69px);
}
}
&:not(:first-of-type) {
&::after {
top: 0;
height: 100%;
}
}
&:last-of-type {
&::after {
height: 51px;
}
}
}
.item {
dd {
@include desktop {
margin: 0;
}
}
}
.item__image {
display: block;
width: $roadmap-img-mobile-size;
height: $roadmap-img-mobile-size;
margin-top: 0;
margin-bottom: 15px;
@include desktop {
position: absolute;
top: 0;
left: 0;
width: $roadmap-img-desktop-size;
height: $roadmap-img-desktop-size;
margin-top: 20px;
}
}
.content-btn {
padding-bottom: 30px;
}
}