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.
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
The default ACU header style is for content or default pages when no banner image / video is required.
The ACU header is a complicated UI made up of several other components including:
- Secondary menu
- the ACU logo
- the ACU background
- Primary menu
- page heading
- 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.
The ACU logo which is aligned left to match the page content.See ACU logo
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.
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.
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).
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 actionACU header (default)
ACU header (Research default)
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
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 in actionACU header with an image banner
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 in actionACU header with an image banner and Call-to-action
ACU header with a video banner basically replaces the banner image with a video. It may also be used with the carousel option below.
See the carousel page