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.
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
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 logoPrimary menu
The Primary menu uses a mega-menu format.
See MenusBoth the ACU logo and Primary menu have a $purple--100 background that blends into the ACU background.
See ACU backgroundBreadcrumbs 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 shardExample 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
Example in action
ACU header with an image bannerACU 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
Example in action
ACU header with an image banner and Call-to-actionACU 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
