City of Ghent Style Guide

Sidebar layout

The sidebar layout is a two-column layout version of the overview layout with a right-side column to show info.

When to use this layout

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 page with a highlight at the right side to give users extra info about the page.
  • A cart page where you have a summary at the right side.

How the layout works

A filter layout conists of the following parts:

  • Header (required)
  • Right-side column with highlight or other components (required)
  • Main content column on the left (required) with:
    • Page title (heading h1, required)

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.

Sidebar Right Layout 

{% 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="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" />
            <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="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">
                    <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">
                        <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"
      ]
    }
  }
}
  • Content: 
    .sidebar-right-layout {
  @extend %content-container;

  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4rem;

  .sidebar {
    width: 100%;

    @include desktop {
      width: span(4 of 12);
    }
  }

  .content {
    width: 100%;

    @include desktop {
      width: span(8 wide of 12);
      padding-right: gutter();
    }
  }
}
  • URL: /components/raw/sidebar-right-layout/_sidebar-right-layout.scss
  • Filesystem Path: components/61-layouts/sidebar-right-layout/_sidebar-right-layout.scss
  • Size: 338 Bytes