The Blender || WBC GUI

Choose which HTML, CSS (or LESS) and JavaScript files to compile then blend your own flavour of the GUI. To minimise the code bloat, your GUI download will only contain the assets that you add to the Blender.

Colours

Colors Core colour system used in the digital brand. view This core module is always added.

Add version

Add the Colors module

Typography

Fonts Brand and body fonts with the font stack. view This core module is always added.

Add version

Add the Fonts module
Text Styling Core HTML text elements. view This core module is always added.

Add version

Add the Text Styling module
Text Extensions Classes for additional text formatting. view

Add version

Add the Text Extensions module

Layout

Grid 12 column, responsive grid system. view This core module is always added.

Add version

Add the Grid module
Responsive-Margins Classes for vertical spacing between elements. view

Add version

Add the Responsive-Margins module
Responsive-Toggles Classes to hide and show elements based on break point and print style. view

Add version

Add the Responsive-Toggles module

Helpers

Javascript Helpers JavaScript framework, with debugging, throttling and debouncing. view This core module is always added.

Add version

Add the Javascript Helpers module
Accessibility Helpers Classes for 'skip links' and 'screen-reader only' text etc. view

Add version

Add the Accessibility Helpers module

Alerts

Alerts Contextual messaging panels and text - alerts, errors, info etc. view

Add version

Add the Alerts module

Other stuff

Badges Styled element to highlight a number. view

Add version

Add the Badges module
Labels Styled element to highlight a word. view

Add version

Add the Labels module
Progress-Bars Visual representation of progress view

Add version

Add the Progress-Bars module

Navigation

Breadcrumbs Styled navigational links used to indicate a user journey or path. view

Add version

Add the Breadcrumbs module
Paginations Styled links to navigate within a set of related views. view

Add version

Add the Paginations module

Buttons

Buttons All buttons including button groups, dropdown-buttons etc. view

Add version

Add the Buttons module

Forms

Checkboxes Styled checkboxes with SVG enhancements. view

Add version

Add the Checkboxes module
Input-Addons Styled input fields with attached selects or buttons. view

Add version

Add the Input-Addons module
Input-Fields Styled input fields including, text, email, date, textarea and selects etc. view

Add version

Add the Input-Fields module
Input-Groups Styled input fields with attached attributes ie $ or %. view

Add version

Add the Input-Groups module
Radios Styled radio buttons with SVG enhancements. view

Add version

Add the Radios module
Switches Switch buttons for on/off, yes/no settings. view

Add version

Add the Switches module

Media

Images Classes to style image boxes. view

Add version

Add the Images module
Responsive-Embeds Classes to embed responsive video content. view

Add version

Add the Responsive-Embeds module

Lists

List-Groups Complex lists with custom content. view

Add version

Add the List-Groups module
Lists Styled bullet lists in various colours. view

Add version

Add the Lists module

Symbols

Logos Westpac Group brand, SVG logos. view

Add version

Add the Logos module
Symbols Multi-colour, SVG symbols. view

Add version

Add the Symbols module

Popovers

Modals Popup modals in various sizes with JavaScript API. view

Add version

Add the Modals module
Popovers Small overlay elements with simple text and links. view

Add version

Add the Popovers module
Tooltips Little black boxes for simple messaging. view

Add version

Add the Tooltips module

Containers

Panels Containers with headers and optional footers for grouping elements and text. view

Add version

Add the Panels module
Tabcordions Tabs, accordions and a tab set that changes to an accordion based on break point. view

Add version

Add the Tabcordions module
Wells Similar to panels, without the header or footer. view

Add version

Add the Wells module

Tables

Tables Responsive tables, including various styling options. view

Add version

Add the Tables module

Include jQuery in your blend?

Include jQuery? No Yes
Include unminified JavaScript in your blend?

Include unminified JS? No Yes
Include the LESS files in your blend?

Include Less? No Yes
Include the SVG files in your blend?

Include SVG? No Yes

Web fonts The license agreements for web fonts don’t allow us to distribute them in the blender. However, for those who work at Westpac we provide an internal link to the web font package for each blend within our internal network. Please click the link supplied in the index page of the blend zip and download the webfont from there. Make sure you install the files into the assets/font/ folder of your blend.