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.
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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.
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
- Numbered point
Sub text
Main text
Supporting text (optional)
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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.
![](/content/dam/stg/images/Personal/solutions/stg-misc_TaxTime_33_230x230.jpg)
![](/content/dam/stg/images/Personal/solutions/stg-misc_TaxTime_2112_230x230.jpg)
![](/content/dam/stg/images/Personal/solutions/stg-misc_TaxTime_26_230x230.jpg)
![](/content/dam/stg/images/Personal/solutions/stg-misc_TaxTime_77_230x230.jpg)
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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.
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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)
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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.
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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
![](/content/dam/stg/images/other/placeholder-images/stg-sp_placeholder_535x175.jpg)
Title (optional)
This is a 'Service Pod' description (optional)
Title (optional)
This is a 'Service Pod' description (optional)
![](/content/dam/stg/images/other/placeholder-images/stg-sp_placeholder_535x175_1.jpg)
Title (optional)
This is a 'Service Pod' description (optional)
![](/content/dam/stg/images/other/placeholder-images/stg-sp_placeholder_535x175.jpg)
Title (optional)
This is a 'Service Pod' description (optional)
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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.
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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.
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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
![](/content/dam/public/wbc/other/locateus/assets/img/icon-info.png)
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)
![default](/content/dam/bom/images/other/placeholder-images/bom-nr_placeholder2_580x541.jpg)
Panel Heading (optional)
Headline (optional)
Sub heading (optional)
![default](/content/dam/bom/images/other/placeholder-images/bom-nr_placeholder2_580x541.jpg)
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)