<header class="header section--wrapper">
    <div class="content-container">

        <nav class="hamburger-menu visible-mobile header-component">
            <button class="hamburger-menu__toggle">Menu</button>
            <div class="hamburger-menu__overlay"></div>
            <div class="hamburger-menu__drawer" tabindex="-1">
                <a href="javascript:void(0);" class="close">Sluit menu <i class="icon-cross"></i></a>
                <ul class="no-style">
                    <li><a href='javascript:void(0);'>Menu item 1</a></li>
                    <li><a href='javascript:void(0);' class='active'>Menu item 2</a></li>
                    <li><a href='javascript:void(0);'>Menu item 3</a></li>
                    <li><a href='javascript:void(0);'>Menu item 4</a></li>
                </ul>
            </div>
        </nav>
        <div id="logo" class="header-component">
            <div class="site-logo">
                <a href="#" title="Home" rel="home">
      <img src="/styleguide/img/svg/logo.svg" alt="Home"  />
    </a>
                <div class="site-name">
                    <div>
                        <p class="">City of Ghent Sitename</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="profile" class="header-component right">
            <div class="mijn-gent-block">

                <div class="toggle">
                    <div class="label">
                        <a href='javascript:(void);' class="toggle" title="">Username</a>
                    </div>
                    <div class="picture">
                        <img src="https://via.placeholder.com/32x32" alt="Username" />
                    </div>
                </div>

                <div class="content">
                    <div class="mijn-gent-component">
                        <header>
                            <h3>Mijn Bibliotheek Gent</h3>
                        </header>

                        <section>
                            <ul class="no-style">
                                <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>

                    </div>
                    <div class="mijn-gent-component">
                        <header>
                            <h3>Mijn Gent</h3>
                        </header>

                        <section>
                            <ul class="no-style">
                                <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>

                    </div>
                    <footer>
                        <a href='javascript:(void);' title="">Afmelden</a>
                    </footer>
                </div>

            </div>
        </div>

        <div id="header-search-mobile" class="header-search-mobile header-component right">
            <form class="form form-search">
                <div class="form-label">
                    <label for="">
</label>
                </div>
                <input type="search" name="header-search-mobile" id="header-search-mobile" placeholder="What are you looking for?" class="inline">
                <input type="submit" value="Search" class="btn btn--inline" />
            </form>
            <a href="javascript:(void);" class="close">Sluiten</a>
        </div>
        <div id="header-search" class="header-search header-component right">
            <form class="form form-search">
                <div class="form-label">
                    <label for="">
</label>
                </div>
                <input type="search" name="header-search" id="header-search" placeholder="What are you looking for?" class="inline">
                <input type="submit" value="Search" class="btn btn--inline" />
            </form>
        </div>
    </div>

    <nav class="header--main-menu">
        <div class="content-container">
            <ul class="no-style">
                <li><a href='javascript:void(0);'>Menu item 1</a></li>
                <li><a href='javascript:void(0);' class='active'>Menu item 2</a></li>
                <li><a href='javascript:void(0);'>Menu item 3</a></li>
                <li><a href='javascript:void(0);'>Menu item 4</a></li>
            </ul>
        </div>
    </nav>
</header>

<nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
    <ol class="content-container breadcrumb">
        <li><a href='#'>Stad.gent</a></li>
        <li><a href='#'>Overview</a></li>
        <li><span>Overview</span></li>
        <li><span>Overview</span></li>
        <li><span>Page title</span></li>
    </ol>
</nav>

<div class="page-container section--default">
    <section class="section--default">
        <div class="content-container">
            <div class="row">
                <div class="col-tablet-7">
                    <h1>Detail page title</h1>
                    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo
                        urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget egestas orci libero eu justo. Curabitur
                        sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum
                        interdum elementum sodales, tellus sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed pharetra ante non mollis consequat. Pellentesque a est neque. Nullam
                        maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur.</p>
                    <p class="">Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu.
                        Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut
                        felis turpis. Aliquam vitae cursus metus.</p>

                    <h2>Subtitle</h2>
                    <p class="">Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse
                        eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum
                        ligula a, pretium tellus. Sed pretium vulputate iaculis.</p>

                    <a href="javascript:(void);" class="cta-link">
  <span class="icon icon-link"></span>
  <h3 class="title">Do you want more info?</h3>
  <span class="document">Visit our website</span>
