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 {
"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='https://stad.gent'>Stad.gent</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,
              "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,
            "tag": article.tag
          } %}
          {% endif %}
        {% endfor %}
      </ul>

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

    {% endblock %}

    {% include '@gentinfo' %}
  </section>
</main>

<footer>
  {% include '@footer' %}
</footer>
<header class="header">
    <div class="content-container">
        <a href="#" title="Home" class="site-logo " rel="home">

        </a>

        <a href='#' class="search--link" title="search">
            search</a>

        <form class="form search">
            <label for="">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="mijn_gent_content" class="toggle accordion--button">
                <span class="avatar">j</span>
                <span>James M.</span>
            </button>

            <div id="mijn_gent_content" class="accordion--content" aria-hidden="true" hidden>
                <article class="content">
                    <h2>Mijn gent</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>
                            <li><a href='javascript:(void);'>Mijn profiel</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">
        <div class="content-container">
            <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
            <ol class="breadcrumb no-style">
                <li><a href='https://stad.gent'>Stad.gent</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>
                                <img src="https://loremflickr.com/800/500/ghent?random=0" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=1" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=2" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=3" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=4" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=5" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=6" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=7" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=8" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=9" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=10" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=11" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=12" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=13" alt="alt text" />

                            </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>
                                <img src="https://loremflickr.com/800/500/ghent?random=14" alt="alt text" />

                            </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>

                <img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gent info" class="gentinfo-logo" />

                <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>

                            <img src="../../styleguide/img/svg/gentinfo-logo.svg" alt="Gentinfo" class="gentinfo-logo" />

                            <p class="">Gentinfo is available from Monday till Saturday from 08:00 till 19:00</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="#">Contactformulier</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='javascript:(void);'>Vacancies</a></li>
                            <li><a href='javascript:(void);'>City plan</a></li>
                            <li><a href='https://persruimte.stad.gent'>Press room City of Ghent</a></li>
                            <li><a href='javascript:(void);'>Legal information and privacy</a></li>
                            <li><a href='https://www.example.com'>Another link</a></li>
                        </ul>

                    </div>
                </div>
                <div class="footer--column">
                    <div class="dg-block-post-address">
                        <h2>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>Volg Stad Gent op sociale 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",
      "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",
      "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"
    },
    {
      "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",
      "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"
    },
    {
      "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",
      "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",
      "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",
      "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"
    },
    {
      "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",
      "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",
      "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",
      "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",
      "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",
      "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",
      "tag": "Just some tag"
    }
  ]
}
  • 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;
    
      .intro {
        margin-bottom: 2rem;
        font-size: .9rem;
      }
    
      > .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: 506 Bytes