This pattern is the single, most important way to indicate to your visitors that they are browsing WFP’s online property. Below, you will find most commonly used patterns for your header.

Header patterns will vary slightly, depending on your use case, whether the website, but generally follow the same basic style.

External

These pages are always available to the public, therefore need to represent WFP’s brand appropriately. Please, make sure you always use only the official logos, without any alterations.

Public pages should always use a logo with a caption “World Food Programme”. For smaller screens, you can serve a narrower version of the logo, with a two-line caption.

If the vertical space is limited (i.e.: on smaller viewports), you can substitute the logo with a “WFP.org” caption (using strictly white text #ffffff on a blue background #2A93FC), as per the official guidelines. Refer to the examples below.

Subcomponents

When implementing mastheads you can make use of subcomponents, such as header--search, or header--btn, to add call to actions, or a search input.

Preview
Source
<header class="wfp-header-ext">
  <div class="wfp-grid wfp-wrapper">
    <div class="wfp-u-2-3 wfp-u-sm-1-4 header--container">
      <h1 class="header--title">
        <a href="#" class="header--logo">
          <img src="en-standard.png" srcset="en-standard.png 1x, en-standard@2x.png 2x" alt="UN World Food Programme">
        </a>
      </h1>
    </div>
    <div class="wfp-u-1-3 wfp-u-sm-3-4 header--nav">
      <button class="header--toggle" id="js-example-menu-trigger">Menu</button>
      <nav class="header--menu" id="js-example-menu">
        <ul class="menu--group">
          <li class="menu--item"><a href="#" class="menu--link active">Navlink #1</a></li>
          <li class="menu--item"><a href="#" class="menu--link">Navlink #2</a></li>
          <li class="menu--item"><a href="#" class="menu--link">Navlink #3</a></li>
          <li class="menu--item"><a href="#" class="menu--link">Navlink #4</a></li>
          <li class="menu--item"><a href="#" class="menu--link">Navlink #5</a></li>
        </ul>
      </nav>
      <div class="header--misc">
        <div class="header--search">
          <input type="search" class="header--input" placeholder="Search">
        </div>
      </div>
    </div>
  </div>
</header>

Internal

When you are building a website or an application that works on your local network (e.g.: on Intranet), you can implement a simplified version of the WFP header.

It has been designed specifically for use with Intranet sites and apps, which don’t require any extensive branding, since its users are already familiar with the WFP.

Internal header features a simple navigation, which works on both smaller and bigger screens. To implement it correctly, use the examples below.

Preview
Source
<header class="wfp-header-int">
  <div class="wfp-grid wfp-wrapper">
    <div class="wfp-u-3-5 wfp-u-md-1-3 header--container">
      <h1 class="header--title">
        <a href="#" class="header--logo">Site Title</a>
      </h1>
    </div>
    <div class="wfp-u-2-5 wfp-u-md-2-3 header--nav">
      <button class="header--toggle" id="js-nav-trigger">Menu</button>
      <nav class="header--menu" id="js-nav">
        <ul class="menu--group">
          <li class="menu--item"><a href="#" class="menu--link active">Navlink #1</a></li>
          <li class="menu--item"><a href="#" class="menu--link">Navlink #2</a></li>
          <li class="menu--item"><a href="#" class="menu--link">Navlink #3</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Header Position

You can also set header component to stay fixed to the top of your page, by adding wfp-header-spacer--narrow class to your body tag (for extra spacing), and class fixed to header-int element.

To ensure the navigation works correctly, include our fork of responsive-nav library to the bottom of your page, before the closing body tag. You can load it locally, from WFP UI dist directory, or from our CDN:

<script src="http://cdn.wfp.org/libraries/wfpui/v0.8.0/js/responsive-nav.min.js" defer></script>
<script>
  var nav = responsiveNav("#js-nav", {
    customToggle: "js-nav-trigger", // menu toggle
    navClass: "header--menu", // menu class
    openPos: "fixed", // `absolute`, or `fixed`
    closedPos: "static"
  });
</script>

Subcomponents

In addition to default navigation bundled with each header variant, you can make use of special subcomponents, to add more functionality.

header--btn

Designed specifically for use with our mastheads, as far as contrast and accessibility goes. It’s a general-purpose element, so it can be used for just about anything.

<div class="header--misc">
  <button class="header--btn">Label</button>
</div>
header--input

General purpose alphanumerical input, adjusted for use with our header. Adjust input type attribute based on the intended use of your element.

<div class="header--misc">
  <input type="text" class="header--input" placeholder="Text input">
</div>

Text input designated for entering search queries, adjusted for use with our header.

<div class="header--misc">
  <div class="header--search">
    <input type="search" class="header--input" placeholder="Search">
  </div>
</div>