<h2 class="styleguide-title">Building blocks overview</h2>
<div class="preview-inner-inner-container">
    <h2 class="styleguide">Header</h2>
    <header class="header section--wrapper">
        <div class="content-container">

            <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="" id="" placeholder="">
                    <input type="submit" value="" class="btn " />
                </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="" id="" placeholder="">
                    <input type="submit" value="" class="btn " />
                </form>
            </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">
        </ol>
    </nav>

</div>

<div class="preview-inner-inner-container">
    <h2 class="styleguide">Newsletter block</h2>
    <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>
</div>

<div class="preview-inner-inner-container">
    <h2 class="styleguide">Footer</h2>
    <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>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Breadcrumbs</h2>
  <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>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Pagination</h2>
  <nav class="pager">
    <ul class="pager__items">
        <li class="pager__item">
            <a href="#" title="Current page">1</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 2">2</a>
        </li>
        <li class="pager__item is-active">
            <a href="#" title="Go to page 3">3</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 4">4</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 5">5</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 6">6</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 7">7</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 8">8</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 9">9</a>
        </li>
        <li class="pager__item pager__item--ellipsis" role="presentation"></li>
        <li class="pager__item pager__item--next">
            <a href="#" title="Go to the next page" rel="next">next ›</a>
        </li>
        <li class="pager__item pager__item--last">
            <a href="#" title="Go to the last page">last »</a>
        </li>
    </ul>
</nav>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Search</h2>
  <form class="form form-search">
  <div class="form-label">
    <label for="">What are you looking 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 class="preview-inner-inner-container">
  <h2 class="styleguide">CTA link</h2>
  <a href="" class="cta-link">
  <span class="icon icon-link"></span>
  <h3 class="title">Want more info?</h3>
  <span class="document">Visit our website</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA document</h2>
  <a href="" class="cta-link">
  <span class="icon icon-clip"></span>
  <h3 class="title">Want more info?</h3>
  <span class="document">Download</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA form fill</h2>
  <a href="" class="cta-link">
  <span class="icon icon-form-fill"></span>
  <h3 class="title">Fill in the form</h3>
  <span class="document">Fill in</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA email</h2>
  <a href="" class="cta-link">
  <span class="icon icon-email"></span>
  <h3 class="title">Contact us by email</h3>
  <span class="document">Mail</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA phone</h2>
  <a href="" class="cta-link">
  <span class="icon icon-phone"></span>
  <h3 class="title">Contact us by phone</h3>
  <span class="document">Call us</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA location</h2>
  <a href="" class="cta-link">
  <span class="icon icon-loc"></span>
  <h3 class="title">Location</h3>
  <span class="document">Location</span>
</a>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Form steps</h2>
  <div class="form-progress">
  <ul class="no-style">
          <li class="progress progress-previous">
        <a href="javascript:(void);" class="indicator">
          <span class='count '><i class="icon icon-check"></i></span>
          <span class="label">Step 1 title</span>
        </a>
      </li>
              <li class="progress progress-active">
        <a href="javascript:(void);" class="indicator">
          <span class='count '>2</span>
          <span class="label">Step 2 title</span>
        </a>
      </li>
              <li class="progress">
        <span class='count '>3</span>
        <span class="label">Step 3 title</span>
      </li>
              <li class="progress">
        <span class='count '>4</span>
        <span class="label">Step 4 title</span>
      </li>
              <li class="progress">
        <span class='count '>5</span>
        <span class="label">Step 5 title</span>
      </li>
              <li class="progress">
        <span class='count '>6</span>
        <span class="label">Step 6 title</span>
      </li>
              <li class="progress">
        <span class='count '>7</span>
        <span class="label">Step 7 title</span>
      </li>
      </ul>
</div>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Page wide image</h2>
  <div class="page-wide-image-wrapper">
  <figure class="page-wide-image">
    <img src="https://via.placeholder.com/1600x420" alt="Page wide image" class="no-style" />

    <figcaption>
      <div class="description">Caption text comes here.</div>

    </figcaption>
  </figure>

  <h2>Page wide title</h2>
</div>
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Gallery</h2>
  <div class="gallery">
  <a
      href='https://via.placeholder.com/800x532 '
        class="main"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
  <a
      href='https://via.placeholder.com/800x532 '
        class="thumb"
            title=""><img src="https://via.placeholder.com/800x532" alt="warme william" /></a>
</div>
</div>
<h2 class="styleguide-title">Building blocks overview</h2>
<div class="preview-inner-inner-container">
  <h2 class="styleguide">Header</h2>
  {% include '@header' %}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Newsletter block</h2>
  {% include '@newsletter-block' %}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Footer</h2>
  {% include '@footer' %}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Breadcrumbs</h2>
  {% include '@breadcrumbs' with {
    "items": [
      "<a href='#'>Stad.gent</a>",
      "<a href='#'>Overview</a>",
      "<span>Overview</span>",
      "<span>Overview</span>",
      "<span>Page title</span>"
    ]
  }%}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Pagination</h2>
  {% include '@pagination' %}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Search</h2>
  {% include '@search' with {
  "label": "What are you looking for?",
  "for": "",
  "label_optional": "",
  "search_id": "header-search",
  "search_name": "header-search",
  "placeholder": "What are you looking for?",
  "modifier_search": "inline",
  "text": "Search",
  "modifier_submit": "btn--inline"
  } %}
</div>


<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA link</h2>
  {% include '@cta-link--website' with {
    'title': 'Want more info?',
    'link_text': 'Visit our website',
    'modifier': 'link'
  }%}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA document</h2>
  {% include '@cta-link--document' with {
    'title': 'Want more info?',
    'link_text': 'Download',
    'modifier': 'clip'
  }%}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA form fill</h2>
  {% include '@cta-link--form-fill' with {
    'title': 'Fill in the form',
    'link_text': 'Fill in',
    'modifier': 'form-fill'
  }%}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA email</h2>
  {% include '@cta-link--email' with {
    'title': 'Contact us by email',
    'link_text': 'Mail',
    'modifier': 'email'
  }%}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA phone</h2>
  {% include '@cta-link--phone' with {
    'title': 'Contact us by phone',
    'link_text': 'Call us',
    'modifier': 'phone'
  }%}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">CTA location</h2>
  {% include '@cta-link--location' with {
    'title': 'Location',
    'link_text': 'Location',
    'modifier': 'loc'
  }%}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Form steps</h2>
  {% include '@form-steps' with {
    "step1_title": "Step 1 title",
    "step2_title": "Step 2 title",
    "step3_title": "Step 3 title",
    "step4_title": "Step 4 title",
    "step5_title": "Step 5 title",
    "step6_title": "Step 6 title",
    "step7_title": "Step 7 title"
  } %}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Page wide image</h2>
  {% include '@page-wide-image' with {
    "src": "https://via.placeholder.com/1600x420",
    "alt_text": "Page wide image",
    "modifier": "no-style",
    "description": "Caption text comes here.",
    "h2_text": "Page wide title"
  } %}
</div>

<div class="preview-inner-inner-container">
  <h2 class="styleguide">Gallery</h2>
  {% include '@gallery' %}
</div>
/* No context defined for this component. */

There are no notes for this item.