User Manual

Header

The main header component on a page, always displayed at the top. Based on the type of page it is used on it will change its context. The header always consists out of a left, middle and right section. The left and right section can contain certain actions, while the middle one is mainly used to display the active page title.

Detail with languages

When a detail page is opened, the header changes to only display a back button and some more actions to the right. There is a possibility to add languages in the actions on the right. Very important to know is that the languages on mobile are shown in the settings page. So they can be hidden with the class u-tablet-hide to hide them on devices under the tablet breakpoint.

Do note that the header detail does not have a background color and by default the languages are shown in white. To fix this, use the languages modifier m-languages--inverted to get the correct result.

On some screens the content will make the language switcher feel like floating in the interface. This can be fixed by visually grouping them together using for example a line. This can be done with the o-header--with-border modifier.

  • o-header--detail

Detail

this is a subtitle 

    
      

  

<header class="o-header o-header--detail o-header--with-border">
  <div class="o-header__container l-container">

    

<a
  class="a-icon-button icon-chevron-left  "
  href=""
  
></a>



    <div class="o-header__content">
      
        <h1 class="o-header__title">Detail</h1>
      

      
        <small class="o-header__subtitle">this is a subtitle</small>
      
    </div>

    <div class="o-header__right-actions">
      

<ul class="m-languages m-languages--inverted u-tablet-hide">
  

    <li class="m-languages__item is-active">
      <a class="m-languages__link" href="">NL</a>
    </li>

  

    <li class="m-languages__item ">
      <a class="m-languages__link" href="">FR</a>
    </li>

  
</ul>


    </div>

  </div>
</header>

Detail

When a detail page is opened, the header changes to only display a back button and some more actions to the right.

  • o-header--detail

Detail

this is a subtitle 

    
      

  

<header class="o-header o-header--detail ">
  <div class="o-header__container l-container">

    

<a
  class="a-icon-button icon-chevron-left  "
  href=""
  
></a>



    <div class="o-header__content">
      
        <h1 class="o-header__title">Detail</h1>
      

      
        <small class="o-header__subtitle">this is a subtitle</small>
      
    </div>

    <div class="o-header__right-actions">
      
    </div>

  </div>
</header>

Overlay

When a header is used in an overlay it is similar to the detail header but on desktop will show a close button instead of an arrow. Once mobile, the close button turns into an arrow.

  • o-header--detail

Overlay


    
      

  

<header class="o-header o-header--overlay ">
  <div class="o-header__container l-container">

    

<a
  class="a-icon-button icon-chevron-left u-tablet-show undefined "
  href=""
  
></a>



    

<a
  class="a-icon-button icon-cross u-tablet-hide undefined "
  href=""
  
></a>



    
      <h1 class="o-header__title">Overlay</h1>
    

    <div class="o-header__right-actions">
      
    </div>

  </div>
</header>

Primary

The default header or the main header component is always represented by the primary colors defined in the styleguide. In the background the two shapes of the logo are inserted for a more brand-like visualisation.

Overzicht


    
      

  

<header class="o-header ">
  <div class="o-header__container l-container">
    <h1 class="o-header__title">Overzicht</h1>

    <div class="o-header__right-actions">
      

<button
  class="a-button a-button--ghost icon-turn-off a-button--icon-after "
  
>
  <span class="a-button__text">Uitloggen</span>
</button>


    </div>
  </div>
</header>

Theme white

An inverted header is used to change the colors in the header to white.

  • o-header--detail
  • o-header--theme-white

Theme white


    
      

  

<header class="o-header o-header--overlay o-header--theme-white">
  <div class="o-header__container l-container">

    

<a
  class="a-icon-button icon-chevron-left u-tablet-show a-icon-button--inverted "
  href=""
  
></a>



    

<a
  class="a-icon-button icon-cross u-tablet-hide a-icon-button--inverted "
  href=""
  
></a>



    
      <h1 class="o-header__title">Theme white</h1>
    

    <div class="o-header__right-actions">
      
    </div>

  </div>
</header>

Modifiers

  • o-header--detail

    Used when indicating the header is presented on a detail view. The markup has to be updated as well because detailed views only contain an icon-button, actions on the side and a title.

  • o-header--overlay

    Used when indicating the header is presented on an overlay view. The markup has to be updated as well because overlay views only contain an icon-button, actions on the side and a title.

  • o-header--theme-white

    Usually combined with the o-header--detail modifier, because it will change the colors to white to support the header on a colored background

  • o-header--with-border

    Add a border to the bottom of the header. This can mainly be used when you have actions on the right of the header component that feel alone and floating in the interface. By adding this bottom line you can make it feel like a whole part. This is mainly influenced by the content below as well if everything is aligned correctly.