</a>

                    <h3>Subtitle</h3>
                    <p class="">Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in,
                        vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus,
                        posuere ac dui sit amet, volutpat interdum libero.</p>
                </div>
                <div class="col-tablet-5">
                    <figure>
                        <img src="https://loremflickr.com/800/532/ghent" alt="Image alt text" />
                        <figcaption>Figure caption comes here.</figcaption>

                    </figure>
                </div>
            </div>
        </div>
    </section>
</div>
<section class="section--inverse">
    <div class="content-container">
        <div class="row">
            <div class="col-mobile-12">
                <h3>Bottom section title</h3>
                <ul class="links">
                    <li><a href='#'>item 1 <span class='tag attachment-type'>xlsx</span></a></li>
                    <li><a href='#'>item 2 <span class='tag attachment-type'>xlsx</span></a></li>
                    <li><a href='#'>item 3 <span class='tag attachment-type'>xlsx</span></a></li>
                    <li><a href='#'>item 4 <span class='tag attachment-type'>xlsx</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

<div class="section--accent newsletter-block">
    <div class="content-container">
        <div class="newsletter-block__image">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/500x250" alt="Newsletter image" />
            </div>
            <div class="island section--wrapper">
                <h2>Don't miss the latest news of Ghent.</h2>
            </div>
        </div>
        <div class="island section--default newsletter-block__content">
            <div>
                <h3>Subscribe to the newsletter of the City of Ghent.</h3>
                <ul class="">
                    <li>Receive weekly updates of the City of Ghent.</li>
                    <li>Be the first to discover new events.</li>
                    <li>Already more then 12.0000 subscribers.</li>
                </ul>
            </div>

            <div class="newsletter-block__form">
                <input type="email" name="newsletter-email" id="newsletter-email" />

                <input type="submit" value="Subscribe" class="btn " />
            </div>
        </div>
        <div class="island section--wrapper newsletter-block__social-media">
            <h3>Follow us on:</h3>
            <ul class="no-style">
                <li><a href="https://www.facebook.com/stadsbestuurgent" title="Facebook"><i class="icon-facebook"></i><span class="element-invisible">Facebook</span></a></li>
                <li><a href="https://twitter.com/stadgent" title="Twitter"><i class="icon-twitter"></i><span class="element-invisible">Twitter</span></a></li>
                <li><a href="https://www.linkedin.com/company/stad-gent" title="LinkedIn"><i class="icon-linkedin"></i><span class="element-invisible">LinkedIn</span></a></li>
                <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" title="Youtube"><i class="icon-youtube"></i><span class="element-invisible">Youtube</span></a></li>
                <li><a href="https://www.instagram.com/stadgent/" title="Instagram"><i class="icon-instagram"></i><span class="element-invisible">Instagram</span></a></li>
            </ul>
        </div>
    </div>
</div>

<footer class="footer section--wrapper" role="contentinfo" data-columns="4">
    <div class="content-container">
        <div class="row">
            <div class="footer--column">
                <div class="section--accent island dg-default-block">
                    <h3>Gentinfo</h3>
                    <ul class="no-style">
                        <li><a class="phone" href="tel:+3288888888">08 888 88 88 - mo - sat from 8-19u</a></li>
                        <li><a class="email" href="mailto:gentinfo@stad.gent">gentinfo@stad.gent</a></li>
                        <li><a class="link" href="">Contact form</a></li>
                        <li><a class="btn textballoon">Online Chat</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer--column">
                <div class="dg-block-post-address island">
                    <h3>Mailing address</h3>
                    <p class=""><span>City of Ghent</span><br>
                        <span> Botermarkt 1</span><br>
                        <span>9000 Ghent</span></p>
                </div>
                <ul class="dg-block-links island">
                    <li><a href='https://stad.gent/werken-ondernemen/werken/werken-bij-de-stad-gent/vacatures-en-solliciteren'>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=' http://persruimte.stad.gent/ '>Press room City of Ghent</a></li>
            <li><a href='https://stad.gent/over-gent-en-het-stadsbestuur/vragen-suggesties-en-meldingen/juridische-info-en-privacy '>Legal info and privacy</a></li>
    </ul>
      </div>
      <div class="footer--column">
        <div class="dg-blocks-social island">
  <h3>Volg Stad Gent op</h3>
  <ul class="no-style">
            <li><a href="https://www.facebook.com/stadsbestuurgent" class="facebook">stadsbestuurgent</a></li>
            <li><a href="https://twitter.com/stadgent" class="twitter">@Stadgent</a></li>
            <li><a href="https://www.linkedin.com/company/stad-gent" class="linkedin">Stad Gent</a></li>
            <li><a href="https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw" class="youtube">YouTube Stad Gent</a></li>
            <li><a href="https://www.instagram.com/stadgent/" class="instagram">@stadgent</a></li>
    </ul>
