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

    <div 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>
    </div>
</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-wide-image-wrapper">
    <figure class="page-wide-image">
        <img src="https://loremflickr.com/1600/420/ghent" alt="Homepage" class="no-style" />

        <figcaption>
            <div class="description"></div>

        </figcaption>
    </figure>

    <h2>Homepage</h2>
</div>

<section class="section--inverse">
    <div class="content-container">

        <div class="row">
            <div class="col-tablet-4">
                <section class="island section--default">
                    <h2>Veelgevraagde info</h2>
                    <ul class="links">
                        <li><a href='#'>Maatregelen bezoedeld drinkwater Oostakker</a></li>
                        <li><a href='#'>Maak een afspraak</a></li>
                        <li><a href='#'>Mobiliteitsplan: Parkeer- en Circulatieplan</a></li>
                        <li><a href='#'>Belangrijkste wegenwerken</a></li>
                        <li><a href='#'>Lage emissiezone</a></li>
                        <li><a href='#'>Uittreksels en attesten</a></li>
                        <li><a href='#'>Vacatures</a></li>
                    </ul>
                </section>
            </div>
            <div class="col-tablet-4">
                <section class="island section--default">
                    <h2>Openingsuren en adressen</h2>
                    <ul class="links">
                        <li><a href='#'>Bibliotheken</a></li>
                        <li><a href='#'>Dienst Burgerzaken</a></li>
                        <li><a href='#'>Belastingen</a></li>
                        <li><a href='#'>Zwembaden</a></li>
                        <li><a href='#'>Administratief Centrum Zuid</a></li>
                        <li><a href='#'>Alle openingsuren & adressen</a></li>
                    </ul>
                </section>
            </div>
            <div class="col-tablet-4">
                <section class="island section--highlighted">
                    <h2>Gentinfo</h2>
                    <p class="">Gentinfo is hét centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen ... over de Stad Gent? Neem contact op met Gentinfo.</p>
                    <ul class="no-style">
                        <li><a href='tel:+3292101010' itemprop='telephone'><i class='icon-phone'></i>09 210 10 10 – ma-za van 8-19 u.</a></li>
                        <li><a href='mailto:gentinfo@stad.gent'><i class='icon-email'></i>gentinfo@stad.gent</a></li>
                    </ul>
                    <input type="button" class="btn btn--medium " value="Contactformulier">
                </section>
            </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-and-banner' 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>"
  ],
  "page_wide_image_src": "https://loremflickr.com/1600/420/ghent",
  "page_wide_image_alt_text": "Homepage",
  "page_wide_image_modifier": "no-style",
  "page_wide_image_description": '',
  "page_wide_image_h2_text": "Homepage"
} %}

<section class="section--inverse">
  <div class="content-container">

    <div class="row">
      <div class="col-tablet-4">
        <section class="island section--default">
          <h2>Veelgevraagde info</h2>
          {% include '@list' with {
            "modifier": "links",
            "items": [
              "<a href='#'>Maatregelen bezoedeld drinkwater Oostakker</a>",
              "<a href='#'>Maak een afspraak</a>",
              "<a href='#'>Mobiliteitsplan: Parkeer- en Circulatieplan</a>",
              "<a href='#'>Belangrijkste wegenwerken</a>",
              "<a href='#'>Lage emissiezone</a>",
              "<a href='#'>Uittreksels en attesten</a>",
              "<a href='#'>Vacatures</a>",
            ]
          } %}
        </section>
      </div>
      <div class="col-tablet-4">
        <section class="island section--default">
          {% include '@h2' with {
            "h2_text": "Openingsuren en adressen"
          } %}
          {% include '@list' with {
            "modifier": "links",
            "items": [
              "<a href='#'>Bibliotheken</a>",
              "<a href='#'>Dienst Burgerzaken</a>",
              "<a href='#'>Belastingen</a>",
              "<a href='#'>Zwembaden</a>",
              "<a href='#'>Administratief Centrum Zuid</a>",
              "<a href='#'>Alle openingsuren & adressen</a>",
            ]
          } %}
        </section>
      </div>
      <div class="col-tablet-4">
        <section class="island section--highlighted">
          {% include '@h2' with {
          "h2_text": "Gentinfo"
          } %}
          {% include '@paragraph' with {
            "text": "Gentinfo is hét centrale aanspreekpunt voor informatie over het stadsbestuur en de stadsdiensten. Heeft u vragen, klachten, suggesties, meldingen ... over de Stad Gent? Neem contact op met Gentinfo."
          } %}
          {% include '@list' with {
            "modifier": "no-style",
            "items": [
              "<a href='tel:+3292101010' itemprop='telephone'><i class='icon-phone'></i>09 210 10 10 – ma-za van 8-19 u.</a>",
              "<a href='mailto:gentinfo@stad.gent'><i class='icon-email'></i>gentinfo@stad.gent</a>"
            ]
          } %}
          {% include '@button-md--default' with {
            "text": "Contactformulier"
          } %}
        </section>
      </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. */
  • Content:
    .page-container {
      margin: 0;
      padding: 0;
    
      *[class^="section--"] {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
      }
    }
    
  • URL: /components/raw/homepage/_homepage.scss
  • Filesystem Path: components/61-layouts/general/homepage/_homepage.scss
  • Size: 131 Bytes

There are no notes for this item.