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--subsite-hero' 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>"
  ],
  "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,
              "tag": article.tag,
              "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,
            "tag": article.tag
          } %}
          {% endif %}
        {% endfor %}
      </ul>

      {% include '@pagination' with {
        total: 20,
        active: 4
      }%}

    {% endblock %}

    {% include '@gentinfo' %}
  </section>
</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="header-search">Search
            </label>

            <input type="search" id="header-search" name="header-search" class="search" placeholder="Search" required="true" />
            <input type="submit" value="Search" class="" />
        </form>

        <div class="mijn-gent-block accordion">

            <button aria-expanded="false" aria-controls="default-mijn-gent" class="toggle accordion--button">
                <span class="avatar">j</span>
                <span>James M.</span>
            </button>

            <div id="default-mijn-gent" 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>John Doe</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="system-breadcrumb--default">
        <div class="content-container">
            <h2 id="system-breadcrumb--default" 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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                News article title text
                            </span>
                            read more</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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                News article title text
                            </span>
                            read more</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">
                            <span class="visually-hidden">
                                News article title text
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                News article title text
                            </span>
                            read more</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">
                            <span class="visually-hidden">
                                News article title text
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                Event title comes here
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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">
                            <span class="visually-hidden">
                                News article title text
                            </span>
                            read more</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>

                        <span class="tag ">
                            Just some tag
                        </span>

                    </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="">Gentinfo is h&eacute;t centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen,&hellip; over de Stad Gent? Neem dan contact op met Gentinfo.</p>

                <p class=""><strong>Bereikbaar van maandag t.e.m. zaterdag van 8 tot 19 uur.</strong></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="#!">Contactformulier</a></li>
                </ul>

            </div>
        </div>
    </section>
</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">
                            <h2 class="visually-hidden">Gentinfo</h2>
                            <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" alt="Gentinfo tel link">09 210 10 10</a></li>
                                <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:gentinfo@stad.gent" alt="Gentinfo mail link">gentinfo@stad.gent</a></li>
                                <li><i class="icon-document" aria-hidden="true"></i><a href="#">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">
                    <div class="dg-block-disclaimer">
                        <h2>Useful links</h2>

                        <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>
                            <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info">Legal information</a></li>
                            <li><a href="https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/met-respect-voor-uw-privacy">Privacy</a></li>
                        </ul>

                    </div>
                </div>

                <div class="footer--column">
                    <div class="dg-block-post-address">
                        <h2>Postal address</h2>
                        <address>
                            City of Ghent<br />
                            Botermarkt 1<br />
                            9000 Ghent
                        </address>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom content-container">

            <div class="footer--column">
                <div class="db-block-partnership">
                    <p class="">In cooperation with Digipolis</p>
                    <i aria-hidden="true" class="icon-digipolis"></i>
                </div>
            </div>

            <div class="footer--column">
                <div class="dg-blocks-social">
                    <span>Follow the City of Ghent on social media</span>
                    <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>
</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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
      "tag": "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",
        "Legal information",
        "Privacy"
      ]
    },
    "address": {
      "title": "Postal address",
      "name": "City of Ghent",
      "street": "Botermarkt 1",
      "city": "9000 Ghent"
    },
    "bottom": {
      "partnership": "In cooperation with Digipolis",
      "social": "Follow the City of Ghent on social media"
    }
  }
}
  • 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