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

ACU shard

The ACU shard is a signature brand element on the banner component of the ACU header.

Usage

The ACU shard should be used on header banners such as on the page heading panel, image/s and video (carousel). The shard overlaps the bottom half left part of the banner in both its default and landing page (image or video) forms.

Behaviour

There is no user interaction with the ACU shard other than a visual recognition of the ACU brand as the shard is specific to ACU websites.

Definition

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.

Examples

Shard on header panel - desktop

Shard on header panel - desktop

Shard on header panel - Mobile

Shard on header panel - Mobile

Examples in action

Shard on feature image (with carousel)
Shard on header panel (page heading)

Related UI modules

Shard shape downloads

Use these shapes as an optional guide. However, the final result should follow the above specifications.

Related UI modules

Corner-cut

The Corner-cut is another ACU signature brand element.

Definition

The Corner-cut is presented on either the bottom or top right corner of the $purple--100 panels and feature copy highlight boxes. On ACU Research pages these may have a $sand background instead of $purple--100.

Corner-cut shape on panel

Header image

Corner-cut shape on highlight box

Header image

Examples in action

Bottom corner-cut panel (Our research)
Top corner-cut highlight box (Let us assist your journey)

Corner-cut shape download

Use this shape as an optional guide only. The final result should follow the above specifications.

Related UI modules