Mastheads

There are three main sections to the masthead: The black topnav (optional), a required white section, and an optional red hero block consisting of a title block optionally preceded by an image banner.

Before the masthead, if there are a lot of navigation elements being used, there should be a skip to main content link.

The topnav is a Bootstrap navbar which, if used, should be marked up as a navigation landmark region. It must use Bootstrap's "dark" styling.

The masthead must include the University of Edinburgh logo in the left half of the white region.

The right side if the white region can be used in various ways, or not at all. If you need a prominent search then you can include the masthead search block. It can also include a brief page title instead of using the title block, or a secondary logo if the site is a joint venture with another institution.

The hero block can start with a banner image. Do not change the ratio of the hero image used in this context. It is a good idea to provide multiple versions of the hero image for different viewports to optimise load times. This banner can also include a small branding image overlaid on the hero image.

The title block of the hero contains a section title and an optional link to a related parent section, eg a School's name and its College.

Admin Bar

Display Masthead

Auditorium

09:58
Wed 30 Oct

Display Masthead Ppls

PPLS Auditorium

09:58
Wed 30 Oct

Display Masthead Uebs

UEBS Auditorium

09:58
Wed 30 Oct

Masthead

Masthead Branding

Masthead Heading

Masthead Hero

Masthead Minimal

Masthead Search Only

Masthead Title Only