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

Promo panel

Usage

Use our Promo panel when the text box situated within it is better placed on the left of screen either because:

  • the presentation of the background image chosen for the promotion needs to be clearly viewable on the right as the text box will overlay a large part of the left side of the image, or
  • this better balances the page in relation to the components above and below the call-out.

Definition

Example

Tab

Promo panel (right image)

Usage

Use our Promo panel (right image) when the text box situated within it is better placed on the right of screen either because:

  • the presentation of the background image chosen for the promotion needs to be clearly viewable on the right as the text box will overlay a large part of the left side of the image, or
  • this better balances the page in relation to the components above and below the call-out.

Definition

Example

nested-tabs

Promo panel (red)

Usage

Use our Promo panel ($red--100) for the same reasons as you would our standard Promo panel except you need a 'louder' promo than a purple text box creates. This could be because this promo is more important to the user than other promos or components on the page as red is a much 'louder' colour than purple.

However, use this component sparingly as the more it is used the less its affect as our 'loudest' promo it becomes. It should not be used more than once on a page.

ACU public site usage

Promo panel ($red--100) is not used on the ACU public site except on ACU Research pages where it is used with the 'Research' call-out shape as seen below.

Definition

Example

Promo panel (red)

Text promo 1row with CTA

Usage

Use the Text promo 1row with CTA component when you need to promote a link as a very large (and loud) call-to-action - usually across the whole screen. Use this promo sparingly as its effectiveness as our loudest call to action is diminished the more it is used especially within the same page.

Definition

Example

nested-tabs

Code samples

Forthcoming...

<div class="promo-background"> <div class="promo-panel-cta panel-red"> <div class="cut-corner-top-promo"></div> <div class="cut-corner-promo"> <h4 class="padding--0">Explore your career and study options</h4> <a title="CTA" href="#" class="cta cta--red-border">Call to action</a></div> </div> </div>

Forthcoming...

Example in action

Find a course (bottom of page)