City of Ghent Style Guide

Overview layout

The overview layout is a one-column layout with one wide column.

When to use this layout

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:

  • A page with an overview of general, informational pages about a certain specific topic.
  • A news articles overview page.
  • An events overview page.

How it works

An overview layout conists of the following parts:

  • Header (required)
  • Page title (heading h1, with City of Ghent colon icon, required)
  • Overview page content before the collection of teasers (optional)
  • Collection of teasers (required)
  • Pagination of teasers (optional)
  • Overview page content after the collection of teasers (optional)
  • Footer (required)
{% 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>
                                &nbsp;<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>
                                &nbsp;<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>
                                &nbsp;<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>
                                &nbsp;<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>
                                &nbsp;<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>
                                &nbsp;<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>
                                &nbsp;<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>
                                &nbsp;<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>
                                &nbsp;<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"
      ]
    }
  }
}
  • Content:
    .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;
      }
    }
    
  • URL: /components/raw/overview-layout/_overview-layout.scss
  • Filesystem Path: components/61-layouts/overview-layout/_overview-layout.scss
  • Size: 443 Bytes