City of Ghent Style Guide

No notes defined.

{% extends '_preview.twig' %}

{% block content %}
  <div class="container">
    <div class="preview-container">
      {% if _target.isCollated %}
        <dl class="styleguide">
          {{ yield | raw }}
        </dl>
      {% else %}
        <div class="content-container">
          {{ yield | raw }}
        </div>
      {% endif %}

      <p class="form-disclaimer">The accordion component uses the hash in you URL to show the relevant content.<br>
      The below table of contents is not part of the accordion template,
      but allows you to play with this hash functionality.</p>
      {% include '@table-of-contents' with {
        list: [
          '<a href="#accordion--single--content--1">single accordion</a>',
          '<a href="#accordion--multiple--content--1">first item</a>',
          '<a href="#accordion--multiple--content--2">second item</a>',
          '<a href="#accordion--multiple--content--3">third item</a>',
          '<a href="#accordion--multiple--content--4">forth item</a>',
          '<a href="#just_some_random_hash">non existing item</a>'
        ]
      } %}
    </div>
  </div>


{% endblock %}
<!DOCTYPE html>

  <html lang="en">

  <head>
      <meta charset="utf-8">
      <title>Preview Layout</title>

      <link media="all" rel="stylesheet" href="../../styleguide/vendor/baguettebox/dist/baguetteBox.min.css">
      <link media="all" rel="stylesheet" href="../../css/main.css">
      <link media="all" rel="stylesheet" href="../../css/styleguide.css">
      <link rel="apple-touch-icon" sizes="180x180" href="../../styleguide/img/favicon/build/cyan/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="../../styleguide/img/favicon/build/cyan/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="../../styleguide/img/favicon/build/cyan/favicon-16x16.png">
      <link rel="manifest" href="../../styleguide/img/favicon/build/cyan/site.webmanifest">
      <link rel="mask-icon" href="../../styleguide/img/favicon/build/cyan/safari-pinned-tab.svg" color="#009DE0">
      <meta name="msapplication-TileColor" content="#009DE0">
      <meta name="theme-color" content="#009DE0">

      <!-- webfontLoader --><!-- 
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
      WebFont.load({
        google: {
          families: ['Fira Sans:400,600,700']
        }
      });
    </script>
     -->

      <meta name="MobileOptimized" content="320">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body class="cs--cyan">
      <a href="#main-content" class="skiplink">
          Skip to main content
      </a>

      <div id="main-content">
          <div class="container">
              <div class="preview-container">
                  <div class="content-container">

                  </div>

                  <p class="form-disclaimer">The accordion component uses the hash in you URL to show the relevant content.<br>
                      The below table of contents is not part of the accordion template,
                      but allows you to play with this hash functionality.</p>
                  <nav class="table-of-contents" aria-labelledby="table-of-contents-header">
                      <div class="content-container">
                          <h2 id="table-of-contents-header" class="visually-hidden">Table of content</h2>

                          <ul class="inline">
                              <li><a href="#accordion--single--content--1">single accordion</a></li>
                              <li><a href="#accordion--multiple--content--1">first item</a></li>
                              <li><a href="#accordion--multiple--content--2">second item</a></li>
                              <li><a href="#accordion--multiple--content--3">third item</a></li>
                              <li><a href="#accordion--multiple--content--4">forth item</a></li>
                              <li><a href="#just_some_random_hash">non existing item</a></li>
                          </ul>

                      </div>
                  </nav>
              </div>
          </div>

      </div>

      <!-- hidden fields for screenreaders -->
      <span hidden id="image-gallery__open-gallery">open gallery</span>

      <!--  scripts -->
      <script type="text/javascript" src="../../styleguide/vendor/baguettebox/src/baguetteBox.js"></script>
      <script type="text/javascript" src="../../styleguide/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
      <script type="text/javascript" src="../../styleguide/vendor/masonry-layout/dist/masonry.pkgd.min.js"></script>
      <script type="text/javascript" src="../../styleguide/vendor/allietabs/allieTabs.min.js"></script>
      <script type="text/javascript" src="../../styleguide/vendor/modal/index.js"></script>
      <script type="text/javascript" src="../../styleguide/js/accordion.functions-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/checkbox_filter.functions-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/checkbox_dynamic.functions-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/table.functions-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/file.functions-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/breadcrumbs.functions-min.js"></script>

      <!--  JS bindings -->
      <script type="text/javascript" src="../../styleguide/js/image-collections.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/image-wall.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/accordion.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/menu.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/checkbox_filter.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/checkbox_dynamic.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/filter.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/modal.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/table.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/file.bindings-min.js"></script>
      <script type="text/javascript" src="../../styleguide/js/breadcrumbs.bindings-min.js"></script>

      <script>
          var cs = getCookie('cs');
          if (cs) {
              document.body.className = cs;
          }

          function getCookie(cname) {
              var name = cname + "=";
              var decodedCookie = decodeURIComponent(document.cookie);
              var ca = decodedCookie.split(';');
              for (var i = 0; i < ca.length; i++) {
                  var c = ca[i];
                  while (c.charAt(0) == ' ') {
                      c = c.substring(1);
                  }
                  if (c.indexOf(name) == 0) {
                      return c.substring(name.length, c.length);
                  }
              }
              return null;
          }
      </script>
  </body>

  </html>
/* No context defined. */