The overview layout is a one-column layout with one wide column.
Use the overview layout to show an overview of content and to link to content in the overview.
The overview page typically uses a collection of teasers to show the overview of the content and link to the detail pages about the content.
Examples of overview pages of content:
An overview layout conists of the following parts:
{% 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>"
]
} %}
<main class="news-overview-page">
<section class="overview-layout">
{% block news_overview_content %}
{% include '@heading' with {
"type": "overview-title",
"heading_text": "News and events"
} %}
<h2 class="visually-hidden">Overview</h2>
<ul class="grid-3">
{% for key, article in articles %}
{% if article.event_date %}
{% include '@teaser--teaser--simple' with {
"type": 'teaser-article',
"teaser_uid": article.teaser_uid ~ loop.index,
"paragraph_text": article.paragraph_text,
"title": article.title,
"event_date": {
"text_1": article.text_1,
"datetime_1": article.datetime_1,
"text_2": article.text_2,
"datetime_2": article.datetime_2
},
"teaser_datetime": article.teaser_datetime,
"link_text": article.link_text,
"link": article.link,
"image_src": article.image_src ~ '?random=' ~ key,
"image_alt_text": article.image_alt_text,
"image_ratio": article.image_ratio,
"tags": article.tags,
"label_text": article.label_text
} %}
{% else %}
{% include '@teaser--teaser--simple' with {
"type": 'teaser-article',
"teaser_uid": article.teaser_uid ~ loop.index,
"paragraph_text": article.paragraph_text,
"title": article.title,
"published_date": article.published_date,
"teaser_datetime": article.teaser_datetime,
"link_text": article.link_text,
"link": article.link,
"image_src": article.image_src ~ '?random=' ~ key,
"image_alt_text": article.image_alt_text,
"image_ratio": article.image_ratio,
"tags": article.tags,
} %}
{% endif %}
{% endfor %}
</ul>
{% include '@pagination' with {
total: 20,
active: 4
}%}
{% endblock %}
{% include '@gentinfo' %}
</section>
</main>
<footer>
{% include '@theme-footer' with {
contact: true,
newsletter: true,
social: true,
logo: true
} %}
{% 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 />
</header>
<main class="news-overview-page">
<section class="overview-layout">
<h1 class="overview-title"><span class="overview-title-colon">News and events<span class="colon" aria-hidden="true"></span></span></h1>
<h2 class="visually-hidden">Overview</h2>
<ul class="grid-3">
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=0" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=1" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>News article title text</h3>
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="News article title text">
Read more <span class="visually-hidden">
about News article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=2" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">News article title text</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=3" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>News article title text</h3>
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="News article title text">
Read more <span class="visually-hidden">
about News article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=4" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">News article title text</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>News article title text</h3>
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="News article title text">
Read more <span class="visually-hidden">
about News article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=5" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">News article title text</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=6" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=7" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>News article title text</h3>
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="News article title text">
Read more <span class="visually-hidden">
about News article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=8" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">News article title text</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>News article title text</h3>
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="News article title text">
Read more <span class="visually-hidden">
about News article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=9" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">News article title text</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=10" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=11" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=12" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>Event title comes here</h3>
<div class="event">
<span>
<time datetime="2019-01-07">From the 7th</time>
<time datetime="2019-01-13">until the 13th of January 2019</time>
</span>
</div>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi?</p>
<a href='#' class="read-more standalone-link" title="Event title comes here">
Read more <span class="visually-hidden">
about Event title comes here
</span>
</a>
</div>
<div class="content__first">
<span class="teaser-label">
<i class="icon-calendar"></i>
<span>Event</span>
</span>
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=13" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">Event title comes here</a>
</li>
<li class="teaser teaser-article ">
<article class="teaser-content">
<div class="content__second">
<h3>News article title text</h3>
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?</p>
<a href='#' class="read-more standalone-link" title="News article title text">
Read more <span class="visually-hidden">
about News article title text
</span>
</a>
</div>
<div class="content__first">
<div class="figure-wrapper">
<figure>
<div class="image-wrapper" data-ratio="8:5"><img src="https://loremflickr.com/800/500/ghent?random=14" alt="alt text" /></div>
</figure>
<div class="accolade-inverse bottom-left"></div>
</div>
<div class="tag-list-wrapper">
<ul class="tag-list">
<li>
<span class="tag ">
Just some tag
</span>
</li>
</ul>
</div>
</div>
</article>
<a href="#" class="teaser-overlay-link" tabindex="-1" aria-hidden="true">News article title text</a>
</li>
</ul>
<nav class="pager" aria-labelledby="pagination_1-204">
<h2 id="pagination_1-204" class="visually-hidden">Pagination</h2>
<ul class="pager__items">
<li class="previous"><a href="#" class="previous">
Previous
<span class="visually-hidden">page</span></a></li>
<li><a href="#" title="Go to page 1"><span class="visually-hidden">Page</span>
1
</a></li>
<li class="spacing">...</li>
<li class="prev--number"><a href="#" title="Go to page 3"><span class="visually-hidden">Page</span>
3
</a></li>
<li class="active"><span class="visually-hidden">Page</span>
4
</li>
<li class="next--number"><a href="#" title="Go to page 5"><span class="visually-hidden">Page</span>
5
</a></li>
<li class="spacing">...</li>
<li><a href="#" title="Go to page 20"><span class="visually-hidden">Page</span>
20
</a></li>
<li class="next"><a href="#">
Next
<span class="visually-hidden">page</span></a></li>
</ul>
</nav>
<div class="gentinfo ">
<div class="gentinfo-content">
<h2 class="visually-hidden">Gent info</h2>
<figure class="gentinfo-logo"><img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gent info" class="gentinfo-logo" /></figure>
<p class="">Do you have any questions, complaints, suggestions, notifications etc. concerning the City of Ghent? If this is the case, please contact Gentinfo.</p>
<p class="">We can be reached from Monday to Saturday, from 8.00 am to 7.00 pm.</p>
<ul class="icon-list inline">
<li><i aria-hidden="true" class="icon-phone"></i><a href="tel:092101010">09 210 10 10</a></li>
<li><i aria-hidden="true" class="icon-envelope"></i><a href="mailto:gentinfo@stad.gent">Gentinfo@stad.gent</a></li>
<li><i aria-hidden="true" class="icon-document"></i><a href="#">Contact form</a></li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<section class="theme-footer">
<h2 class="visually-hidden">Theme footer</h2>
<div class="content-container">
<div class="top">
<div class="logo">
<figure><img src="../../styleguide/img/stock/puur_gent_logo.png" alt="Puur Gent" /></figure>
</div>
<div class="contact">
<h3>Contact </h3>
<ul class="icon-list ">
<li><i class="icon-marker" aria-hidden="true"></i><strong>City hall — </strong>Botermarkt 1, 9000 Gent</li>
<li><i class="icon-normalphone" aria-hidden="true"></i><a href="tel:+3292101060">09 210 10 60</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:noreply@stad.gent">noreply@stad.gent</a></li>
<li><i class="icon-document" aria-hidden="true"></i><a href="#">Contactform Ghent mobility</a></li>
</ul>
</div>
</div>
<div class="bottom">
<section class="highlight newsletter highlight--left">
<div class="highlight__inner">
<h3>Subscribe to the newsletter of </h3>
<p class="">Receive the most important mobility news in your mailbox.</p>
<form class="form subscribe">
<label for="subscribe-default">Email address
</label>
<input type="email" id="subscribe-default" name="subscribe-default" class="email" required="true" />
<input type="submit" value="Subscribe" class="" />
</form>
<a href='javascript:(void);' class="standalone-link">
View the list and subscribe to one of our newsletters </a>
</div>
</section>
<div class="social">
<h3>Follow this theme site on social media</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>
</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>
{
"articles": [
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
],
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "News article title text",
"published_date": "Gepost op Zaterdag 7 januari 2019",
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
],
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "News article title text",
"published_date": "Gepost op Zaterdag 7 januari 2019",
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "News article title text",
"published_date": "Gepost op Zaterdag 7 januari 2019",
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
]
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
],
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "News article title text",
"published_date": "Gepost op Zaterdag 7 januari 2019",
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "News article title text",
"published_date": "Gepost op Zaterdag 7 januari 2019",
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
]
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
],
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
],
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
],
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi?",
"title": "Event title comes here",
"event_date": true,
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
],
"label_text": "Event"
},
{
"teaser_uid": "uid",
"paragraph_text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam corporis cumque debitis eligendi harum iste laborum quibusdam ut, vitae voluptate?",
"title": "News article title text",
"published_date": "Gepost op Zaterdag 7 januari 2019",
"text_1": "From the 7th",
"datetime_1": "2019-01-07",
"text_2": "until the 13th of January 2019",
"datetime_2": "2019-01-13",
"teaser_datetime": "2019-01-07",
"link_text": "Read more",
"link": "#",
"image_src": "https://loremflickr.com/800/500/ghent",
"image_alt_text": "alt text",
"image_ratio": "8:5",
"tags": [
"Just some tag"
]
}
],
"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"
]
}
}
}
.overview-page {
position: relative;
// Center accolade on the header for overview pages.
header.header nav.breadcrumb .content-container {
&::after,
&::before {
width: calc(50% + #{$gutter-width} + 1px);
@include desktop {
width: calc(50% + 1px);
}
}
}
}
.overview-layout {
@extend %content-container;
margin-bottom: 4rem;
> .full-width,
> .gentinfo {
@include full-width;
}
}