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">
<div class="timeline-slot" role="listitem">
<dt>2018</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--1" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">27 august 2017</span>
{% include '@image-gallery--multiple' with {
"type": "secondary",
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--1">
{% 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.'
} %}
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>2017</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--2" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">27 august 2017</span>
{% include '@image-gallery--multiple' with {
"type": "secondary",
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2">
{% 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.'
} %}
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">Title</h3>
<span class="timeline-slot-date">7 november 2017</span>
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">Title</h3>
<span class="timeline-slot-date">7 november 2017</span>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>Once upon a time</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--3" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">27 august 2011</span>
{% include '@image-gallery--multiple' with {
"type": "secondary",
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--3">
{% 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.'
} %}
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>Sometime in 2016</dt>
<dd class="active">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--4" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">Januari 2016</span>
{% include '@image-gallery--multiple' with {
"type": "secondary",
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--4">
{% 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.'
} %}
<div class="video-wrapper">
<div class="video-inner-wrapper">
{% include '@video' with {
'title': 'Promofilm stad Gent.',
'src': 'https://www.youtube.com/embed/S0vLmTWUmok',
'audio_description_src': 'https://www.youtube.com/embed/S0vLmTWUmok'
} %}
</div>
</div>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>1,4 till 1,6 milion years ago</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--5" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
{% include '@image-gallery' with {
"type": "secondary",
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--5">
<div class="video-wrapper">
<div class="video-inner-wrapper">
{% include '@video' with {
'title': 'Promofilm stad Gent.',
'src': 'https://www.youtube.com/embed/S0vLmTWUmok',
'audio_description_src': 'https://www.youtube.com/embed/S0vLmTWUmok'
} %}
</div>
</div>
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--6" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
{% include '@image-gallery' with {
"type": "secondary",
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--6">
<div class="video-wrapper">
<div class="video-inner-wrapper">
{% include '@video' with {
'title': 'Promofilm stad Gent.',
'src': 'https://www.youtube.com/embed/S0vLmTWUmok',
'audio_description_src': 'https://www.youtube.com/embed/S0vLmTWUmok'
} %}
</div>
</div>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>Sometime in 2016</dt>
<dd class="active">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--7" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">Januari 2016</span>
{% include '@image-gallery--multiple' with {
"type": "secondary",
"items": [
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
}
]
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--7">
{% 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.'
} %}
<div class="video-wrapper">
<div class="video-inner-wrapper">
{% include '@video' with {
'title': 'Promofilm stad Gent.',
'src': 'https://www.youtube.com/embed/S0vLmTWUmok',
'audio_description_src': 'https://www.youtube.com/embed/S0vLmTWUmok'
} %}
</div>
</div>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>1,4 till 1,6 milion years ago</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--8" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
{% include '@image-gallery' with {
"type": "secondary",
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--8">
<div class="video-wrapper">
<div class="video-inner-wrapper">
{% include '@video' with {
'title': 'Promofilm stad Gent.',
'src': 'https://www.youtube.com/embed/S0vLmTWUmok',
'audio_description_src': 'https://www.youtube.com/embed/S0vLmTWUmok'
} %}
</div>
</div>
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--9" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
{% include '@image-gallery' with {
"type": "secondary",
"src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
"alt": "placeholder image alternative text",
"caption": "image caption"
} %}
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--9">
<div class="video-wrapper">
<div class="video-inner-wrapper">
{% include '@video' with {
'title': 'Promofilm stad Gent.',
'src': 'https://www.youtube.com/embed/S0vLmTWUmok',
'audio_description_src': 'https://www.youtube.com/embed/S0vLmTWUmok'
} %}
</div>
</div>
</div>
</dd>
</div>
</dl>
</div>
<div class="timeline-wrapper">
<h2 class="visually-hidden">Timeline</h2>
<dl class="timeline accordion">
<div class="timeline-slot" role="listitem">
<dt>2018</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--1" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">27 august 2017</span>
<div class="image-gallery--wrapper multiple image-gallery--secondary">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">3</span>
<span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--1">
<p class="">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>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>2017</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--2" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">27 august 2017</span>
<div class="image-gallery--wrapper multiple image-gallery--secondary">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">3</span>
<span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--2">
<p class="">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>
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">Title</h3>
<span class="timeline-slot-date">7 november 2017</span>
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">Title</h3>
<span class="timeline-slot-date">7 november 2017</span>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>Once upon a time</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="false" aria-controls="timeline-slot-content--3" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">27 august 2011</span>
<div class="image-gallery--wrapper multiple image-gallery--secondary">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">6</span>
<span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--3">
<p class="">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>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>Sometime in 2016</dt>
<dd class="active">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--4" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">Januari 2016</span>
<div class="image-gallery--wrapper multiple image-gallery--secondary">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">2</span>
<span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--4">
<p class="">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>
<div class="video-wrapper">
<div class="video-inner-wrapper">
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>1,4 till 1,6 milion years ago</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--5" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
<div class="image-gallery--wrapper single image-gallery--secondary">
<div class="image-gallery js-lightbox">
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</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>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--5">
<div class="video-wrapper">
<div class="video-inner-wrapper">
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--6" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
<div class="image-gallery--wrapper single image-gallery--secondary">
<div class="image-gallery js-lightbox">
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</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>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--6">
<div class="video-wrapper">
<div class="video-inner-wrapper">
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>Sometime in 2016</dt>
<dd class="active">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--7" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">Januari 2016</span>
<div class="image-gallery--wrapper multiple image-gallery--secondary">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" class="gallery-link" aria-label="image caption" aria-describedby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">2</span>
<span>Show all photos <i class="icon-arrow-right" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</div>
<!-- Add this to the bottom of your page template, above scripts -->
<!-- <span hidden id="image-gallery__open-gallery">open gallery</span> -->
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--7">
<p class="">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>
<div class="video-wrapper">
<div class="video-inner-wrapper">
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
</div>
</dd>
</div>
<div class="timeline-slot" role="listitem">
<dt>1,4 till 1,6 milion years ago</dt>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--8" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
<div class="image-gallery--wrapper single image-gallery--secondary">
<div class="image-gallery js-lightbox">
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</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>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--8">
<div class="video-wrapper">
<div class="video-inner-wrapper">
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
</div>
</dd>
<dd>
<div class="timeline-slot-header">
<h3 class="timeline-slot-title"><button aria-expanded="true" aria-controls="timeline-slot-content--9" class="accordion--button">Title</button></h3>
<span class="timeline-slot-date">On a thursday</span>
<div class="image-gallery--wrapper single image-gallery--secondary">
<div class="image-gallery js-lightbox">
<a href="https://via.placeholder.com/800x500&text=8:5+(800x500)" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</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>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--9">
<div class="video-wrapper">
<div class="video-inner-wrapper">
<div class="video">
<div class="responsive-video">
<iframe width="100%" height="500" src="https://www.youtube.com/embed/S0vLmTWUmok" frameborder="0" title="Promofilm stad Gent." allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="audio-description">
<a href='https://www.youtube.com/embed/S0vLmTWUmok' class="standalone-link">
Watch this video with audio description </a>
</div>
</div>
</div>
</div>
</div>
</dd>
</div>
</dl>
</div>
/* No context defined. */
$timeline-border: 3px;
$timeline-dot-width: 16px;
$timeline-m-left-padding: 1.5rem;
$timeline-m-right-padding: 2.5rem;
$timeline-dt-left-padding: 11.5rem;
$timeline-dt-right-padding: 5rem;
dl.timeline {
width: 100%;
padding: 0;
.timeline-slot {
@include desktop {
padding: 0 span(1 of 12) 0 span(2 of 12);
}
display: flex;
position: relative;
flex-wrap: wrap;
// Alternating timeline-slots get another background color.
&:nth-child(2n+1) {
@include theme('background-color', 'color-primary--lighten-5', 'timeline-slot-alternating-background');
// Fix for video on alternating timeline-slots.
> dd .video-wrapper::after {
@include theme('background-color', 'color-primary--lighten-5', 'timeline-slot-alternating-background');
}
}
// First timeline-slot specific styling.
&:first-of-type {
padding-top: 2rem;
// First definition description inside the first timeline-slot.
> dd:first-of-type {
margin-top: -.4rem;
padding-top: 0;
// Fix whitespace.
.timeline-slot-header {
margin-top: -.4rem;
padding-top: 0;
}
}
> dt:first-of-type {
margin-top: -.6rem;
padding-bottom: 1.2rem;
@include desktop {
top: 1.9rem;
}
&::before {
content: none;
}
}
}
// Last timeline-slot last definition description specific styling.
&:last-of-type {
padding-bottom: 2rem;
> dd:last-of-type {
// Horizontal timeline end.
&::before {
@include theme('border-color', 'color-primary', 'timeline-line-color');
position: absolute;
bottom: 0;
left: calc(#{$timeline-m-left-padding} - .5rem - 1px);
width: 1rem;
border-bottom: $timeline-border solid;
content: '';
@include desktop {
left: calc(#{$timeline-dt-left-padding} - .5rem - 1px);
}
}
}
}
// Timeline-slot title styling.
&-title {
&::before,
button::after {
@include theme('background-color', 'color-secondary', 'timeline-slot-indicator-background');
@include theme('border-color', 'color-primary', 'timeline-slot-indicator-border-color');
display: block;
position: absolute;
top: .2rem;
left: calc(-#{$timeline-m-right-padding} - #{$timeline-dot-width} / 2);
width: $timeline-dot-width;
height: $timeline-dot-width;
transition: background-color .2s ease-in-out;
border: $timeline-border solid;
border-radius: 100%;
content: '';
z-index: z('timeline', 'dots');
@include desktop {
left: calc(-#{$timeline-dt-right-padding} - #{$timeline-dot-width} / 2);
}
}
button {
width: 100%;
margin-left: -2em;
padding-left: 2em;
color: inherit;
font-size: inherit;
&::before {
position: absolute;
left: 0;
padding-left: .2em;
font-size: 1.2rem;
line-height: .9;
}
&::after {
left: calc(-#{$timeline-m-right-padding} - #{$timeline-dot-width} / 2 + 2em);
@include desktop {
left: calc(-#{$timeline-dt-right-padding} - #{$timeline-dot-width} / 2 + 2em);
}
}
}
position: relative;
width: 100%;
margin: .2rem 0;
border: 0;
background: transparent;
line-height: 1.2;
button:hover::after,
button:focus::after {
@include theme('background-color', 'color-primary--lighten-2', 'timeline-slot-active-indicator-background');
}
button[aria-expanded=true]::after {
@include theme('background-color', 'color-primary', 'timeline-slot-active-indicator-background');
}
}
&-date {
display: block;
width: 100%;
}
&-content,
&-header {
width: 100%;
}
&-header {
margin-bottom: $gutter-width;
padding-top: .5rem;
@include desktop {
padding-top: 2rem;
}
}
&-content {
*:last-of-type {
margin-bottom: 0;
}
&::after {
display: block;
position: relative;
height: 1.6rem;
content: '';
}
}
> dt {
@extend %h3;
position: relative;
width: 100%;
margin: 0;
padding: 1.5rem calc(#{$timeline-m-left-padding} - #{$timeline-dot-width} / 2) .5rem;
@include desktop {
position: absolute;
top: 2rem;
left: span(2 of 12);
width: $timeline-dt-left-padding;
padding: 0 1.2rem 0 0;
text-align: right;
}
&::before {
@include theme('border-color', 'color-primary', 'timeline-line-color');
position: absolute;
top: 0;
left: calc(#{$timeline-m-left-padding} - 2px);
height: 1rem;
border-left: $timeline-border solid;
content: '';
@include desktop {
display: none;
}
}
}
> dd {
@include theme('border-color', 'color-primary', 'timeline-line-color');
display: flex;
position: relative;
flex-wrap: wrap;
width: 100%;
max-width: none;
margin: 0;
padding: 0 calc(#{$gutter-width/2}) 0 calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
.accordion--content {
margin-left: 0;
}
@include desktop {
margin: 0;
padding: 0 calc(#{$gutter-width/2}) 0 calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
}
&::after {
@include theme('border-color', 'color-primary', 'timeline-line-color');
position: absolute;
top: 0;
bottom: 0;
left: calc(#{$timeline-m-left-padding} - 2px);
border-left: $timeline-border solid;
content: '';
@include desktop {
left: calc(#{$timeline-dt-left-padding} - 2px);
}
}
&.active::before {
@include theme('background-color', 'color-primary', 'timeline-slot-active-indicator-background');
}
// Video component styling inside a timeline-slot.
.video-wrapper {
position: relative;
width: 100%;
margin-left: 0;
padding-bottom: 2rem;
// 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');
}
&::after {
@include theme('background-color', 'color-secondary', 'timeline-slot-default-background');
}
.video {
position: relative;
padding-top: 2rem;
border: 0;
z-index: z('timeline', 'video', 'player');
.audio-description {
min-height: 2rem;
padding-left: 3rem;
// Dots after a video intersection.
&::after {
bottom: .2rem;
}
}
}
}
}
}
}