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="roadmap-wrapper">
{# Timeline paragraph BEGIN #}
{# Timeline paragraph title #}
<h2 class="visually-hidden">Roadmap timeline title</h2>
<dl class="roadmap">
{# Timeline item BEGIN #}
<div class="timeline-slot" role="listitem">
<div class="item">
<dd class="item__image">
<div class="timeline-slot-content timeline-slot-content__img">
{# Timeline image field #}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 170">
<path fill="#005BA9" stroke="#005BA9" d="m135.796 135.775-1.84-11.995a1.864 1.864 0 0 0-3.685.565l1.558 10.154-77.48 11.889L36.824 32.179l47.986-7.363 4.243 27.652a1.863 1.863 0 0 0 2.125 1.56l27.653-4.243 3.65 23.79a1.863 1.863 0 1 0 3.685-.565l-3.934-25.633a1.841 1.841 0 0 0-.252-.687 1.834 1.834 0 0 0-.491-.534L87.475 21.192a1.88 1.88 0 0 0-1.388-.343l-51.67 7.929a1.863 1.863 0 0 0-1.56 2.125l18.09 117.892a1.863 1.863 0 0 0 2.125 1.56l81.165-12.455a1.86 1.86 0 0 0 1.559-2.125ZM88.894 26.855l26.765 19.644-23.205 3.56-3.56-23.204Z"/>
<path fill="#005BA9" stroke="#005BA9" d="M112.733 59.255a1.862 1.862 0 0 0-2.124-1.56l-58.795 9.023a1.863 1.863 0 1 0 .565 3.684l58.795-9.022a1.862 1.862 0 0 0 1.559-2.125ZM54.861 86.592l48.135-7.385a1.863 1.863 0 1 0-.565-3.684l-48.135 7.385a1.863 1.863 0 1 0 .565 3.684ZM57.347 102.791l39.027-5.989a1.863 1.863 0 1 0-.565-3.684l-39.027 5.989a1.863 1.863 0 1 0 .565 3.684ZM101.755 110.668a1.863 1.863 0 0 0-2.125-1.56l-40.363 6.194a1.863 1.863 0 1 0 .566 3.684l40.364-6.194a1.862 1.862 0 0 0 1.558-2.124ZM62.232 135.19l50.419-7.737a1.863 1.863 0 1 0-.566-3.684l-50.419 7.737a1.863 1.863 0 1 0 .566 3.684ZM124.322 72.85c-14.197 2.178-23.974 15.503-21.795 29.7 2.178 14.197 15.5 23.974 29.697 21.795 14.196-2.178 23.974-15.5 21.795-29.696-2.178-14.197-15.5-23.978-29.697-21.8Zm7.336 47.81c-12.164 1.866-23.581-6.513-25.447-18.677-1.867-12.167 6.512-23.584 18.676-25.45 12.164-1.867 23.581 6.512 25.448 18.68 1.866 12.164-6.513 23.58-18.677 25.447Z"/>
<path fill="#005BA9" stroke="#005BA9" d="m139.037 89.511-13.658 14.095-8.057-7.81a1.863 1.863 0 1 0-2.594 2.677l9.396 9.107a1.86 1.86 0 0 0 2.635-.041l14.955-15.434a1.863 1.863 0 1 0-2.677-2.594Z"/>
</svg>
</div>
</dd>
<dd class="item__content">
<div class="timeline-slot-header">
{# Timeline item title #}
<h3 class="timeline-slot-title">Timeline item title</h3>
{# Timeline item subtitle #}
<h4 class="timeline-slot-date">Timeline item subtitle</h4>
</div>
<div class="timeline-slot-content">
{# Timeline item text paragraph #}
<div class="content-text">
{% include '@important-note' with { type: 'important', note: 'Important info'} %}
{% 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.'
} %}
{% include '@important-note' with { type: 'important', note: 'Important info'} %}
</div>
<div class="content-btn">
{% include '@button' with {
type: 'primary',
modifier: 'icon-arrow-right',
text: 'CTA button'
} %}
</div>
{% include '@accordion--link' with {
buttonText: 'More info'
} %}
</div>
</dd>
</div>
</div>
{# Timeline item END #}
<div class="timeline-slot" role="listitem">
<div class="item">
<dd class="item__image">
<div class="timeline-slot-content timeline-slot-content__img">
{# Timeline image field #}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 170">
<path fill="#005BA9" stroke="#005BA9" d="m135.796 135.775-1.84-11.995a1.864 1.864 0 0 0-3.685.565l1.558 10.154-77.48 11.889L36.824 32.179l47.986-7.363 4.243 27.652a1.863 1.863 0 0 0 2.125 1.56l27.653-4.243 3.65 23.79a1.863 1.863 0 1 0 3.685-.565l-3.934-25.633a1.841 1.841 0 0 0-.252-.687 1.834 1.834 0 0 0-.491-.534L87.475 21.192a1.88 1.88 0 0 0-1.388-.343l-51.67 7.929a1.863 1.863 0 0 0-1.56 2.125l18.09 117.892a1.863 1.863 0 0 0 2.125 1.56l81.165-12.455a1.86 1.86 0 0 0 1.559-2.125ZM88.894 26.855l26.765 19.644-23.205 3.56-3.56-23.204Z"/>
<path fill="#005BA9" stroke="#005BA9" d="M112.733 59.255a1.862 1.862 0 0 0-2.124-1.56l-58.795 9.023a1.863 1.863 0 1 0 .565 3.684l58.795-9.022a1.862 1.862 0 0 0 1.559-2.125ZM54.861 86.592l48.135-7.385a1.863 1.863 0 1 0-.565-3.684l-48.135 7.385a1.863 1.863 0 1 0 .565 3.684ZM57.347 102.791l39.027-5.989a1.863 1.863 0 1 0-.565-3.684l-39.027 5.989a1.863 1.863 0 1 0 .565 3.684ZM101.755 110.668a1.863 1.863 0 0 0-2.125-1.56l-40.363 6.194a1.863 1.863 0 1 0 .566 3.684l40.364-6.194a1.862 1.862 0 0 0 1.558-2.124ZM62.232 135.19l50.419-7.737a1.863 1.863 0 1 0-.566-3.684l-50.419 7.737a1.863 1.863 0 1 0 .566 3.684ZM124.322 72.85c-14.197 2.178-23.974 15.503-21.795 29.7 2.178 14.197 15.5 23.974 29.697 21.795 14.196-2.178 23.974-15.5 21.795-29.696-2.178-14.197-15.5-23.978-29.697-21.8Zm7.336 47.81c-12.164 1.866-23.581-6.513-25.447-18.677-1.867-12.167 6.512-23.584 18.676-25.45 12.164-1.867 23.581 6.512 25.448 18.68 1.866 12.164-6.513 23.58-18.677 25.447Z"/>
<path fill="#005BA9" stroke="#005BA9" d="m139.037 89.511-13.658 14.095-8.057-7.81a1.863 1.863 0 1 0-2.594 2.677l9.396 9.107a1.86 1.86 0 0 0 2.635-.041l14.955-15.434a1.863 1.863 0 1 0-2.677-2.594Z"/>
</svg>
</div>
</dd>
<dd class="item__content">
<div class="timeline-slot-header">
{# Timeline item title #}
<h3 class="timeline-slot-title">Timeline item title</h3>
{# Timeline item subtitle #}
<h4 class="timeline-slot-date">Timeline item subtitle</h4>
</div>
<div class="timeline-slot-content">
{# Timeline item text paragraph #}
<div class="content-text">
{% include '@important-note' with { type: 'payment', note: 'Payment info'} %}
{% 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.'
} %}
{% include '@important-note' with { type: 'payment', note: 'Payment info'} %}
</div>
<div class="content-btn">
{% include '@button' with {
type: 'primary',
modifier: 'icon-arrow-right',
text: 'CTA button'
} %}
</div>
{% include '@accordion--link' with {
buttonText: 'More info'
} %}
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<div class="item">
<dd class="item__image">
<div class="timeline-slot-content timeline-slot-content__img">
{# Timeline image field #}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 170">
<path fill="#005BA9" stroke="#005BA9" d="m135.796 135.775-1.84-11.995a1.864 1.864 0 0 0-3.685.565l1.558 10.154-77.48 11.889L36.824 32.179l47.986-7.363 4.243 27.652a1.863 1.863 0 0 0 2.125 1.56l27.653-4.243 3.65 23.79a1.863 1.863 0 1 0 3.685-.565l-3.934-25.633a1.841 1.841 0 0 0-.252-.687 1.834 1.834 0 0 0-.491-.534L87.475 21.192a1.88 1.88 0 0 0-1.388-.343l-51.67 7.929a1.863 1.863 0 0 0-1.56 2.125l18.09 117.892a1.863 1.863 0 0 0 2.125 1.56l81.165-12.455a1.86 1.86 0 0 0 1.559-2.125ZM88.894 26.855l26.765 19.644-23.205 3.56-3.56-23.204Z"/>
<path fill="#005BA9" stroke="#005BA9" d="M112.733 59.255a1.862 1.862 0 0 0-2.124-1.56l-58.795 9.023a1.863 1.863 0 1 0 .565 3.684l58.795-9.022a1.862 1.862 0 0 0 1.559-2.125ZM54.861 86.592l48.135-7.385a1.863 1.863 0 1 0-.565-3.684l-48.135 7.385a1.863 1.863 0 1 0 .565 3.684ZM57.347 102.791l39.027-5.989a1.863 1.863 0 1 0-.565-3.684l-39.027 5.989a1.863 1.863 0 1 0 .565 3.684ZM101.755 110.668a1.863 1.863 0 0 0-2.125-1.56l-40.363 6.194a1.863 1.863 0 1 0 .566 3.684l40.364-6.194a1.862 1.862 0 0 0 1.558-2.124ZM62.232 135.19l50.419-7.737a1.863 1.863 0 1 0-.566-3.684l-50.419 7.737a1.863 1.863 0 1 0 .566 3.684ZM124.322 72.85c-14.197 2.178-23.974 15.503-21.795 29.7 2.178 14.197 15.5 23.974 29.697 21.795 14.196-2.178 23.974-15.5 21.795-29.696-2.178-14.197-15.5-23.978-29.697-21.8Zm7.336 47.81c-12.164 1.866-23.581-6.513-25.447-18.677-1.867-12.167 6.512-23.584 18.676-25.45 12.164-1.867 23.581 6.512 25.448 18.68 1.866 12.164-6.513 23.58-18.677 25.447Z"/>
<path fill="#005BA9" stroke="#005BA9" d="m139.037 89.511-13.658 14.095-8.057-7.81a1.863 1.863 0 1 0-2.594 2.677l9.396 9.107a1.86 1.86 0 0 0 2.635-.041l14.955-15.434a1.863 1.863 0 1 0-2.677-2.594Z"/>
</svg>
</div>
</dd>
<dd class="item__content">
<div class="timeline-slot-header">
{# Timeline item title #}
<h3 class="timeline-slot-title">Timeline item title</h3>
{# Timeline item subtitle #}
<h4 class="timeline-slot-date">Timeline item subtitle</h4>
</div>
<div class="timeline-slot-content">
{# Timeline item text paragraph #}
<div class="content-text">
{% include '@important-note' with { type: 'timebound', note: 'Time-bound info'} %}
{% 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.'
} %}
{% include '@important-note' with { type: 'timebound', note: 'Time-bound info'} %}
</div>
<div class="content-btn">
{% include '@button' with {
type: 'primary',
modifier: 'icon-arrow-right',
text: 'CTA button'
} %}
</div>
{% include '@accordion--link' with {
buttonText: 'More info'
} %}
</div>
</dd>
</div>
</div>
</dl>
{# Timeline paragraph END #}
</div>
<div class="roadmap-wrapper">
<h2 class="visually-hidden">Roadmap timeline title</h2>
<dl class="roadmap">
<div class="timeline-slot" role="listitem">
<div class="item">
<dd class="item__image">
<div class="timeline-slot-content timeline-slot-content__img">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 170">
<path fill="#005BA9" stroke="#005BA9" d="m135.796 135.775-1.84-11.995a1.864 1.864 0 0 0-3.685.565l1.558 10.154-77.48 11.889L36.824 32.179l47.986-7.363 4.243 27.652a1.863 1.863 0 0 0 2.125 1.56l27.653-4.243 3.65 23.79a1.863 1.863 0 1 0 3.685-.565l-3.934-25.633a1.841 1.841 0 0 0-.252-.687 1.834 1.834 0 0 0-.491-.534L87.475 21.192a1.88 1.88 0 0 0-1.388-.343l-51.67 7.929a1.863 1.863 0 0 0-1.56 2.125l18.09 117.892a1.863 1.863 0 0 0 2.125 1.56l81.165-12.455a1.86 1.86 0 0 0 1.559-2.125ZM88.894 26.855l26.765 19.644-23.205 3.56-3.56-23.204Z" />
<path fill="#005BA9" stroke="#005BA9" d="M112.733 59.255a1.862 1.862 0 0 0-2.124-1.56l-58.795 9.023a1.863 1.863 0 1 0 .565 3.684l58.795-9.022a1.862 1.862 0 0 0 1.559-2.125ZM54.861 86.592l48.135-7.385a1.863 1.863 0 1 0-.565-3.684l-48.135 7.385a1.863 1.863 0 1 0 .565 3.684ZM57.347 102.791l39.027-5.989a1.863 1.863 0 1 0-.565-3.684l-39.027 5.989a1.863 1.863 0 1 0 .565 3.684ZM101.755 110.668a1.863 1.863 0 0 0-2.125-1.56l-40.363 6.194a1.863 1.863 0 1 0 .566 3.684l40.364-6.194a1.862 1.862 0 0 0 1.558-2.124ZM62.232 135.19l50.419-7.737a1.863 1.863 0 1 0-.566-3.684l-50.419 7.737a1.863 1.863 0 1 0 .566 3.684ZM124.322 72.85c-14.197 2.178-23.974 15.503-21.795 29.7 2.178 14.197 15.5 23.974 29.697 21.795 14.196-2.178 23.974-15.5 21.795-29.696-2.178-14.197-15.5-23.978-29.697-21.8Zm7.336 47.81c-12.164 1.866-23.581-6.513-25.447-18.677-1.867-12.167 6.512-23.584 18.676-25.45 12.164-1.867 23.581 6.512 25.448 18.68 1.866 12.164-6.513 23.58-18.677 25.447Z" />
<path fill="#005BA9" stroke="#005BA9" d="m139.037 89.511-13.658 14.095-8.057-7.81a1.863 1.863 0 1 0-2.594 2.677l9.396 9.107a1.86 1.86 0 0 0 2.635-.041l14.955-15.434a1.863 1.863 0 1 0-2.677-2.594Z" />
</svg>
</div>
</dd>
<dd class="item__content">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">Timeline item title</h3>
<h4 class="timeline-slot-date">Timeline item subtitle</h4>
</div>
<div class="timeline-slot-content">
<div class="content-text">
<p class="important-note note--important">Important info</p>
<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>
<p class="important-note note--important">Important info</p>
</div>
<div class="content-btn">
<button type="button" class="button button-primary icon-arrow-right ">
CTA button
</button>
</div>
<div class="accordion--link dropdown--link">
<button aria-controls="accordion--link--single--content" type="button" class="accordion--button accordion--link--button" aria-expanded="false">
More info
<i class="icon-chevron-down" aria-hidden="true"></i> </button>
<div id="accordion--link--single--content" class="accordion--link--content" aria-hidden="true" hidden="hidden">
<ul class="accordion">
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--1">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--1">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--2">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--2">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--3">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--3">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--4">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--4">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--5">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--5">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<div class="item">
<dd class="item__image">
<div class="timeline-slot-content timeline-slot-content__img">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 170">
<path fill="#005BA9" stroke="#005BA9" d="m135.796 135.775-1.84-11.995a1.864 1.864 0 0 0-3.685.565l1.558 10.154-77.48 11.889L36.824 32.179l47.986-7.363 4.243 27.652a1.863 1.863 0 0 0 2.125 1.56l27.653-4.243 3.65 23.79a1.863 1.863 0 1 0 3.685-.565l-3.934-25.633a1.841 1.841 0 0 0-.252-.687 1.834 1.834 0 0 0-.491-.534L87.475 21.192a1.88 1.88 0 0 0-1.388-.343l-51.67 7.929a1.863 1.863 0 0 0-1.56 2.125l18.09 117.892a1.863 1.863 0 0 0 2.125 1.56l81.165-12.455a1.86 1.86 0 0 0 1.559-2.125ZM88.894 26.855l26.765 19.644-23.205 3.56-3.56-23.204Z" />
<path fill="#005BA9" stroke="#005BA9" d="M112.733 59.255a1.862 1.862 0 0 0-2.124-1.56l-58.795 9.023a1.863 1.863 0 1 0 .565 3.684l58.795-9.022a1.862 1.862 0 0 0 1.559-2.125ZM54.861 86.592l48.135-7.385a1.863 1.863 0 1 0-.565-3.684l-48.135 7.385a1.863 1.863 0 1 0 .565 3.684ZM57.347 102.791l39.027-5.989a1.863 1.863 0 1 0-.565-3.684l-39.027 5.989a1.863 1.863 0 1 0 .565 3.684ZM101.755 110.668a1.863 1.863 0 0 0-2.125-1.56l-40.363 6.194a1.863 1.863 0 1 0 .566 3.684l40.364-6.194a1.862 1.862 0 0 0 1.558-2.124ZM62.232 135.19l50.419-7.737a1.863 1.863 0 1 0-.566-3.684l-50.419 7.737a1.863 1.863 0 1 0 .566 3.684ZM124.322 72.85c-14.197 2.178-23.974 15.503-21.795 29.7 2.178 14.197 15.5 23.974 29.697 21.795 14.196-2.178 23.974-15.5 21.795-29.696-2.178-14.197-15.5-23.978-29.697-21.8Zm7.336 47.81c-12.164 1.866-23.581-6.513-25.447-18.677-1.867-12.167 6.512-23.584 18.676-25.45 12.164-1.867 23.581 6.512 25.448 18.68 1.866 12.164-6.513 23.58-18.677 25.447Z" />
<path fill="#005BA9" stroke="#005BA9" d="m139.037 89.511-13.658 14.095-8.057-7.81a1.863 1.863 0 1 0-2.594 2.677l9.396 9.107a1.86 1.86 0 0 0 2.635-.041l14.955-15.434a1.863 1.863 0 1 0-2.677-2.594Z" />
</svg>
</div>
</dd>
<dd class="item__content">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">Timeline item title</h3>
<h4 class="timeline-slot-date">Timeline item subtitle</h4>
</div>
<div class="timeline-slot-content">
<div class="content-text">
<p class="important-note note--payment">Payment info</p>
<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>
<p class="important-note note--payment">Payment info</p>
</div>
<div class="content-btn">
<button type="button" class="button button-primary icon-arrow-right ">
CTA button
</button>
</div>
<div class="accordion--link dropdown--link">
<button aria-controls="accordion--link--single--content" type="button" class="accordion--button accordion--link--button" aria-expanded="false">
More info
<i class="icon-chevron-down" aria-hidden="true"></i> </button>
<div id="accordion--link--single--content" class="accordion--link--content" aria-hidden="true" hidden="hidden">
<ul class="accordion">
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--1">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--1">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--2">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--2">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--3">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--3">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--4">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--4">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--5">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--5">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</dd>
</div>
</div>
<div class="timeline-slot" role="listitem">
<div class="item">
<dd class="item__image">
<div class="timeline-slot-content timeline-slot-content__img">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 170">
<path fill="#005BA9" stroke="#005BA9" d="m135.796 135.775-1.84-11.995a1.864 1.864 0 0 0-3.685.565l1.558 10.154-77.48 11.889L36.824 32.179l47.986-7.363 4.243 27.652a1.863 1.863 0 0 0 2.125 1.56l27.653-4.243 3.65 23.79a1.863 1.863 0 1 0 3.685-.565l-3.934-25.633a1.841 1.841 0 0 0-.252-.687 1.834 1.834 0 0 0-.491-.534L87.475 21.192a1.88 1.88 0 0 0-1.388-.343l-51.67 7.929a1.863 1.863 0 0 0-1.56 2.125l18.09 117.892a1.863 1.863 0 0 0 2.125 1.56l81.165-12.455a1.86 1.86 0 0 0 1.559-2.125ZM88.894 26.855l26.765 19.644-23.205 3.56-3.56-23.204Z" />
<path fill="#005BA9" stroke="#005BA9" d="M112.733 59.255a1.862 1.862 0 0 0-2.124-1.56l-58.795 9.023a1.863 1.863 0 1 0 .565 3.684l58.795-9.022a1.862 1.862 0 0 0 1.559-2.125ZM54.861 86.592l48.135-7.385a1.863 1.863 0 1 0-.565-3.684l-48.135 7.385a1.863 1.863 0 1 0 .565 3.684ZM57.347 102.791l39.027-5.989a1.863 1.863 0 1 0-.565-3.684l-39.027 5.989a1.863 1.863 0 1 0 .565 3.684ZM101.755 110.668a1.863 1.863 0 0 0-2.125-1.56l-40.363 6.194a1.863 1.863 0 1 0 .566 3.684l40.364-6.194a1.862 1.862 0 0 0 1.558-2.124ZM62.232 135.19l50.419-7.737a1.863 1.863 0 1 0-.566-3.684l-50.419 7.737a1.863 1.863 0 1 0 .566 3.684ZM124.322 72.85c-14.197 2.178-23.974 15.503-21.795 29.7 2.178 14.197 15.5 23.974 29.697 21.795 14.196-2.178 23.974-15.5 21.795-29.696-2.178-14.197-15.5-23.978-29.697-21.8Zm7.336 47.81c-12.164 1.866-23.581-6.513-25.447-18.677-1.867-12.167 6.512-23.584 18.676-25.45 12.164-1.867 23.581 6.512 25.448 18.68 1.866 12.164-6.513 23.58-18.677 25.447Z" />
<path fill="#005BA9" stroke="#005BA9" d="m139.037 89.511-13.658 14.095-8.057-7.81a1.863 1.863 0 1 0-2.594 2.677l9.396 9.107a1.86 1.86 0 0 0 2.635-.041l14.955-15.434a1.863 1.863 0 1 0-2.677-2.594Z" />
</svg>
</div>
</dd>
<dd class="item__content">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">Timeline item title</h3>
<h4 class="timeline-slot-date">Timeline item subtitle</h4>
</div>
<div class="timeline-slot-content">
<div class="content-text">
<p class="important-note note--timebound">Time-bound info</p>
<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>
<p class="important-note note--timebound">Time-bound info</p>
</div>
<div class="content-btn">
<button type="button" class="button button-primary icon-arrow-right ">
CTA button
</button>
</div>
<div class="accordion--link dropdown--link">
<button aria-controls="accordion--link--single--content" type="button" class="accordion--button accordion--link--button" aria-expanded="false">
More info
<i class="icon-chevron-down" aria-hidden="true"></i> </button>
<div id="accordion--link--single--content" class="accordion--link--content" aria-hidden="true" hidden="hidden">
<ul class="accordion">
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--1">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--1">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--2">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--2">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--3">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--3">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--4">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--4">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--5">
Croissant ice cream candy chocolate bar
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--5">
<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</dd>
</div>
</div>
</dl>
</div>
{
"faqs": [
{
"buttonText": "Croissant ice cream candy chocolate bar",
"content": "<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>"
},
{
"buttonText": "Croissant ice cream candy chocolate bar",
"content": "<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>"
},
{
"buttonText": "Croissant ice cream candy chocolate bar",
"content": "<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>"
},
{
"buttonText": "Croissant ice cream candy chocolate bar",
"content": "<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>"
},
{
"buttonText": "Croissant ice cream candy chocolate bar",
"content": "<p>Sweet roll jelly-o lemon drops pudding bear claw. Powder cotton candy toffee chupa chups topping. Jelly cupcake cotton candy brownie dessert. Caramels cheesecake bonbon dragée chocolate cake. Cupcake brownie halvah halvah tiramisu tootsie roll cake jelly beans dragée. Lollipop marzipan apple pie bonbon soufflé cookie. Sesame snaps chocolate cheesecake muffin macaroon. Sweet roll cheesecake bonbon shortbread biscuit carrot cake. Sweet sesame snaps jelly croissant icing bonbon. Bear claw brownie wafer muffin lemon drops chupa chups dragée icing. Dragée lollipop jelly-o gingerbread cake. Pudding liquorice chocolate cupcake ice cream lollipop biscuit gingerbread.</p>"
}
]
}
$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;
}
}