Header

When to use this component

All websites and all pages must include the header.

How it works

The header component is the first visible component on every page. The position of the header is fixed on the page.

Depending on the device’s screen resolution, the header switches to one of the two following modes:

  • Desktop header: Desktop resolutions and tablet in landscape mode
  • Mobile header: Tablet in portrait mode and mobile resolutions

Desktop header

The desktop header is used on desktop resolutions and tablets in landscape mode.

The desktop header can consist of four parts:

  1. Top header with Ghent logo (always required)
  2. Menu with main navigation (optional)
  3. Breadcrumbs (required for most websites)
  4. Header image (optional)

The top header with Ghent logo has the following components:

  • Ghent logo (always required)
  • Site title (optional, only for separate websites)
  • Search (optional, only if applicable)
  • Mijn Gent (optional, only if applicable)
  • Language switch (optional, only for multilingual websites with synchronous translations)

When there is no header image, the light blue Ghent-style seperator is shown. When there is a header image, the light blue Ghent-style separator is not shown.

Further specific requirements for the City of Ghent website and for separate websites are listed below.

Mobile header

The mobile header is used on tablet in portrait mode and below (mobile resolutions).

The mobile header can consist of three parts:

  1. Top header with Ghent logo (always required)
  2. Site title (optional, only for separate websites)
  3. Breadcrumbs (required for most websites)

The top header with Ghent logo has the following components:

  • Ghent logo (always required)
  • Search button with link (optional, only if applicable)
  • Mijn Gent (optional, only if applicable)
  • Menu button (optional, only if applicable)
  • Language switch (optional, only if applicable and for multilingual websites with synchronous translations)

For the top part of the mobile header, the following conditions apply:

  1. Where there is a header image, the header image in the mobile header is hidden. The light blue Ghent-style separator is always shown.

  2. When the website has a search function, the search function is always shown in the header.

  3. When the website has main navigation, the menu button is always shown in the header. The menu button opens the mobile menu with the main navigation.

  4. When the website has main navigation and also Mijn Gent and/or a language switch, Mijn Gent and/or the language switch are integrated in the menu. The menu button is always shown in the header. The menu button opens the mobile menu with the main navigation and Mijn Gent and/or the language switch. In other words: whenever the website has main navigation, the menu button is used and Mijn Gent and/or the language switch (if applicable) are integrated in the mobile menu.

  5. When the websites no main navigation, but has a search function and Mijn Gent and a language switch, the menu button is used and the Mijn Gent and the language switch are integrated in the menu. The search button is always shown in the header.

Taking the above conditions into account, only the following combinations of elements are possible in the top part of the mobile header:

  • Ghent logo + Search button + Menu button
  • Ghent logo + Search button + Language switch
  • Ghent logo + Search button + Mijn Gent
  • Ghent logo + Search button
  • Ghent logo + Mijn Gent
  • Ghent logo + Language switch
  • Ghent logo + Menu button
  • Ghent logo + Mijn Gent + Language switch
  • Ghent logo only

Further specific requirements for the City of Ghent website and for separate websites are listed below.

Requirements

City of Ghent website

  • The desktop header includes the following elements:
    • Top header with Ghent logo, Search and Mijn Gent
    • Breadcrumbs
    • Header image (optional)
    • The Ghent logo links to the homepage of the City of Ghent general website.
  • The mobile header includes the following elements:
    • Top header with Ghent loco, Search button and Mijn Gent
    • Breadcrumbs
  • The first item of the breadcrumbs is “Home” and links to the homepage of the City of Ghent general website.
  • The search function searches the content of the whole City of Ghent general website.

Separate websites

  • The combination of the City of Ghent logo with the title of the separate website links to the homepage of the separate website.
  • The first item of the breadcrumbs is “Home” and links to the homepage of the separate website.
  • The search function - if included - only searches the content of the separate website.
