City of Ghent Style Guide - Version 2.10.0

Header: With Menu And Banner 

<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://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>
 
<header class="header section--wrapper">
  <div class="content-container">

    {% include '@hamburger-menu' with {
      "items": hamburger_menu_items
    } %}

    <div id="logo" class="header-component">
      {% include '@logo' %}
    </div>

    <div id="profile" class="header-component right">
      {% include '@mijn-gent-block' with {
        "items": mijn_gent_block_items,
        'auth': 'true',
      } %}
    </div>

    <div id="header-search-mobile" class="header-search-mobile header-component right">
      {% include '@search' with {
        "search_id": header_search_mobile_id,
        "search_name": header_search_mobile_name,
        "placeholder": header_search_mobile_placeholder,
        "modifier_search": header_search_mobile_modifier_search,
        "text": header_search_mobile_text,
        "modifier_submit": header_search_mobile_modifier_submit
      } %}
      <a href="javascript:(void);" class="close">Sluiten</a>
    </div>
    <div id="header-search" class="header-search header-component right">
      {% include '@search' with {
        "search_id": header_search_id,
        "search_name": header_search_name,
        "placeholder": header_search_placeholder,
        "modifier_search": header_search_modifier_search,
        "text": header_search_text,
        "modifier_submit": header_search_modifier_submit
      } %}
    </div>
  </div>

  <div class="header--main-menu">
    <div class="content-container">
      {% include '@list' with {
        "modifier": main_menu_modifier,
        "items": main_menu_items
      } %}
    </div>
  </div>
</header>

{% include '@breadcrumbs' with {
  "section": breadcrumbs_section,
  "items": breadcrumbs_items
} %}

{% include '@page-wide-image' with {
  "src": page_wide_image_src,
  "alt_text": page_wide_image_alt_text,
  "modifier": page_wide_image_modifier,
  "description": page_wide_image_description,
  "h2_text": page_wide_image_h2_text
} %}
 
{
  "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://via.placeholder.com/1600x420",
  "page_wide_image_alt_text": "Page wide image",
  "page_wide_image_modifier": "no-style",
  "page_wide_image_description": "Caption text comes here.",
  "page_wide_image_h2_text": "Page wide title"
}
  • Content: 
    header.header {
  position: relative;
  min-height: 2.7rem;
  padding: .35rem 0 0;
  font-size: .7rem;

  input,
  button {
    height: 2rem;
  }

  .content-container {
    height: 100%;

    > * {
      min-height: 100%;
      max-height: 2.36rem;
      margin: 0 1rem 0 0;
      float: left;
      line-height: 2rem;

      &.right {
        margin: 0 0 0 1rem;
        float: right;
      }

      .site-logo {
        min-width: 4.5rem;
      }

      i {
        display: inline-block;
        font-size: 1rem;
        line-height: 2.4rem;
      }

      .login-link i {
        display: none;

        @include tablet {
          display: inline;
        }
      }

      // Change the look and feel of the link atom.
      a {
        @include themify {
          @include element-states(none, underline, $property: 'text-decoration');
        }
      }

      //
      // Change the look and feel of the search molecule.
      //
      &.header-search,
      &.header-search-mobile {
        .form-label {
          display: none;
        }

        input[type="search"] {
          width: 10rem;
          margin: 0;
          font-size: .7rem;
        }

        input[type="submit"] {
          width: 2rem;
          height: 2rem;
          padding-right: .5rem;
          padding-left: .5rem;
          border: 0;
          background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI2ZmZmZmZiIgd2lkdGg9IjEwMjQiIGhlaWdodD0iMTAyNCIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCI+PHRpdGxlPjwvdGl0bGU+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTEwMjAuNTg3IDkxNC43NzNsLTMyMC44NTMtMzIwLjg1M2M0MC45Ni02MS40NCA2NC44NTMtMTM2LjUzMyA2NC44NTMtMjExLjYyNyAwLTEwMi40LTQwLjk2LTE5Ny45NzMtMTEyLjY0LTI2OS42NTNzLTE2Ny4yNTMtMTEyLjY0LTI2OS42NTMtMTEyLjY0LTE5Ny45NzMgNDAuOTYtMjY5LjY1MyAxMTIuNjRjLTcxLjY4IDcxLjY4LTExMi42NCAxNjcuMjUzLTExMi42NCAyNjkuNjUzczQwLjk2IDE5Ny45NzMgMTEyLjY0IDI2OS42NTMgMTY3LjI1MyAxMTIuNjQgMjY5LjY1MyAxMTIuNjRjNzguNTA3IDAgMTUwLjE4Ny0yMy44OTMgMjE1LjA0MC02NC44NTNsMzIwLjg1MyAzMjAuODUzYzEwLjI0IDEwLjI0IDMwLjcyIDYuODI3IDQ0LjM3My02LjgyN2w1NC42MTMtNTQuNjEzYzEwLjI0LTEzLjY1MyAxMy42NTMtMzQuMTMzIDMuNDEzLTQ0LjM3M3pNMzgyLjI5MyA2NTguNzczYy0xNTMuNiAwLTI3Ni40OC0xMjYuMjkzLTI3Ni40OC0yNzYuNDhzMTIyLjg4LTI3OS44OTMgMjc2LjQ4LTI3OS44OTMgMjc2LjQ4IDEyNi4yOTMgMjc2LjQ4IDI3Ni40OC0xMjIuODggMjc5Ljg5My0yNzYuNDggMjc5Ljg5M3oiPjwvcGF0aD48L3N2Zz4=') no-repeat center center;
          background-size: 65%;
          font-size: 1rem;
          line-height: 1.8rem;
          text-indent: -9999px;
        }
      }

      &.header-search {
        display: none;

        @include tablet {
          display: block;

          input[type="search"] {
            float: left;
          }

          input[type="submit"] {
            float: left;
          }
        }
      }

      &.header-search-mobile {
        width: 2rem;

        @include tablet {
          display: none;
        }

        &.js-form-search-opened {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          margin: 0;
          padding: .35rem $gutter-width/2;
          background-color: $color-darkest-blue;

          input[type="submit"] {
            position: absolute;
            top: .35rem;
            left: calc(75% - 2.35rem);
          }
        }

        input[type="search"] {
          display: none;

          &.js-form-search-opened {
            display: block;
            width: calc(75% - 2rem);
          }
        }

        .close {
          display: none;
          position: absolute;
          top: .35rem;
          right: $gutter-width/2;

          &.js-form-search-opened {
            display: block;
          }
        }
      }
    }

    .site-logo {
      margin-bottom: .5rem;
    }
  }
}

