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

ACU background

The ACU background appears behind all other surfaces and wraps around the content.


Ideally, the ACU background should be used as the default background on all pages of an ACU site. Also use the mobile version of the background.

ACU background variations

ACU has one default background for public facing sites. It also has three variants for sites focussed predominatly on current students, staff or non-core ACU business (micro-sites). When in doubt use the default background.


The default background is a $purple--100 background that appears behind all other surfaces and wraps around all other elements of a page. It extends evenly away from the content wrapper on the left and right when a screen is extened further than 1365px wide so that content remains centred no matter how wide the screen is. It should also incorporate the ACU header at the top and ACU footer at the bottom. On the mobile version Background is not evident on the left and right but is on the top and bottom (as the mobile version of the ACU header and footer).

On desktop screens, the content wrapper is $white and its top left corner juts out at a left angle as an offset into the ACU Background by 8.33333% and about 33% up the header banner.

On non-desktop screens (1365px and smaller widths), the $purple--100 disappears from the left and right sides allowing the content background to extend fully on both sides.


ACU Background

Code samples

  • Colour: $purple--100
  • Width: minimum width for the content wrapper is 1365px
  • No side $purple--100 background: at 1365px and smaller widths.



Related UI components

Example in action

ACU Background