</div>
      </div>
      <div class="footer--column">
        <div class="db-block-partnership">
  <p class="">In cooperation with <i class="icon-digipolis"></i> Digipolis</p>
</div>
      </div>
    </div>
  </div>
</footer>
{% include '@header--with-menu' with {
  "section": "section--wrapper",
  "hamburger_menu_items": [
    "<a href='javascript:void(0);'>Menu item 1</a>",
    "<a href='javascript:void(0);' class='active'>Menu item 2</a>",
    "<a href='javascript:void(0);'>Menu item 3</a>",
    "<a href='javascript:void(0);'>Menu item 4</a>"
  ],
  "mijn_gent_block_items": [
    "<a href='javascript:(void);'>Mijn profiel</a>",
    "<a href='javascript:(void);'>Nieuwsbrieven</a>",
    "<a href='javascript:(void);'>Historiek</a>"
  ],
  "header_search_mobile_id": "header-search-mobile",
  "header_search_mobile_name": "header-search-mobile",
  "header_search_mobile_placeholder": "What are you looking for?",
  "header_search_mobile_modifier_search": "inline",
  "header_search_mobile_text": "Search",
  "header_search_mobile_modifier_submit": "btn--inline",
  "header_search_id": "header-search",
  "header_search_name": "header-search",
  "header_search_placeholder": "What are you looking for?",
  "header_search_modifier_search": "inline",
  "header_search_text": "Search",
  "header_search_modifier_submit": "btn--inline",
  "main_menu_modifier": "no-style",
  "main_menu_items": [
    "<a href='javascript:void(0);'>Menu item 1</a>",
    "<a href='javascript:void(0);' class='active'>Menu item 2</a>",
    "<a href='javascript:void(0);'>Menu item 3</a>",
    "<a href='javascript:void(0);'>Menu item 4</a>"
  ],
  "breadcrumbs_section": "section--default",
  "breadcrumbs_items": [
    "<a href='#'>Stad.gent</a>",
    "<a href='#'>Overview</a>",
    "<span>Overview</span>",
    "<span>Overview</span>",
    "<span>Page title</span>"
  ]
} %}

<div class="page-container section--default">
  <section class="section--default">
    <div class="content-container">
      <div class="row">
        <div class="col-tablet-7">
          {% include '@h1' with {
            "h1_text": "Detail page title"
          } %}
          {% include '@paragraph' with {
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et facilisis augue. Donec mi mauris, pretium eu nunc at, maximus semper libero. Etiam rhoncus, ante eget pharetra consequat, purus libero varius quam, vel porttitor leo urna in odio. In id tellus ut ligula facilisis efficitur at vel urna. Vivamus iaculis felis non tristique malesuada. Quisque venenatis, arcu sed luctus molestie, leo mauris commodo sem, eget egestas orci libero eu justo. Curabitur sollicitudin odio non vulputate tincidunt. Etiam vel dolor in massa dapibus bibendum sit amet vel ipsum. Donec sagittis, elit et hendrerit maximus, nulla tortor laoreet quam, id tincidunt massa neque a ex. Fusce suscipit, ipsum interdum elementum sodales, tellus sapien vehicula nisi, in condimentum neque nisl sit amet elit. Donec sed augue a elit sodales commodo pulvinar vitae nisl. Sed pharetra ante non mollis consequat. Pellentesque a est neque. Nullam maximus ornare metus. Quisque porttitor turpis tristique faucibus efficitur."
          } %}
          {% include '@paragraph' with {
            "text": "Donec lacinia pellentesque eros id dignissim. Donec justo neque, consectetur ac rhoncus a, dictum non neque. Donec semper tempor nisl, eu blandit sapien consequat rhoncus. Nunc urna magna, consequat nec hendrerit a, blandit in arcu. Pellentesque tellus odio, volutpat a vehicula vitae, rhoncus quis arcu. Praesent ut sodales sem. Donec semper pharetra dui, ac ultrices nunc dignissim eget. Nunc hendrerit massa ligula, in condimentum enim mattis quis. Aenean ut felis turpis. Aliquam vitae cursus metus."
          } %}

          {% include '@h2' with {
            "h2_text": "Subtitle"
          } %}
          {% include '@paragraph' with {
            "text": "Quisque sollicitudin leo at erat sagittis aliquet. Nullam ipsum erat, aliquet vel scelerisque posuere, interdum vitae dolor. Morbi finibus nisi efficitur, laoreet risus id, mollis mauris. Donec eu interdum velit, at mattis leo. Suspendisse eget finibus diam. Aliquam condimentum nec elit a aliquam. Donec efficitur et enim et tempor. Vestibulum quis tempor purus. Cras id magna ante. Morbi nec purus vehicula, auctor erat eget, aliquet mi. Nam at ligula convallis, vestibulum ligula a, pretium tellus. Sed pretium vulputate iaculis."
          } %}

          {% include '@cta-link--website' with {
            "title": "Do you want more info?",
            "link_text": "Visit our website",
            "url": "javascript:(void);",
            "modifier": "link"
          } %}

          {% include '@h3' with {
            "h3_text": "Subtitle"
          } %}
          {% include '@paragraph' with {
            "text": "Nam lorem ex, posuere non lectus tempus, ornare scelerisque mauris. Integer vitae tortor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas enim lectus, malesuada in hendrerit in, vulputate ut enim. Integer pretium elit purus, ac pulvinar augue scelerisque quis. In velit elit, luctus vitae nunc quis, hendrerit congue felis. Nulla tincidunt tincidunt cursus. Mauris pretium eu ex id aliquet. Aenean massa metus, posuere ac dui sit amet, volutpat interdum libero."
          } %}
        </div>
        <div class="col-tablet-5">
          {% include '@figure' with {
            "figure_figcaption": "Figure caption comes here.",
            "figure_image_src": "https://loremflickr.com/800/532/ghent",
            "figure_image_alt_text": "Image alt text"
          } %}
        </div>
      </div>
    </div>
  </section>
