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

Contact panel

The Contact panel is a page-wide panel that promotes contact information in a clear and easy to follow format at the bottom (above the ACU footer) of every page specific to a section or website.

Best practice

  • Use Contact panel on sites or site sections where contact information is an important part of the section's service (e.g. AskACU, International, Research Institutes). Otherwise use the 'Key facts' UI.
  • Place contact information in a clear order of priority. For example, if users are likely to want to ring first, place the phone number in a prominante position.

Alternative UI components

Contact panel

Usage

Use Contact panel on sites or site sections where contact information is an important part of the section's service (e.g. AskACU, Service Central, International). Otherwise use the 'Key facts' UI.

Definition

When used, the Contact panel sits above the footer panel. It is made up of a large, full width $purple--120 panel with a $wite heading 2, primary channel contact details, including large icons and Standalone text links, followed by secondary contact channels below with small icons.

Desktop

Panel

  • full content column width
  • $purple--120 background ($sand may also be used for ACU Research pages)

Heading

  • H2 or .h2 style
  • Optional subheading in Miller Bold

Primary contact channels

  • 2 column
  • large icon
  • h5 or .h5 class
  • copy
  • Standalone text link

Secondary contact channels

  • rule
  • small icon
  • channel name in bold followed by contact detail
Mobile

Panel content folds into one column for screens less than 768px wide.

Forthcoming...

Forthcoming...

Example

Contact panel

Examples in action

Contact panel (AskACU)
Contact panel (International)
Contact panel (Research Institute) ($sand background)