Masthead

Creating a website header? This is the masthead for you

How we design them

The word masthead refers to the flag, banner on a ship, or the name of a newspaper printed in large type at the top of the front page. In giffgaff UI these are what introduces a page, making a grand entrance, setting the tone for the page, enticing users to scroll down further.

We divide these into major and minor mastheads for different needs. There are a range of colour options that are limited to keep consistency. But colour and excitement can come from the illustrations, use of doodles, and by engaging writing.

How they look

Major masthead

Major mastheads should be used on pages that really want to make a splash.

Image dimensions

The major masthead needs a 312 pixel x 192 pixel image for mobile and a 504 pixel x 504 pixel image for desktop.

View demo Open in new window
Open in new window
320 x 568
View code 
    <header class="gg-c-masthead gg-c-masthead--digital-noise">
  <div class="gg-c-masthead__content">
    <div class="gg-c-masthead__text">
      <h1 class="gg-u-text-megaphone"><mark class="gg-u-doodle-boing gg-u-doodle-boing--light-pink">Main</mark> heading</h1>
      <p class="gg-c-masthead__page-subtitle">Optional subheadline</p>
    </div>

  <picture class="gg-c-masthead__picture">
      <source media="(min-width: 992px)" srcset="/images/dimensions-desktop.png" alt="a description of the image" />
      <img src="/images/dimensions-mobile.png" alt="a description of the image" />
    </picture>

    
  </div>
</header>

With example image

View demo Open in new window
Open in new window
320 x 568
View code 
    <header class="gg-c-masthead gg-c-masthead--digital-noise">
  <div class="gg-c-masthead__content">
    <div class="gg-c-masthead__text">
      <h1 class="gg-u-text-megaphone"><mark class="gg-u-doodle-boing gg-u-doodle-boing--light-pink">Main</mark> heading</h1>
      <p class="gg-c-masthead__page-subtitle">Optional subheadline</p>
    </div>

  <picture class="gg-c-masthead__picture">
      <source media="(min-width: 992px)" srcset="/images/lady.png" alt="a description of the image" />
      <img src="/images/lady-mobile.png" alt="a description of the image" />
    </picture>

    
  </div>
</header>

Minor masthead

Minor mastheads are to be used where a big image is not required, but the top of the page still needs to be noticed. They take less vertical space.

Minor masthead colours are set by bay the theme class applied on the body. If no theme is set it defaults to black.

View demo Open in new window
Open in new window
320 x 568
View code 
    <header class="gg-c-masthead-minor">
  <div class="gg-c-masthead-minor__content">
    <h1 class="gg-u-text-shout gg-u-doodle-squiggle gg-u-doodle-squiggle--light-pink">Main heading</h1>
    <p class="gg-c-masthead-minor__page-subtitle">Optional subheadline</p>
  </div>
</header>

Minimal masthead

View demo Open in new window
Open in new window
320 x 568
View code 
     <header class="gg-c-masthead-minimal">
    <h1 class="gg-u-text-shout gg-u-doodle-squiggle gg-u-doodle-squiggle--light-pink">Main heading</h1>
</header>