Global Components

Page Header

• Default with Image
• Default without Image
• Image only
• Custom (standard page)

Default with Image

This is the standard header style that should be used on any internal content pages that require a header. To create a page header you need a folder containing a single link asset. The name of the link asset will be used at the title, and the thumbnail applied to the link asset will be used as the header background image - the recommended size for the header image is 1600x400. The dark fade inlcuded on the left-hand-side of the header to improve readbility of the header test is part of the template and does not need to be incorporated into the uploaded image.

Note: On pages where the page header is used and the default H1 has been disabled, the page header will output the page header in an <;h1>. IF the default H1 is still visible the page header will output the default <span>

Asset name

<section id="page-header" style="background-image:url('//placehold.it/1600x400');"><div class="header-tint">
  <div class="inner">
    <a href="#"><span class="page-header-title">Asset name</span></a>
  </div>
</div></section>

Default without Image

If an image is not specified for the default page header, you will get a plain dark grey background. To create a page header you need a folder containing a single link asset. The name of the link asset will be used at the title.

Asset name

<section id="page-header"><div class="no-header-tint">
  <div class="inner">
    <a href="#"><span class="page-header-title">Asset name</span></a>
  </div>
</div></section>

Image only

To create an image only header crerate a folder and place a single image inside. The name of the image asset will be used as the alt text for the image. The recommended image size is 1600x400 and the image will scale proportionally as the browser window resizes.

<section id="page-header">
  <img src="//placehold.it/1600x400" class="page-header-image" alt="Asset name"/>
</section>

Custom (standard page)

The custom header should only be used in special-case scenarios, and should never be used by web publishers without prior approval from the web team. Custom headers will typically be used in situations where the uppercase 'Headline' style is needed within the header, including the use of the 'blue' keyword highlighting. An exmaple of this can be seen within the brand campaign site. In general the same image specification as for the default header apply, however a taller image may be required depending on the size of the headline used. Inverted headlines can be used, with or without the image gradient overlay depding on the image used.

Headline name

<section id="page-header" style="background-image:url('//placehold.it/1600x400');"><div class="header-tint">
  <div class="inner">
    <a href="#"><span class="headline-80px inverted-headline">Asset <span>name</span></span></a>
  </div>
</div></section>

Headline name

<section id="page-header" style="background-image:url('//placehold.it/1600x400');"><div class="no-header-tint">
  <div class="inner">
    <a href="#"><span class="headline-80px">Headline <span>name</span></span></a>
  </div>
</div></section>

Last updated
08 September 2017 @ 16:40 — Dean Robinson