Contact panel

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

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...

Example

Examples in action

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