Headers

These headers are available in the design system:

  • .image — auto height, with background image, gets expanded by content
  • .banner — with background image
  • .with-box — contains a white box with more text content, auto height, gets expanded by content

Every header can contain a wrapper div that determines how the content within the header is displayed.

A note on images

We don't provide a default image because images should always be relevant to the content.

Default header

This header is the default header and generally needs no class. It can contain a sub line for further explanation what this page is about.

Please do not use the name of the whole web presence as h1 but use a meaningful and short title for content on page shown.

Default header

In congue definiebas 

<header>
  <h1>
    In congue definiebas
  </h1>
</header>

Default header subline

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis 

<header>
  <h1>
    In congue definiebas
  </h1>
  <p>
    Pro id alienum epicurei, nam ne legimus vivendum lobortis
  </p>
</header>

Image header

Using .image as class, this heading must have a background image specified in the style attribute.

Wrappers

There are several different inner wrappers to position the content within this header type:

  • .mid-align — recommended as standard wrapper within this header. Positions content vertically centered
  • .bottom-align
  • .bottom-align-flat

Image header mid align

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis 

<header class="image" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="mid-align">
    <h1>
      In congue definiebas
    </h1>
    <p>
      Pro id alienum epicurei, nam ne legimus vivendum lobortis
    </p>
  </div>
</header>

Image header mid align enhanced

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis 

<header class="image" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="mid-align blurred">
    <h1>
      In congue definiebas
    </h1>
    <p>
      Pro id alienum epicurei, nam ne legimus vivendum lobortis
    </p>
  </div>
</header>

Image header bottom align

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis 

<header class="image" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="bottom-align">
    <h1>
      In congue definiebas
    </h1>
    <p>
      Pro id alienum epicurei, nam ne legimus vivendum lobortis
    </p>
  </div>
</header>

Image header bottom align flat

In congue definiebas

Pro id alienum epicurei, nam ne legimus vivendum lobortis 

<header class="image" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="bottom-align-flat">
    <h1>
      In congue definiebas
    </h1>
    <p>
      Pro id alienum epicurei, nam ne legimus vivendum lobortis
    </p>
  </div>
</header>

Image header with filters

Non equidem invideo, miror magis posuere velit aliquet. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Non equidem invideo, miror magis posuere velit aliquet. Praeterea iter est quasdam res quas ex communi.

Filter by type 
<header class="image with-filters" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <p>
    Non equidem invideo, miror magis posuere velit aliquet. Morbi fringilla convallis sapien, id pulvinar odio volutpat. Non equidem invideo, miror magis posuere velit aliquet. Praeterea iter est quasdam res quas ex communi.
  </p>
  <div class="bottom-align-flat">
    <div class="filtered-listing-wrapper">
      <form class="filtered-listing-select">
        <fieldset class="left">
          <legend>Filter by type</legend>
          <div class="filtered-listing-tag">
            <input checked="checked" class="checkbox" data-color="green" data-tag="all" id="c00" name="f[degree_type]" type="checkbox" /><label for="c00"><span>All</span></label>
          </div>
          <div class="filtered-listing-tag">
            <input class="checkbox" data-color="bronze" data-tag="category-one" id="c1" name="f[course_type]" type="checkbox" /><label for="c1"><span>Nominavi appetere</span></label>
          </div>
          <div class="filtered-listing-tag">
            <input class="checkbox" data-color="silver" data-tag="category-two" id="c2" name="f[course_type]" type="checkbox" /><label for="c2"><span>Iudico corrumpit</span></label>
          </div>
        </fieldset>
        <div class="right">
          <label for="f-select2">Filter by section</label>
          <div>
            <select class="clear" id="f-select2" name="f[select2]" title="Please make a selection from the 2nd dropdown">
              <option value="-1">
                All sections
              </option>
              <option value="section1">
                Section heading 1
              </option>
              <option value="section2">
                Different Section
              </option>
              <option value="section3">
                Third Example Section
              </option>
            </select>
          </div>
        </div>
      </form>
    </div>
  </div>
</header>

Banner

Banners take up the most important space on a website. So this is the place to promote the most important thing on your website. Be careful what background pictures you choose as the text on top must be readable.

Simple header banner

<header class="banner" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="mid-align">
    <h1>
      In congue definiebas
    </h1>
    <p>
      Pro id alienum epicurei, nam ne legimus vivendum lobortis Pro id alienum epicurei, nam ne legimus vivendum lobortis Pro id alienum epicurei, nam ne legimus vivendum lobortis
    </p>
    <p>
      <a class="button-hero-inverse" href="#">Read more</a>
    </p>
  </div>
