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",
"search": 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 '@content-header' with {
'modifier': 'primary dark-background overlap',
'heading_text': 'News and events',
'speech_button': false,
'summary': false,
'summary_text': '',
'image': false
} %}
{% 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."
} %}
<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 '@cta-block' with {
'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 '@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" />
<button type="submit" class="button button- ">
Search
</button>
</form>
</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>
</header>
<main class="news-overview-page">
<section class="overview-layout">
<div class="content-header-container primary dark-background overlap">
<div class="left">
<h1>News and events</h1>
</div>
</div>
<p>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>
<h2 class="visually-hidden">Overview</h2>
<ul class="grid-3">
<li class="teaser teaser-article">
<article class="teaser-content">
<div class="content__second">
<h3 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>News article title text</span></h3>
<div class="date">
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
</div>
<p>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="tags-label-wrapper">
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>News article title text</span></h3>
<div class="date">
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
</div>
<p>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="tags-label-wrapper">
</div>
<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>
</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 class="bg-none h4"><span>News article title text</span></h3>
<div class="date">
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
</div>
<p>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="tags-label-wrapper">
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>News article title text</span></h3>
<div class="date">
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
</div>
<p>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="tags-label-wrapper">
</div>
<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>
</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 class="bg-none h4"><span>News article title text</span></h3>
<div class="date">
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
</div>
<p>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="tags-label-wrapper">
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>Event title comes here</span></h3>
<div class="date">
<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>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">
<div class="tags-label-wrapper">
<span class="label teaser-article"><i class="icon-tag"></i>Event</span>
</div>
<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>
</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 class="bg-none h4"><span>News article title text</span></h3>
<div class="date">
<time class="published" datetime="2019-01-07" pubdate="pubdate">Gepost op Zaterdag 7 januari 2019</time>
</div>
<p>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="tags-label-wrapper">
</div>
<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>
</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="standalone-link back">
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="#" class="standalone-link">
Next
<span class="visually-hidden">page</span></a></li>
</ul>
</nav>
<section class="cta-block image-none">
<div class="cta-block__content">
<div class="feature-block secondary ">
<p>
<p>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-large button-secondary">
In the summertime </a>
</li>
<li>
<a href='#' class="standalone-link">
When the weather is hot </a>
</li>
</ul class="links">
</p>
</div>
</div>
</section>
<div class="gentinfo ">
<div class="gentinfo-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
<p>Do you have any questions, complaints, suggestions, notifications etc. concerning the City of Ghent? If this is the case, please contact Gentinfo.</p>
<p>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">
<h2 class="h3">Contact </h2>
<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-subscribe" aria-hidden="true"></i><a href="#">Contactform Ghent mobility</a></li>
</ul>
</div>
</div>
<div class="bottom">
<div class="feature-block secondary newsletter">
<h3>Subscribe to the newsletter of </h3>
<p>
<p>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" />
<button type="submit" class="button button- button-secondary">
Subscribe
</button>
</form>
<div class="more-link">
<a href='javascript:(void);' class="standalone-link">
View the list and subscribe to one of our newsletters </a>
</div>
</p>
</div>
<div class="social">
<h3 class="h4">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 dark-background">
<div class="gentinfo-block-content">
<h3 class="gentinfo-title">Gent<strong>info</strong></h3>
<p>Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!</p>
<p><i class="icon-clock" aria-hidden="true"></i>Monday to Saturday from 8.00 am until 7.00 pm.</p>
<ul class="icon-list inline">
<li><i class="icon-phone" aria-hidden="true"></i><a class="no-icon" href="tel:+32 9 210 10 10">09 210 10 10</a></li>
<li><i class="icon-envelope" aria-hidden="true"></i><a class="no-icon" href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
<li><i class="icon-subscribe" aria-hidden="true"></i><a class="no-icon" href="https://stad.gent/contact">Contact form</a></li>
</ul>
</div>
<button type="button" class="button button-secondary gentinfo-chat-button icon-chat-round icon-left ">
Chat with us
</button>
</div>
</div>
<div class="footer--column">
<h4>Useful links</h4>
<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">
<h4>Follow the city of Ghent</h4>
<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": "Do you have questions, suggestions, complaints, ... about the City of Ghent? We are here for you!",
"open": "Monday to Saturday from 8.00 am until 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 us"
},
"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: 80px;
> .content-header-container {
margin-right: -20px;
margin-left: -20px;
@include tablet {
width: calc(100% + 135px * 2);
margin-left: -135px;
padding-right: 135px;
padding-left: 135px;
}
&:not(.image) {
// @todo: + .teasers
& + .summary-box,
& + .table-of-contents,
& + .partner-block,
& + p {
@include col(12);
position: relative;
margin-top: -150px;
z-index: 1;
@include tablet {
margin-top: -120px;
}
}
+ .partner-block,
+ p {
max-width: 100%;
padding: 20px;
background-color: color('white');
@include tablet {
padding: 60px;
}
}
}
}
> .cta-block {
@include desktop {
@include col(11);
@include col-offset(1);
}
&.image-left,
&.image-right {
@include col(12);
}
}
> .full-width,
> .gentinfo {
@include full-width;
}
}