The detail layout is a one-column layout with one small column.
Use the detail layout for detail pages of content.
Examples of detail pages of content:
Do not use the detail layout to present an overview of content. In this case, use the overview layout instead.
A detail layout consists of the following parts:
The detail page content gets a default width of 7/12 based on the container.
However, as also shown in the example, some direct children of the detail page content break out of the default 7 column width.
The following components in the detail page content get a width of 10/12 based on the container:
The following component in the detail page content get a width of 12/12 based on the container:
If you are unable to place these components as direct children of the page content,
you can use the helper classes .w7-o2, .w9-o1, .w10-o1 and .w12 on whatever wrapper element you are dealing with.
{% include '@header' with {
"site_name": "Stad Gent",
"mijn_gent_block_items": [
"<a href='javascript:(void);'>Mijn profiel</a>",
"<a href='javascript:(void);'>Nieuwsbrieven</a>",
"<a href='javascript:(void);'>Historiek</a>"
],
"auth": true,
"search": true,
"mijn_gent_block_auth": true,
"header_search_id": "header-search",
"header_search_label": "Search",
"header_search_placeholder": "Search",
"header_search_text": "Search",
"breadcrumbs_items": [
"<a href='#'>Home</a>",
"<a href='#'>Overview</a>",
"<a href='#'>Theme</a>",
"<a href='#'>Subpage</a>",
"<span>Page title</span>"
],
"hero_image_src": "/styleguide/img/stock/hero_blaarmeersen.jpg" | path,
"hero_image_description": "Caption text comes here."
} %}
<main class="info-page">
<article class="detail-layout">
{% block info_page_article_content %}
{% include '@heading' with {
'type': 'h1',
'heading_text': 'Info page title'
} %}
{% include '@text-to-speech-button' %}
{% include '@summary' %}
{% include '@paragraph' with {
"text": "Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.",
"modifier": "summary-text"
} %}
{% include '@heading' with {
'type': 'h2',
'heading_text': 'This is an H2 paragraph title'
} %}
{% include '@paragraph' with {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur."
} %}
{% include '@heading' with {
'type': 'h3',
'heading_text': 'This is an H3 paragraph title'
} %}
{% render "@table" %}
{% include '@paragraph' with {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio."
} %}
{% include '@cta-block' with {
'type': 'link',
'description': 'Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.',
'links': [
{
'text': 'In the summertime',
'url': '#',
'modifier': 'standalone-link'
},
{
'text': 'When the weather is hot',
'url': '#',
'modifier': 'standalone-link'
}
]
} %}
{% include '@heading' with {
'type': 'h4',
'heading_text': 'This is an H4 paragraph title'
} %}
{% include '@paragraph' with {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio."
} %}
{% include '@image-gallery--multiple' with {
"items": [
{
"src": "https://loremflickr.com/735/459/ghent?random=1",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=2",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=3",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=4",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=5",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=6",
"alt": "placeholder image alternative text",
"caption": "image caption"
},
{
"src": "https://loremflickr.com/735/459/ghent?random=7",
"alt": "placeholder image alternative text"
}
]
} %}
{% include '@paragraph' with {
"text": "Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus."
} %}
{% include '@image-gallery' with {
"src": "https://loremflickr.com/735/459/ghent",
"alt": "placeholder image alternative text",
"caption": "image caption"
} %}
{% include '@paragraph' with {
"text": "Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis."
} %}
{% include '@quote' %}
{% include '@paragraph' with {
"text": "Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in, vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus, posuere ac dui sit amet, volutpat interdum libero."
} %}
{% include '@contact-details' %}
{% include '@list' with {
'type': 'unordered',
"items": [
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
'Aliquam tincidunt mauris eu risus.',
'Vestibulum auctor dapibus neque.',
'Nunc dignissim risus id metus.',
'Cras ornare tristique elit.',
'Vivamus vestibulum ntulla nec ante.',
'Praesent placerat risus quis eros.',
'Fusce pellentesque suscipit nibh.',
'Integer vitae libero ac risus egestas placerat.',
'Vestibulum commodo felis quis tortor.',
'Ut aliquam sollicitudin leo.'
]
}
%}
{% include '@accordion--multiple' with {
items: [
{
'buttonText': 'First item',
'content': '<p>Multiple item accordions are contained in a list element.</p>' ~
'<p>They are indicated with a \'plus\' or \'minus\' icon</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
},
{
'buttonText': 'Second item',
'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
},
{
'buttonText': 'Third item',
'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
},
{
'buttonText': 'Fourth item',
'content': '<p>Single item accordions are indicated by a chevron.</p>' ~
'<p>Below is some nonsens text.</p>' ~
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' ~
'Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, ' ~
'temporibus voluptatem!</p>'
}
]
} %}
{% include '@video' with {
"title": "Promofilm stad Gent.",
"src": "https://www.youtube.com/embed/S0vLmTWUmok",
"audio_description_src": "https://www.youtube.com/embed/S0vLmTWUmok"
} %}
{% include '@timeline' %}
{% endblock %}
</article>
<aside class="top">
{% include '@documents' with {
unique_id: '1',
documents: [
{
'text': 'In the summertime',
'type': 'PDF',
'size': '102kb'
},
{
'text': 'When the weather is hot',
'type': 'PDF',
'size': '102kb'
}
],
other_documents: [
{
'text': 'And another one',
'type': 'PDF',
'size': '102kb'
},
{
'text': 'And another one',
'type': 'PDF',
'size': '102kb'
},
{
'text': 'And another one bites the dust',
'type': 'PDF',
'size': '102kb'
}
]
}
%}
</aside>
</main>
<footer>
{% include '@theme-footer' %}
{% include '@footer' with footerConfig %}
</footer>
<header class="header">
<div class="content-container">
<a href="#" title="Home" class="site-logo " rel="home">
Stad Gent
</a>
<a href='#' class="search--link" title="search">
search </a>
<form class="form search">
<label for="default-header-search">Search
</label>
<input type="search" id="default-header-search" name="default-header-search" class="search" placeholder="Search" required="true" />
<input type="submit" value="Search" class="" />
</form>
<div class="authentication accordion">
<button aria-expanded="false" aria-controls="default-authentication" class="toggle accordion--button">
<span class="avatar">j</span>
<span>Webteam1_VOORNAAM DG_ACHTERNAAM</span>
</button>
<div id="default-authentication" class="accordion--content" aria-hidden="true" hidden>
<article class="content">
<h2>Mijn bibliotheek</h2>
<section class="profile">
<span class="avatar">j</span>
<div class="profile-info">
<span>Webteam1_VOORNAAM DG_ACHTERNAAM</span>
<a href='#' class="button button-primary button-small">
Show profile </a>
</div>
</section>
<section>
<ul class="links">
<li><a href='javascript:(void);'>Overzicht</a></li>
<li><a href='javascript:(void);'>Leestips</a></li>
</ul>
</section>
<section>
<h2>Mijn gent</h2>
<ul class="links">
<li><a href='javascript:(void);'>Mijn profiel</a></li>
<li><a href='javascript:(void);'>Nieuwsbrieven</a></li>
<li><a href='javascript:(void);'>Historiek</a></li>
</ul>
</section>
<footer>
<a href='javascript:(void);' class="button button-small button-secondary">
Afmelden </a>
</footer>
</article>
</div>
</div>
</div>
<nav class="breadcrumb section--default" aria-labelledby="default-header-crumbs">
<div class="content-container">
<h2 id="default-header-crumbs" class="visually-hidden">Breadcrumb</h2>
<ol class="no-style">
<li><a href='#'>Home</a></li>
<li><a href='#'>Overview</a></li>
<li><a href='#'>Theme</a></li>
<li><a href='#'>Subpage</a></li>
<li><span>Page title</span></li>
</ol>
</div>
</nav>
<hr />
<figure class="hero">
<figure>
<div class="image-wrapper" data-ratio="4:1"><img src="../../styleguide/img/stock/hero_blaarmeersen.jpg" alt="" /></div>
</figure>
<figcaption>Caption text comes here.</figcaption>
</figure>
</header>
<main class="info-page">
<article class="detail-layout">
<h1>Info page title</h1>
<button class="readspeaker-button">
<i class="icon-readspeaker" aria-hidden="true"></i><span>Listen</span>
</button>
<aside class="summary-box highlight highlight--top">
<div class="highlight__inner">
<ul class="icon-list ">
<li><i class="icon-calendar" aria-hidden="true"></i><span><time datetime="2018-11-18T18:00:00+02:00">Saturday 18 november 2018 between 18:00 and 22:00</time>Saturday 18 november with continuous activities</span></li>
<li><i class="icon-marker" aria-hidden="true"></i>Inner city</li>
</ul>
<div class="accolade "></div>
</div>
<button type="button" class="button button-primary icon-arrow-right ">
Register for this event
</button>
</aside>
<p class="summary-text">Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.</p>
<h2>This is an H2 paragraph title</h2>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non <strong>bold text</strong> tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget <a href='https://stad.gent' alt='Stad Gent'>egestas orci</a> libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, <a href='javascript:(void);' alt='Link'>tellus</a> sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed <a href='javascript:(void);' alt='File link' download>pharetra</a> ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur.</p>
<h3>This is an H3 paragraph title</h3>
<div class="responsive-table">
<div class="table-wrapper">
<table>
<tr>
<th scope="col">Header column 1</th>
<th scope="col">Header column 2</th>
<th scope="col">Header column 3</th>
<th scope="col">Header column 4</th>
<th scope="col">Header column 5</th>
<th scope="col">Header column 6</th>
</tr>
<tr>
<th scope="row">Header row 2</th>
<td class="success">Row 2, column 2</td>
<td>Row 2, column 3</td>
<td>Row 2, column 4</td>
<td>Row 2, column 5</td>
<td>Row 2, column 6</td>
</tr>
<tr>
<th scope="row">Header row 3</th>
<td>Row 3, column 2</td>
<td>Row 3, column 3</td>
<td>Row 3, column 4</td>
<td>Row 3, column 5</td>
<td>Row 3, column 6</td>
</tr>
<tr>
<th scope="row">Header row 4</th>
<td>Row 4, column 2</td>
<td>Row 4, column 3</td>
<td>Row 4, column 4</td>
<td class="error">Row 4, column 5</td>
<td>Row 4, column 6</td>
</tr>
<tr>
<th scope="row">Header row 5</th>
<td>Row 5, column 2</td>
<td>Row 5, column 3</td>
<td>Row 5, column 4</td>
<td>Row 5, column 5</td>
<td>Row 5, column 6</td>
</tr>
<tr>
<th scope="row">Header row 6</th>
<td>Row 6, column 2</td>
<td>Row 6, column 3</td>
<td class="warning">Row 6, column 4</td>
<td>Row 6, column 5</td>
<td>Row 6, column 6</td>
</tr>
<tr>
<th scope="row">Header row 7</th>
<td>Row 7, column 2</td>
<td>Row 7, column 3</td>
<td>Row 7, column 4</td>
<td>Row 7, column 5</td>
<td>Row 7, column 6</td>
</tr>
<tr>
<th scope="row">Header row 8</th>
<td>Row 8, column 2</td>
<td>Row 8, column 3</td>
<td>Row 8, column 4</td>
<td>Row 8, column 5</td>
<td>Row 8, column 6</td>
</tr>
<tr class="success">
<th scope="row">Header row 9</th>
<td>Row 9, column 2</td>
<td>Row 9, column 3</td>
<td>Row 9, column 4</td>
<td>Row 9, column 5</td>
<td>Row 9, column 6</td>
</tr>
<tr>
<th scope="row">Header row 10</th>
<td>Row 10, column 2</td>
<td>Row 10, column 3</td>
<td>Row 10, column 4</td>
<td>Row 10, column 5</td>
<td>Row 10, column 6</td>
</tr>
<caption>
This is a table caption that describes the table content.
</caption>
</table>
</div>
</div>
<div aria-labelledby="-list-description" class="table-list">
<ul>
<li>
<h3>Header row 2</h3>
<dl>
<dt>Header column 2</dt>
<dd class="success">Row 2, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 2, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 2, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 2, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 2, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 3</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 3, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 3, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 3, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 3, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 3, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 4</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 4, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 4, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 4, column 4</dd>
<dt>Header column 5</dt>
<dd class="error">Row 4, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 4, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 5</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 5, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 5, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 5, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 5, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 5, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 6</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 6, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 6, column 3</dd>
<dt>Header column 4</dt>
<dd class="warning">Row 6, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 6, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 6, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 7</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 7, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 7, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 7, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 7, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 7, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 8</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 8, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 8, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 8, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 8, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 8, column 6</dd>
</dl>
</li>
<li class="success">
<h3>Header row 9</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 9, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 9, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 9, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 9, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 9, column 6</dd>
</dl>
</li>
<li>
<h3>Header row 10</h3>
<dl>
<dt>Header column 2</dt>
<dd>Row 10, column 2</dd>
<dt>Header column 3</dt>
<dd>Row 10, column 3</dd>
<dt>Header column 4</dt>
<dd>Row 10, column 4</dd>
<dt>Header column 5</dt>
<dd>Row 10, column 5</dd>
<dt>Header column 6</dt>
<dd>Row 10, column 6</dd>
</dl>
</li>
</ul>
<div class="list-description" id="-list-description">
This is a table caption that describes the table content.
</div>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio.</p>
<section class="highlight cta-block link highlight--left">
<div class="highlight__inner">
<p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>
<ul class="links">
<li>
<a href='#' class="button button-primary">
In the summertime </a>
</li>
<li>
<a href='#' class="standalone-link">
When the weather is hot </a>
</li>
</ul class="links">
</div>
</section>
<h4>This is an H4 paragraph title</h4>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio.</p>
<div class="image-gallery--wrapper multiple">
<ul class="image-gallery js-lightbox">
<li>
<a href="https://loremflickr.com/735/459/ghent?random=1" 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://loremflickr.com/735/459/ghent?random=1" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=2" 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://loremflickr.com/735/459/ghent?random=2" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=3" 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://loremflickr.com/735/459/ghent?random=3" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=4" 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://loremflickr.com/735/459/ghent?random=4" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=5" 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://loremflickr.com/735/459/ghent?random=5" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=6" 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://loremflickr.com/735/459/ghent?random=6" alt="placeholder image alternative text" /></div>
<figcaption>image caption</figcaption>
</figure>
</a>
</li>
<li>
<a href="https://loremflickr.com/735/459/ghent?random=7" class="gallery-link" aria-labelledby="image-gallery__open-gallery">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent?random=7" alt="placeholder image alternative text" /></div>
</figure>
</a>
</li>
<li class="image-gallery__show-more">
<div class="show-more__content">
<span class="show-more__total">7</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> -->
<p class="">Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus.</p>
<div class="image-gallery--wrapper single">
<div class="image-gallery js-lightbox">
<a href="https://loremflickr.com/735/459/ghent" aria-labelledby="image-gallery__open-gallery" class="gallery-link">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/735/459/ghent" 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> -->
<p class="">Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis.</p>
<div class="quote-wrapper">
<div class="quote">
<blockquote>
<div class="content">
<p>
This is a huge quote on lots of lines. Dessert cookie cotton candy. Gummies jelly beans cupcake liquorice carrot cake chocolate bar jelly-o gummies gingerbread.Bonbon marshmallow dragée danish lollipop cheesecake gingerbread.
</p>
</div>
<footer>
Daniel Termont, Mayor Ghent
</footer>
</blockquote>
</div>
</div>
<p class="">Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in, vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus, posuere ac dui sit amet, volutpat interdum libero.</p>
<section class="highlight contact-details highlight--top">
<div class="highlight__inner">
<h2>Contact details</h2>
<div class="contact-details-column">
<ul class="icon-list ">
<li><i class="icon-marker" aria-hidden="true"></i><strong>Stadhuis</strong> — Botermarkt 1, 9000 Gent</li>
<li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+32 9 266 50 00" alt="Person tel">09 266 50 00</a></li>
<li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 476 23 42 98" alt="Person mobile phone">0476 23 42 98</a></li>
<li><i class="icon-fax" aria-hidden="true"></i><span><a href="tel:+32 9 266 50 19" alt="Person fax number">09 266 50 19</a> (Fax)</span></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:daniel.termont@stad.gent" alt="Person mail link">daniel.termont@stad.gent</a></li>
<li><i class="icon-url" aria-hidden="true"></i><a href="http://stad.gent" alt="Website link">http://stad.gent</a></li>
</ul>
</div>
<div class="contact-details-column">
<div class="image-wrapper" data-ratio="1:1">
<figure><img src="https://via.placeholder.com/280x280&text=1:1+(280x280)" alt="Person avatar" /></figure>
</div>
</div>
</div>
</section>
<ul class="">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Nunc dignissim risus id metus.</li>
<li>Cras ornare tristique elit.</li>
<li>Vivamus vestibulum ntulla nec ante.</li>
<li>Praesent placerat risus quis eros.</li>
<li>Fusce pellentesque suscipit nibh.</li>
<li>Integer vitae libero ac risus egestas placerat.</li>
<li>Vestibulum commodo felis quis tortor.</li>
<li>Ut aliquam sollicitudin leo.</li>
</ul>
<ul class="accordion">
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--1">
First item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--1">
<p>Multiple item accordions are contained in a list element.</p>
<p>They are indicated with a 'plus\' or \'minus\' icon</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--2">
Second item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--2">
<p>Single item accordions are indicated by a chevron.</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--3">
Third item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--3">
<p>Single item accordions are indicated by a chevron.</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
<li>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="accordion--multiple--content--4">
Fourth item
</button>
</h3>
<div class="accordion--content" id="accordion--multiple--content--4">
<p>Single item accordions are indicated by a chevron.</p>
<p>Below is some nonsens text.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa dolorum enim molestiae molestias nemo nulla quas sed, temporibus voluptatem!</p>
</div>
</li>
</ul>
<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 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>
</article>
<aside class="top">
<div class="documents accordion">
<h2>Documents</h2>
<ul class="links">
<li>
<a href='javascript:(void);' class="standalone-link" download>
In the summertime </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
When the weather is hot </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
</ul>
<h3>
<button class="accordion--button" aria-expanded="false" aria-controls="documents--content--documents-1">
There are 3 other documents available
</button>
</h3>
<div class="accordion--content" id="documents--content--documents-1">
<ul class="links">
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
<li>
<a href='javascript:(void);' class="standalone-link" download>
And another one bites the dust </a>
<span class="file-type">
PDF
<span class="file-size">
(102kb)
</span>
</span>
</li>
</ul>
</div>
</div>
</aside>
</main>
<footer>
<section class="theme-footer">
<h2 class="visually-hidden">Theme footer</h2>
<div class="content-container">
<div class="bottom">
</div>
</div>
</section>
<section class="footer">
<h2 class="visually-hidden">Footer</h2>
<div class="footer-top">
<div class="content-container">
<div class="footer--column">
<div class="gentinfo-block">
<div class="gentinfo-block-content">
<h3 class="visually-hidden">Gentinfo</h3>
<figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" /></figure>
<p class="">We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.</p>
<ul class="icon-list ">
<li><i class="icon-phone" aria-hidden="true"></i><a href="tel:+32 9 210 10 10">09 210 10 10</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
<li><i class="icon-document" aria-hidden="true"></i><a href="https://stad.gent/contact">Contact form</a></li>
</ul>
</div>
<button type="button" class="button button-primary gentinfo-chat-button button icon-chat-round ">
Chat with Gentinfo
</button>
</div>
</div>
<div class="footer--column">
<h3>Useful links</h3>
<ul class="">
<li><a href="https://jobs.gent.be/">Vacancies</a></li>
<li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/over-gent/kaarten-cijfers-en-data/gent-kaart/stadsplan">City plan</a></li>
<li><a href="https://persruimte.stad.gent/nl">City of Ghent newsroom</a></li>
</ul>
</div>
<div class="footer--column">
<h3>Follow the city of Ghent</h3>
<div class="social-list">
<ul class="">
<li><a href="https://www.facebook.com/stadsbestuurgent"><i aria-hidden="true" class="icon-facebook"></i><span class="visually-hidden">Facebook</span></a></li>
<li><a href="https://www.twitter.com/stadgent"><i aria-hidden="true" class="icon-twitter"></i><span class="visually-hidden">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/company/stad-gent"><i aria-hidden="true" class="icon-linkedin"></i><span class="visually-hidden">LinkedIn</span></a></li>
<li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw"><i aria-hidden="true" class="icon-youtube"></i><span class="visually-hidden">Youtube</span></a></li>
<li><a href="https://www.instagram.com/stadgent/"><i aria-hidden="true" class="icon-instagram"></i><span class="visually-hidden">Instagram</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-bottom content-container">
<div class="footer--column">
<ul class="">
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/gebruiksvoorwaarden-website-stad-gent">Terms of use</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/met-respect-voor-uw-privacy">Privacy</a></li>
<li><a href="https://stad.gent/nl/responsible-disclosure">Responsible disclosure</a></li>
<li><a href="https://stad.gent/nl/over-gent-en-het-stadsbestuur/juridische-info/toegankelijkheidsverklaring-stad-gent">Accessibility statement</a></li>
<li><a href="#">Cookie settings</a></li>
</ul>
</div>
<div class="footer--column partnership">
<span>In cooperation with District09</span><i aria-hidden="true" class="icon-district09"></i>
</div>
</div>
</section>
</footer>
{
"footerConfig": {
"gentinfo": {
"title": "gentinfo",
"description": "We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.",
"phone": {
"label": "09 210 10 10",
"machine": "+32 9 210 10 10"
},
"email": "gentinfo@stad.gent",
"form": "Contact form",
"chat": "Chat with Gentinfo"
},
"disclaimer": {
"title": "Useful links",
"links": [
"Vacancies",
"City plan",
"City of Ghent newsroom"
]
},
"social": {
"title": "Follow the city of Ghent"
},
"bottom": {
"partnership": "In cooperation with District09",
"links": [
"Terms of use",
"Privacy",
"Responsible disclosure",
"Accessibility statement",
"Cookie settings"
]
}
}
}
.detail-layout {
@extend %content-container;
font-size: .9rem;
line-height: 1.8;
// Give each direct child a specific width.
// This is a fallback width given to all children of the detail layout.
.w7-o2,
> * {
@include desktop {
@include set-layout('width-7', 'offset-2');
}
}
h1 {
width: 100%;
+ .tag {
display: inline-block;
width: auto;
margin-top: -.4rem;
margin-bottom: 2rem;
}
}
> div,
> section,
> aside,
> article {
margin-top: 2rem;
margin-bottom: 2rem;
}
> ul,
> ol {
padding-left: 2rem;
}
.w9-o1 {
@include desktop {
@include set-layout('width-9', 'offset-1');
}
}
.w10-o1,
> .highlight,
> .image-gallery--wrapper.multiple {
@include desktop {
@include set-layout('width-10', 'offset-1');
}
}
> ul.accordion {
@include desktop {
@include set-layout('width-7', 'offset-2');
}
.accordion--content p {
line-height: 1.75;
}
}
> .quote-wrapper {
@include desktop {
@include set-layout();
> .quote {
@include set-layout('width-9', 'offset-1');
}
}
}
.w12,
> .timeline-wrapper,
> .programme-wrapper {
@include set-layout();
@include extra-wide;
}
.readspeaker-button {
display: block;
width: auto;
margin-top: -.4rem;
margin-bottom: 2rem;
}
.summary-text {
@include bold-text;
}
.openinghours-widget[data-type="month"] {
@include desktop {
@include month-widget-mobile;
}
@include breakpoint(1200px) {
@include month-widget-desktop;
}
}
> .full-width {
@include full-width;
}
> .highlight--top {
.highlight__inner {
@include desktop {
padding-right: 0;
padding-left: 0;
> *:not(.accolade) {
width: span(7 of 10);
margin-left: span(1 wide of 10);
}
}
}
}
}
$bulb-image-width: 6rem;
aside.top,
aside.bottom {
@extend %content-container;
> * {
@include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
padding-top: 3rem;
border-top: 2px solid;
@include tablet {
padding-top: 2rem;
}
@include desktop {
@include set-layout();
width: 100%;
margin-bottom: 2rem;
margin-left: 0;
padding-right: span(2 wide of 12);
padding-left: span(2 wide of 12);
}
}
> p {
padding-top: 0;
border-top: 0;
}
}
aside.top {
position: relative;
margin: 5rem auto 0;
> div:first-child {
&::before {
@include spot-image('lightbulb', $bulb-image-width);
display: block;
position: relative;
margin: (-$bulb-image-width) auto 1rem;
z-index: z('default');
@include tablet {
position: absolute;
top: -($bulb-image-width/2);
right: span(1 of 12);
margin: 0;
}
}
}
}
aside.bottom {
.changed-date {
@include desktop {
@include set-layout('width-9', 'offset-2');
}
padding: 0;
}
}