</header>

Other headers

The following headers are for special purposes only.

Please note! The .with-box style shown below cannot be combined with a fixed-height header, such as .banner, as the box height matches its container (fluid layout).

Header with box

In congue definiebas

In congue definiebas quo. Vivendo officiis vix an, eos at fabulas constituam dissentiunt. Id sit iuvaret habemus splendide, mei ea dicta quaestio. No malis eruditi maiorum vim, cu duo atqui dolorum imperdiet.

Pro id alienum epicurei, nam ne legimus vivendum lobortis. Docendi dissentiunt duo ad, eu vix nonumy legere. Ut vis iusto quidam virtute, harum convenire at his, option tacimates ea est. Ius et nisl nemore praesent. Sit ut meis porro velit, his cu malorum voluptatum sadipscing, tation atomorum dissentiet ne mea. 

<header class="with-box" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="box">
    <h1>
      In congue definiebas
    </h1>
    <p>
      In congue definiebas quo. Vivendo officiis vix an, eos at fabulas constituam dissentiunt. Id sit iuvaret habemus splendide, mei ea dicta quaestio. No malis eruditi maiorum vim, cu duo atqui dolorum imperdiet.
    </p>
    <p>
      Pro id alienum epicurei, nam ne legimus vivendum lobortis. Docendi dissentiunt duo ad, eu vix nonumy legere. Ut vis iusto quidam virtute, harum convenire at his, option tacimates ea est. Ius et nisl nemore praesent. Sit ut meis porro velit, his cu malorum voluptatum sadipscing, tation atomorum dissentiet ne mea.
    </p>
  </div>
</header>

Course header short

Idque Caesaris facere voluntate

Cum ceteris in veneratione tui montes, nascetur mus. 

<header class="image" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="bottom-align-flat">
    <div class="course-select">
      <div class="left">
        <h2>
          Idque Caesaris facere voluntate
        </h2>
        <p>
          Cum ceteris in veneratione tui montes, nascetur mus.
        </p>
      </div>
      <div class="right">
        <div>
          <label for="residency-short">We have guessed you’re</label><select class="clear" id="residency-short" name="residency">
            <option selected="selected" value="domestic">
              a domestic student
            </option>
            <option value="international">
              an international student
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</header>

Course header banner

<header class="banner" style="background-image: url('/assets/example/alan_gilbert.jpg');">
  <div class="bottom-align-flat">
    <form action="" class="course-select" data-view-visitor-select-form="" method="get">
      <div class="left">
        <h2>
          Idque Caesaris facere voluntate
        </h2>
        <p>
          Cum ceteris in veneratione tui montes, nascetur mus.
        </p>
      </div>
      <div class="right">
        <div>
          <label for="residency">We have guessed you’re</label><select class="clear" id="residency" name="residency">
            <option selected="selected" value="domestic">
              a domestic student
            </option>
            <option value="international">
              an international student
            </option>
          </select>
        </div>
      </div>
    </form>
  </div>
</header>

Article header bottom align

Praeterea iter est quasdam res quas ex communi.

At nos hinc posthac, sitientis piros Afros. Quisque ut dolor gravida, placerat libero vel, euismod. 

<article>
  <header style="background-image: url('/assets/example/alan_gilbert.jpg');">
    <div class="bottom-align blurred">
      <h1>
        Praeterea iter est quasdam res quas ex communi.
      </h1>
      <p>
        At nos hinc posthac, sitientis piros Afros. Quisque ut dolor gravida, placerat libero vel, euismod.
      </p>
    </div>
  </header>
</article>

Article header mid align

Praeterea iter est quasdam res quas ex communi.

At nos hinc posthac, ut dolor gravida, placerat libero vel, euismod.

By Hinc Posthac
Placerat libero Vel at The University of Melbourne 

<article>
  <header style="background-image: url('/assets/example/alan_gilbert.jpg');">
    <div class="mid-align blurred">
      <h1>
        Praeterea iter est quasdam res quas ex communi.
      </h1>
      <p>
        At nos hinc posthac, ut dolor gravida, placerat libero vel, euismod.
      </p>
      <p class="author">
        <em>By Hinc Posthac</em><br />Placerat libero Vel at The University of Melbourne
      </p>
    </div>
  </header>
</article>