The Blender · Bank of Melbourne 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-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

Templates

Form-Pods Includes a heading, content area, footer and controls. The Form-Pod is designed to work inside a Template. When building a form each page should include one Form-Pod containing form components. view

Add version Add the Form-Pods module
Progress-Ropes A detailed visual indication of progress. Use to indicate how far along the user is in a journey. Progress-Ropes plays nicely with ‘Template with sidebar’. view

Add version Add the Progress-Ropes module
Templates Global page templates. view

Add version Add the Templates module

Icons

Icons A collection of hand-crafted AA accessibile SVG icons with PNG fallbacks, designed to aid navigation and legibility. view

Add version Add the Icons 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

Logos

Logos Westpac Group brand, SVG logos. view

Add version Add the Logos 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

Symbols

Symbols Multi-colour, SVG symbols. view

Add version Add the Symbols module

Tables

Tables Responsive tables, including various styling options. view

Add version Add the Tables module

Include jQuery in your blend? No Yes
Include unminified JavaScript in your blend? No Yes
Include the LESS files in your blend? No Yes
Include the SVG files in your blend? No Yes

Web fonts – Due to licensing restrictions we are unable to publicly distribute web fonts. For those who work at Westpac we provide an internal link to the font files required by your particular blend; simply follow the download link in your blend’s index page. Make sure you install the files into the assets/font/ folder of your blend.