The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

Header

The ACU header, or masterhead, together with the ACU background, form the basis of the ACU brand identity, beyond the ACU logo, on our websites. There are two ACU header types.

  1. ACU header (content page)
  2. ACU header with banner (landing page)

Usage

Ideally, the ACU header should be cascade across all pages of an ACU site when this is technically possible. Links should be customised to the site if the site does not naturally fall under a topic or section of one of ACU's main websites - ACU public site, Student Portal or staff site - or it is otherwise not practical to do so. In the case of the later use the Secondary menu to link the site back to one or more of ACU's main sites.

There are two basic styles of the ACU header - the default style, for content pages, and the banner image style, for landing pages.

Related UI components

ACU header (content page)

Usage

The default ACU header style is for content or default pages when no banner image / video is required.

Definition

The ACU header is a complicated UI made up of several other components including:

  • Secondary menu
  • the ACU logo
  • the ACU background
  • Primary menu
  • breadcrumbs
  • page heading

Example

ACU Headers
Secondary menu
  • A Secondary menu sits within a narrow $purple--120 background coloured strip at the very top of top of the page stretching across 100%.
  • The menu links are in uppercase and $white.
  • On hover, the link opacity goes down to .75 and a 0.2rem thick border-top is displayed.
ACU logo

The ACU logo which is aligned left to match the page content.

See ACU logo
Primary menu

The Primary menu uses a mega-menu format.

See Menus

Both the ACU logo and Primary menu have a $purple--100 background that blends into the ACU background.

See ACU background
Breadcrumbs and Page heading panel

The Breadcrumbs and the Page heading sit within a panel which is the width of the page content from the content's left alignment. The panel sits vertically 50% over the ACU background colour (panel top) and 50% over the content background (panel bottom). It has a left margin of 8.33333% to offset the panel from the content background.

Breadcrumbs

The Breadcrumbs sit across the top of the Page heading panel (described above) but have a narrow $purple--120 background. The breadcrumb links are $white with an underline on hover.

Page heading

The Page heading is a $white heading 1 and sits vertically centred on the panel but left aligned. The panel background colour is slightly lighter #purple--115 than the Breadcrumbs' background ($purple--120).

ACU shard

The ACU shard overlaps the bottom half left part of the banner in both its default and landing page (image or video) forms.

The ACU shard has a $white background and overlays the Page Heading panel from its left stretching across 50% of the bottom of the Page heading panel. The shard has a skew(45deg) cut-off at its bottom right corner.

See ACU shard

Example in action

ACU header (default)
ACU header (Research default)

ACU header with banner

Usage

The banner image styled header is used on landing pages or pages requiring an image, video or carousel in the header banner.

Banner heading types

There are four types of banner headings.


ACU header with an image banner

Definition

ACU header with banner has the same properties 'ACU header (content page)' except that it incorporates a banner with an image or video in place of the Page heading panel. It also uses a tranparent breadcrumb background ($purple--120 at .8 opcaity) and the page heading drops down to the start of the content area. Normally, there is no breadcrumb on a homepage.

Example
ACU header with banner
Example in action
ACU header with an image banner

ACU header with an image banner and Call-to-action

ACU header with an image banner and Call-to-action has a transparent block on the left wrapping a $white Heading two title followed by a paragraph and then a Standalone text link.

Example

ACU header with an image banner and Call-to-action
Example in action
ACU header with an image banner and Call-to-action

ACU header with a video banner

ACU header with a video banner basically replaces the banner image with a video. It may also be used with the carousel option below.

Example

Header video

ACU header with a carousel

See the carousel page