Back to top

Column container

The background colour of a 'Column container' defaults to white, but can be made grey.

Layouts which include a 1 or 2 column configuration (e.g. 2-8-2 or 8-1-3) do not allow content to be added within the 1 or 2 columns.

Contents can be selected to 'Reverse stack' in mobile which will reverse the order of columns from left to right, to right to left when the mobile viewport is detected.

Back to top

Copy

'Copy' should be authored in a 'Column container' component or specified comp-tainers.

Back to top

Circular call out

Within a 'Circular call out' you must author sub text (recommend 40 characters), main text (recommend 25 characters) and an image. Underneath the image you have the option of adding Supporting text.

Back to top

CTA container + CTA

The 'CTA container' can display 1, 2 or 3 'CTA's.

Each CTA can hero an icon or remain blank. Within the body of each CTA you can author a heading, phone number and supporting content. At the bottom of each CTA you can add a button or leave blank.

The dialogue for each CTA has a 'Locator' tab which should not be authored, due to it being a Westpac configuration that has accidentally been included within the SBG dialogue.

Back to top

Global CTA

The 'Global CTA' should be authored in a 'Column container' component or specified comp-tainers.

If required, you have the option to author 2 dropdown options for the Primary button. You can also align the component left, center or right.

Back to top

Image

The 'Image' should be authored in a 'Column container' component or specified comp-tainers.

You can align the component left, center or right.

Back to top

Lego accordion

The lego accordion should be authored in a 'Column container' component or specified comp-tainers.

You can add an unlimited number of rows (minimum 1).

By default, the first accordion item will be expanded on page load. If required, you have the option to collapse the first accordion item on page load.

Within the body of each accordion item you are technically able to insert most other Touch UI components.

Back to top

List

The list should be authored in a 'Column container' component or specified comp-tainers.

You can add an unlimited number of list items (minimum 1).

There are 3 list styles available - 'Chevron' (default), 'Tick' or 'Bullet'.

Above the list you have the option of adding Heading text.

Back to top

Not right

The Not right component is made up of a mandatory heading, image and 2 products. You have the option of authoring a supporting link or text underneath the image.

Within the body of each product you must author a product name, sub text (option to author 2 lines if required) and a URL.

Back to top

Offers container

The background colour of an 'Offers container' defaults to white, but can be made grey.

The 'Offers container' can display 1, 2 or 3 offers. Within the container you can author an:

• optional heading
• accordion title, which is displayed if any of the 'Offer pods' authored within this container have content present within their 'Accordion description' fields. If the 'Offer pods' do not have content present within this field then the accordion dropdown is hidden.

Within the body of each Offer pod you must author a rate or offer which can be configured to show '% p.a.' if required. You can also author an optional 3 lines of text called 'Byline', a description and an accordion description.

The dialogue for each Offer pod contains a 'Special offer' checkbox, which when selected adds a 'Special offer' label onto the component. Due to a current bug, this label will only display if 1 offer is shown within the container, not 2 or 3.

Back to top

Product attribute container

The 'Product attribute container' can display 1, 2 or 3 'Product attributes'. Within the container you must also author an image.

Each 'Product attribute' must have a heading and can house an unlimited number of list items (minimum 1). All list items must contain hero text and a description. You'll see an 'Icon' option but disregard this. You have the option of splitting the list items to display them side by side.

Back to top

Product compare

'Product compare' should be authored in a 'Column container' component.

'Product compare' can display 2 or 3 products.

Each product must contain a product title and URL. Optionally you can author an image with alt text, a special offers label, sub text, key features, additional information and a button.

If you author content into the 'Sub text' and/or 'Additional information' fields, it will automatically display bold text to the left, and non-bold text to the right.

Back to top

Page header

Within a 'Page header' you must author an image and a header (you can override the H1 content via 'Header override' field). In addition to this you have the option of authoring sub text and a 'back to' link.

Recommended character counts are:

• Header - 25 characters
• Sub text - 45 characters
• 'Back to' link - 15 characters
  

Back to top

Service pod container + Service pod

The background colour of a 'Service pod container' defaults to white, which presents grey service pods. You have the option to invert this colour scheme by selecting background grey which presents white service pods.

The service pod container is made up of an unlimited number of rows (minimum 1). Within each row you can choose to display 2 or 3 service pods.

Each Service pod can hero an image, icon or remain blank. Within the body of each service pod you can author a title, description and/or a link list. At the bottom of each pod you can add a text link, arrow icon or leave blank.

IMAGE SIZES: 535x175pixels

Back to top

Sticky jump container + Sticky jump link target

First place the 'Sticky jump container' where you want the sticky nav to sit on the page (usually below the head image). Then place the 'Sticky jump link targets' in vertical locations where you wish the sticky nav links to anchor to. To function, each 'Sticky jump link target' must sit above and outside whatver container or comptainer is below, not inside.

The nav can have up to 4 jump links if 2 CTA items are present, or 5 jump links if 1 or 0 CTA items are present

If you require 2 separate CTA buttons shown together on the sticky nav (e.g. 'Apply' and 'More info'), ensure that you:

• DO select 'Two' in the 'Number of CTA's' field within the 'Sticky jump nav container' dialogue window. Then author each Global CTA separately.
  
• DON'T author the secondary button within the first Global CTA component itself.

Back to top

Text tiles

There are two colour themes available for the 'Text tiles' component - 'Hero' (default) or 'Complimentary A'.

Within each 'Text tiles' component, you should add 3 tiles. Technically you can add more or less than 3 tiles, however if more the fourth tile stacks with incorrect spacing, and if less the tiles span too wide so this isn't reccommended.

Within each tile, you should author 'Main text', 'Sub text' and a URL.

Back to top

Video

The 'Video' component should be authored in a 'Column container' component.

You can add an unlimited number of videos (minimum 1).

Each video item authored must contain a YouTube video ID, description copy and thumbnail image. Optionally you can author one caption which will appear at the bottom of all videos.

If you don't wish for related videos to be shown, append the parameter '?rel=0' to the end of each YouTube video ID.

Back to top

What/Why/How container

There are 3 colour themes available for the 'What/Why/How container' - 'White' (default), 'Grey' or 'Textured'.

2 layout options are available:

• Default layout is vertical alignment, which stacks content vertically, and allows between 2-4 inner features.
  
• Alternative layout option is horizontal aligment, which wraps text to the right of the image/icon, and allows 2-6 inner features.

Within each feature, you can author the following fields:

• Vertical alignment (default) contains fields for 'Title', Title URL, 'Description', 'Dropdown label' and 'Dropdown additional information'.
• Horizontal alignment contains fields for 'Title' and 'Description'.