.header--main-menu {
  @include tablet {
    display: block;
    width: 100%;
    padding: .25rem 0;
    background-color: $color-blue;
    overflow: hidden;

    li {
      margin-right: 1rem;
      float: left;
    }
  }

  display: none;
}
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: components/41-organisms/header/_header.scss
  • Size: 4 KB
  • Content: 
    /**
 * @file
 * Javascript binding of header.functions.js.
 */

'use strict';

(function ($) {
  $(window).on('load', function (e) {
    $('.header-search-mobile').loadMobileHeader();
    $('header.header .content-container').displaySiteName();
  });

  $(window).on('resize', function (e) {
    $('header.header .content-container').displaySiteName();
  });

})(jQuery);
  • URL: /components/raw/header/header.binding.js
  • Filesystem Path: components/41-organisms/header/header.binding.js
  • Size: 372 Bytes
  • Content: 
    /**
 * @file
 * Implements a responsive search element in
 * the header of a website.
 *
 * @author
 * Wim Vantomme
 *
 */
'use strict';

(function ($) {
  $.fn.extend({

    /**
     * Implements a jQuery extension function.
     *
     * @fires event:click
     */
    loadMobileHeader: function () {
      var mobileHeader = $(this);
      var searchForm = mobileHeader.find('.form-search');
      var searchInput = mobileHeader.find('input[type="search"]');
      var searchButton = searchForm.find('input[type="submit"]');
      var closeButton = mobileHeader.find('.close');

      /**
       * Opens, submits or closes the mobile form.
       *
       * @event click
       */
      searchButton.on('click', function (e) {
        // Prevent button submission when form is closed.
        if (!searchButton.hasClass('js-form-search-opened')) {
          e.preventDefault();
        }

        mobileHeader.addClass('js-form-search-opened');
        searchInput.addClass('js-form-search-opened');
        closeButton.addClass('js-form-search-opened');
      });

      // Close the mobile form.
      closeButton.on('click', function (e) {
        e.preventDefault();
        mobileHeader.removeClass('js-form-search-opened');
        searchInput.removeClass('js-form-search-opened');
        closeButton.removeClass('js-form-search-opened');
      });
    },

    /**
     * Implements a jQuery extension function.
     */
    displaySiteName: function () {
      var componentsWidth = 70;
      var logo = null;

      // Calculate component width except for logo.
      this.children('.header-component:visible').each(function () {
        if ($(this).has('.site-logo').length === 0) {
          componentsWidth += $(this).width();
        }
        else {
          logo = this;
        }
      });

      // Set available width on the logo component to show the site title.
      $(logo).width(this.width() - componentsWidth);
    }
  });
})(jQuery);
  • URL: /components/raw/header/header.functions.js
  • Filesystem Path: components/41-organisms/header/header.functions.js
  • Size: 2 KB

There are no notes for this item.