Skip to main content Skip to main navigation Skip to accessibility page Skip to search input

Why can't I access this password-protected site?

We're sorry but the user name or password you entered was incorrect. This means we couldn't authorize access so please check your details and try again.

If you still have problems logging in, refresh (CTRL + F5) your browser or contact us

Why can't I access this password-protected site?

We're sorry but the user name or password you entered was incorrect. This means we couldn't authorize access so please check your details and try again.

If you still have problems logging in, refresh (CTRL + F5) your browser or contact us

Why can't I access this password-protected site?

We're sorry but the user name or password you entered was incorrect. This means we couldn't authorize access so please check your details and try again.

If you still have problems logging in, refresh (CTRL + F5) your browser or contact us

Important note

Due to a current bug within the SBG Touch UI Password Protected Template only, some Touch UI components are missing their vertical padding or margins.

This does not impact components within the SBG Touch UI General Template.

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.

12 Column layout

12 column should not be used for 'Copy' (max width of 'Copy' should be 70% of the page else content gets difficult to read).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

6-6 Column layout

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

4-4-4 Column layout

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

3-3-3-3 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

4-8 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

8-4 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

3-9 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

3-6-3 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

2-8-2 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

1-10-1 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

8-1-3 Column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor. Maecenas quis porttitor mi, ut dignissim nisi. Nam elementum libero vitae massa mattis facilisis. Vivamus imperdiet, lorem ut congue luctus, magna enim sodales sapien, eget ultrices velit leo in magna. Pellentesque accumsan, mauris faucibus faucibus blandit, arcu nibh sagittis odio, aliquam tempor justo ante lobortis sem.

Back to top


Copy

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

Heading text 1

Heading text 2

Heading text 3

Heading text 4

Heading text 5

Paragraph text, bold, italic, underline, superscript, subscript.

This is a 'Body Copy' component.

  • Bullet point
  1. Numbered point

Text link

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.

Sub text

Main text

Supporting text (optional)

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus et elit vel tempor.

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.

Heading (optional)

Heading (optional)

  • This is a list item example
  • This is a list item example with hyperlink

Heading (optional)

  • This is a list item example
  • This is a list item example with hyperlink

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.

Offers heading (optional)


0.00 % P.A.

Byline 1 (optional)
Byline 2 (optional)
Byline 3 (optional)

Description (optional)

$0

Byline 1 (optional)
Byline 2 (optional)
Byline 3 (optional)

Description (optional)

Text

Byline 1 (optional)
Byline 2 (optional)
Byline 3 (optional)

Description (optional)

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.

Heading A

  • Text Description of Fees Charges List item
  • Text Description of Fees Charges List item

Heading B

  • Text Description of Fees Charges List item
  • Text Description of Fees Charges List item

Heading C (list items split)

  • Text Description of Fees Charges List item
  • Text Description of Fees Charges List item

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

Title (optional)

This is a 'Service Pod' description (optional)

Title (optional)

This is a 'Service Pod' description (optional)

Title (optional)

This is a 'Service Pod' description (optional)

Title (optional)

This is a 'Service Pod' description (optional)

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.

Westpac helicoptor

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

Panel Heading (optional)

Headline (optional)

Sub heading (optional)

Description (optional)
default
Title (optional)
This is a 'What/Why/How feature' description (optional)
Icon (optional)
This is a 'What/Why/How feature' description (optional)
Title (optional)
This is a 'What/Why/How feature' description (optional)

Panel Heading (optional)

Headline (optional)

Sub heading (optional)

Description (optional)
default
Title (optional)
This is a 'What/Why/How feature' description (optional)
Title (optional)
This is a 'What/Why/How feature' description (optional)
Title (optional)
This is a 'What/Why/How feature' description (optional)

Headline (optional)

Title (optional)

This is a 'What/Why/How feature' description (optional)

Title (optional)

This is a 'What/Why/How feature' description (optional)

Title (optional)

This is a 'What/Why/How feature' description (optional)