</div>
<section class="section--inverse">
  <div class="content-container">
    <div class="row">
      <div class="col-mobile-12">
        {% include '@h3' with {
        "h3_text": "Bottom section title"
        } %}
        {% include '@list' with {
        "modifier": "links",
        "items": [
            "<a href='#'>item 1 <span class='tag attachment-type'>xlsx</span></a>",
            "<a href='#'>item 2 <span class='tag attachment-type'>xlsx</span></a>",
            "<a href='#'>item 3 <span class='tag attachment-type'>xlsx</span></a>",
            "<a href='#'>item 4 <span class='tag attachment-type'>xlsx</span></a>"
          ]
        } %}
      </div>
    </div>
  </div>
</section>

{% include '@newsletter-block' with {
  "newsletter_image_src": "https://loremflickr.com/500/250/ghent",
  "newsletter_image_alt_text": "Newsletter image",
  "newsletter_image_title": "Don't miss the latest news of Ghent.",
  "newsletter_content_title": "Subscribe to the newsletter of the City of Ghent.",
  "newsletter_content_list_items": [
    "Receive weekly updates of the City of Ghent.",
    "Be the first to discover new events.",
    "Already more then 12.0000 subscribers."
  ],
  "newsletter_form_name": "newsletter-email",
  "newsletter_form_id": "newsletter-email",
  "newsletter_form_submit_value": "Subscribe",
  "newsletter_social_title": "Volg ons op:",
  "newsletter_social_modifier": "no-style",
  "newsletter_social_items": [
    "<a href='https://www.facebook.com/stadsbestuurgent' title='Facebook'><i class='icon-facebook'></i><span class='element-invisible'>Facebook</span></a>",
    "<a href='https://twitter.com/stadgent' title='Twitter'><i class='icon-twitter'></i><span class='element-invisible'>Twitter</span></a>",
    "<a href='https://www.linkedin.com/company/stad-gent' title='LinkedIn'><i class='icon-linkedin'></i><span class='element-invisible'>LinkedIn</span></a>",
    "<a href='https://www.youtube.com/channel/UCmJLf8SFG0D0GTd6LSSTQLw' title='Youtube'><i class='icon-youtube'></i><span class='element-invisible'>Youtube</span></a>",
    "<a href='https://www.instagram.com/stadgent/' title='Instagram'><i class='icon-instagram'></i><span class='element-invisible'>Instagram</span></a>"
  ]
} %}

{% include '@footer' %}
/* No context defined for this component. */

There are no notes for this item.