<header class="header">
  <div class="content-container">
    {% include '@logo' with {
      site_name: site_name,
      type: subsite ? 'subsite'	
    } %}

    {% include '@link' with {
      link: "#",
      text: "search",
      modifier: "search--link",
      title: "search"
    } %}

    {% include '@search' with {
      label: header_search_label,
      search_id: header_search_id,
      placeholder: header_search_placeholder,
      modifier_search: header_search_modifier_search,
      text: header_search_text,
      modifier_submit: header_search_modifier_submit
    } %}

    {% include '@mijn-gent-block' with {
      id: _self.name ~ '-mijn-gent',
      items: mijn_gent_block_items,
      auth: mijn_gent_block_auth,
      image: mijn_gent_block_image
    } %}
  </div>

  {% if subsite %}
    <div class="site-name">
      <span>{{ site_name }}</span>
    </div>
  {% endif %}

  {% include '@breadcrumbs' with {
    items: breadcrumbs_items,
    id: breadcrumbs_id
  } %}

  <hr/>
  {% if hero_image_src %}
    <figure class="hero">
      {% if subsite %}
        <div class="subsite">
          <div class="subsite-title">
            {% include '@image' with {
              'src': figure_logo_src_light | path,
              'alt_text': figure_logo_alt_text,
              'modifier': null,
              'ratio': null
            } %}
            {% include '@heading' with {
              'type': 'h1',
              'heading_text': hero_title
            } %}
          </div>
        </div>
      {% endif %}
      {% include '@image' with {
        'src': hero_image_src,
        'alt_text': '',
        'ratio': '4:1'
      } %}
      {% if hero_image_description %}
        {% include '@figcaption' with {
          'figcaption': hero_image_description
        } %}
      {% endif %}
    </figure>
  {% endif %}
</header>
<header class="header">
    <div class="content-container">
        <a href="#" title="Home" class="site-logo " rel="home">
            ICT Supplier Digipolis Gent
        </a>

        <a href='#' class="search--link" title="search">
            search</a>

        <form class="form search">
            <label for="header-search-subsite-hero">Search
            </label>

            <input type="search" id="header-search-subsite-hero" name="header-search-subsite-hero" class="search" placeholder="Search" required="true" />
            <input type="submit" value="Search" class="" />
        </form>

        <div class="mijn-gent-block accordion">

            <a href='javascript:(void);' class="login-link">
                Aanmelden</a>

        </div>
    </div>

    <div class="site-name">
        <span>ICT Supplier Digipolis Gent</span>
    </div>

    <nav class="breadcrumb section--default" aria-labelledby="system-breadcrumb-subsite-hero">
        <div class="content-container">
            <h2 id="system-breadcrumb-subsite-hero" class="visually-hidden">Breadcrumb</h2>
            <ol class="breadcrumb no-style">
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Overview</a></li>
                <li><a href='#'>Theme</a></li>
                <li><a href='#'>Subpage</a></li>
                <li><span>Page title</span></li>
            </ol>
        </div>
    </nav>

    <hr />
    <figure class="hero">
        <div class="subsite">
            <div class="subsite-title">
                <img src="../../styleguide/img/stock/digipolis-light.svg" alt="" />

                <h1>ICT Supplier <span>Digipolis Gent</span></h1>
            </div>
        </div>
        <div class="image-wrapper" data-ratio="4:1">
            <img src="https://via.placeholder.com/1600x400&text=4:1+(1600x400)" alt="" />
        </div>

        <figcaption>Caption text comes here.</figcaption>
    </figure>
