The sidebar layout is a two-column layout version of the overview layout with a right-side column to show info.
Use the sidebar layout for overview pages where it should be possible to add extra content on the right side like a highlight or cart summary.
Examples of overview pages of content with filters:
A filter layout conists of the following parts:
On desktop resolutions and tablets in landscape mode, this two-column layout is used.
On tablets in portrait mode and mobile resolutions, the two-column layout is transformed to a one-column layout. This is done by putting the left-side column with filters into a modal that is opened by clicking a button “Filters” to toggle the modal and show the filters.
See the example for the responsive behavior of the sidebar layout on various screen resolutions.
{% 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="filter-page">
<div class="sidebar-right-layout">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
</div>
<div class="sidebar">
{% include '@highlight' with {
"content": "<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p>"
} %}
</div>
</main>
<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" />
<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="filter-page">
<div class="sidebar-right-layout">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.</p>
</div>
<div class="sidebar">
<section class="highlight">
<div class="highlight__inner">
<i class="icon-star-empty" aria-hidden="true"></i>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</section>
</div>
</main>
<footer>
<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>
{
"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"
]
}
}
}
.sidebar-right-layout {
@extend %content-container;
display: flex;
flex-wrap: wrap;
margin-bottom: 4rem;
gap: $grid-gutter-width;
.sidebar {
width: 100%;
@include desktop {
@include col(4);
}
}
.content {
width: 100%;
@include desktop {
@include col(8);
}
}
}