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