</header>
{
  "mijn_gent_block_items": [
    "<a href='javascript:(void);'>Mijn profiel</a>",
    "<a href='javascript:(void);'>Nieuwsbrieven</a>",
    "<a href='javascript:(void);'>Historiek</a>"
  ],
  "mijn_gent_block_auth": "false",
  "header_search_id": "header-search-subsite-hero",
  "header_search_label": "Search",
  "header_search_placeholder": "Search",
  "header_search_text": "Search",
  "breadcrumbs_id": "system-breadcrumb-subsite-hero",
  "breadcrumbs_items": [
    "<a href='#'>Home</a>",
    "<a href='#'>Overview</a>",
    "<a href='#'>Theme</a>",
    "<a href='#'>Subpage</a>",
    "<span>Page title</span>"
  ],
  "hero_image_src": "https://via.placeholder.com/1600x400&text=4:1+(1600x400)",
  "hero_image_description": "Caption text comes here.",
  "hero_title": "ICT Supplier <span>Digipolis Gent</span>",
  "figure_logo_src_dark": "/styleguide/img/stock/digipolis-dark.svg",
  "figure_logo_src_light": "/styleguide/img/stock/digipolis-light.svg",
  "site_name": "ICT Supplier Digipolis Gent",
  "menu_items": [
    "<a href='#' class='active'>Home</a>",
    "<a href='#'>News & events</a>",
    "<a href='#'>Subpage</a>",
    "<a href='#'>Another page</a>"
  ],
  "subsite": true
}
  • Content:
    header.header {
      position: relative;
      margin-bottom: .3rem;
      padding: .3rem 0;
    
      // first row
      > .content-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    
        .site-logo {
          margin-right: auto;
    
          &.subsite {
            flex: 1;
            margin-right: .7rem;
          }
        }
    
        .search {
          display: none;
          flex: 1;
          flex-wrap: nowrap;
          justify-content: flex-end;
          overflow: hidden;
    
          label {
            @extend %visually-hidden;
            @include bold-text;
          }
    
          input {
            margin-bottom: 0;
          }
    
          input[type=submit] {
            max-width: 0;
            padding: 0;
            transition: opacity .2s ease-in-out, max-width .2s ease-in-out, padding .2s ease-in-out;
            box-shadow: none;
            opacity: 0;
    
            &:focus {
              max-width: 9999px;
              margin-left: .4rem;
              padding: 0 1rem;
              opacity: 1;
            }
          }
    
          input[type=search],
          input[type=text] {
            @include theme('background-color', 'color-primary--lighten-5', 'header-search-background-color');
    
            flex: 0 1 auto;
            width: 100%;
            min-width: 0;
            max-width: 210px;
            margin-right: 0;
            transition: max-width .2s ease-in-out;
    
            &:invalid {
              box-shadow: none;
            }
    
            &:not(:focus) {
              border-color: transparent;
            }
    
            &:focus,
            &:valid {
              max-width: 440px;
              margin: 0 0 0 .4rem;
    
              ~ input[type=submit] {
                max-width: 9999px;
                margin-left: .4rem;
                padding: 0 1rem;
                opacity: 1;
              }
    
            }
          }
    
          @include tablet {
            display: flex;
          }
        }
    
        .search--link {
          @include theme('background-color', 'color-primary--lighten-5', 'header-search-background-color');
    
          display: block;
          min-width: 2.4rem;
          max-width: calc(.8rem + 32px);
          height: 2.4rem;
          border-bottom: 0;
          border-radius: border-radius('radius-1');
          background: svg-as-background('search', color('dark-gray'), 32, 32) no-repeat left .4rem center;
          text-indent: -9999px;
          overflow: hidden;
    
          @include tablet {
            display: none;
          }
        }
    
        .mijn-gent-block {
          max-width: 10rem;
          margin-left: 1.2rem;
        }
    
        // Align main menu with site logo and breadcrumb.
        nav.menu {
          margin-left: 1.2rem;
    
          @include tablet {
            margin-left: 0;
            padding-left: .2rem;
          }
        }
      }
    
      .site-name {
        @include theme('color', 'color-tertiary', 'default-text-color');
        @include bold-text;
    
        @include tablet {
          display: none;
        }
    
        margin: .8rem 0 .4rem;
        font-size: .9rem;
      }
    
      nav.breadcrumb {
        margin-top: .4rem;
      }
    
      hr {
        $span: percentage(2 / 12);
    
        position: relative;
        max-width: $bp-max-content;
        margin-bottom: 2.3rem;
        border: 0;
        overflow: visible;
    
        &::before,
        &::after {
          @include theme('border-color', 'color-primary--lighten-4', 'header-border-bottom');
    
          position: absolute;
          top: 100%;
          width: 100%;
          height: 1rem;
          margin-top: .3rem;
          border-top: 2px solid;
          content: '';
        }
    
        &::before {
          left: -$gutter-width;
          width: 3rem + $gutter-width;
          border-right: 2px solid;
          border-top-right-radius: border-radius('radius-4');
    
          @include desktop {
            left: 0;
            width: calc(#{$span} + 2rem);
          }
        }
    
        &::after {
          right: -$gutter-width;
          width: calc(100% - 3rem + 2px + #{$gutter-width});
          border-left: 2px solid;
          border-top-left-radius: border-radius('radius-4');
    
          @include desktop {
            right: 0;
            width: calc(100% - #{$span} - 2rem + 2px);
          }
        }
      }
    
      // Hero image, overlaps and hides breadcrumb accolade.
      figure.hero {
        $span: percentage(2/12);
    
        @include tablet {
          position: relative;
          min-height: 1.6rem;
          // Give the image 1px margin relative to the container
          // so the accolade can overlap the edges
          // IE error fix
          margin: -1.7rem calc(-1rem + 1px) .3rem;
        }
    
        .subsite {
          display: none;
    
          @include tablet {
            display: flex;
            position: absolute;
            top: 0;
            right: 0;
            align-items: center;
            justify-content: center;
            width: span(4 wide of 12);
            max-width: 23rem;
            height: calc(100% - 1.6rem + 1px); // 1px to fix rendering issues
            margin: 0;
            padding: $gutter-width 2rem;
            text-align: center;
            z-index: z('hero', 'base');
          }
    
          @include desktop {
            padding: 0 2rem;
          }
    
          @media (min-width: $bp-max-content) {
            right: calc((100% - #{$bp-max-content}) / 2);
          }
    
          &::before,
          &::after {
            @include theme('background-color', 'color-primary', 'hero-background-color');
            @include theme('border-color', 'color-primary', 'hero-background-color');
            position: absolute;
            left: 0;
            width: 100%;
            height: auto;
            border: 1px solid;
            content: '';
            opacity: .94;
            z-index: z('hero', 'overlay');
          }
    
          &::before {
            top: 0;
            bottom: 50%;
            border-bottom-left-radius: border-radius('radius-5');
          }
    
          &::after {
            top: 50%;
            bottom: 0;
            border-top-left-radius: border-radius('radius-5');
          }
    
          .subsite-title {
            display: block;
          }
    
          img {
            display: inline-block;
            width: auto;
            height: 3rem;
            margin-bottom: 1rem;
    
            @include desktop {
              height: 4rem;
            }
    
            @media (min-width: $bp-max-content) {
              height: 5rem;
            }
          }
    
          h1 {
            @include theme('color', 'color-secondary', 'hero-text-color');
    
            margin: 0;
            font-size: 1.2rem;
    
            @include desktop {
              font-size: 1.6rem;
            }
    
            @media (min-width: $bp-max-content) {
              font-size: 2rem;
            }
    
            span {
              display: block;
              font-size: .9rem;
    
              @include desktop {
                font-size: 1.2rem;
              }
    
              @media (min-width: $bp-max-content) {
                font-size: 1.5rem;
              }
            }
          }
        }
    
        .image-wrapper {
          display: none;
    
          @include tablet {
            display: block;
          }
        }
    
        img {
          display: none;
    
          @include tablet {
            display: block;
          }
        }
    
        figcaption {
          @extend %content-container;
          display: none;
          right: 0;
          width: auto;
    
          @include tablet {
            display: block;
            position: absolute;
            top: calc(100% - 1.6rem);
            left: 3rem + $gutter-width;
            margin: 0;
            padding: .4rem $gutter-width 0;
            z-index: z('hero', 'caption');
    
            @include desktop {
              left: calc(#{$span} + 2rem);
            }
    
            @media (min-width: $bp-max-content) {
              right: calc((100% - #{$bp-max-content}) / 2);
              left: calc(#{$span} + 2rem + (100% - #{$bp-max-content}) / 2);
              padding-right: 0;
            }
          }
        }
    
        &::before,
        &::after {
          @include tablet {
            position: absolute;
            bottom: -.1rem;
            height: 1.7rem;
            background-color: color('white');
            content: '';
            z-index: z('hero', 'accolade');
          }
        }
    
        &::before {
          @include tablet {
            left: 0;
            width: 3rem + $gutter-width;
            border-top-right-radius: border-radius('radius-5');
          }
    
          @include desktop {
            width: calc(#{$span} + 2rem);
          }
    
          @media (min-width: $bp-max-content) {
            width: calc(#{$span} + 2rem + ((100% - #{$bp-max-content}) / 2));
          }
        }
    
        &::after {
          right: 0;
          width: auto;
    
          @include tablet {
            left: 3rem + $gutter-width;
            border-top-left-radius: border-radius('radius-5');
          }
    
          @include desktop {
            left: calc(#{$span} + 2rem);
          }
    
          @media (min-width: $bp-max-content) {
            // Make sure it overlaps the image edges.
            // IE error fix
            right: -1px;
            left: calc(#{$span} + 2rem + ((100% - #{$bp-max-content}) / 2));
          }
        }
    
        &:not(.hero--subsite) .subsite ~ figcaption { /// @deprecated
          left: 0;
          width: 100%;
          max-width: none;
          background-color: color('white');
    
          @media (min-width: $bp-max-content) {
            width: auto;
          }
        }
    
        &--subsite {
          &::before,
          &::after {
            width: 100%;
          }
        }
      }
    }
    
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: components/41-organisms/header/_header.scss
  • Size: 8.6 KB