This is the repository in which we develop each element of the GUI.
Each module is tested in isolation and can be seen below.
For contribution, bugs or questions please go to the GitHub repo.
Sandbox
Categories
Modules
_core
Colors Core colour system used in the digital brand.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v3.0.0
-
v3.0.1
-
v3.0.2
-
v3.0.3
-
v3.0.4
-
v3.0.5
Fonts Brand and body fonts with the font stack.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
-
v2.0.6
-
v2.0.7
Grid 12 column, responsive grid system.
Javascript Helpers JavaScript framework, with debugging, throttling and debouncing.
Text Styling Core HTML text elements.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v2.0.0
-
v2.0.1
-
v3.0.0
-
v4.0.0
-
v4.0.1
-
v4.0.2
-
v4.0.3
-
v4.0.4
-
v4.0.5
-
v4.0.6
-
v4.0.7
Typography
Text Extensions Classes for additional text formatting.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
Layout
Responsive Margins Classes for vertical spacing between elements.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
Responsive Toggles Classes to hide and show elements based on break point and print style.
Helpers
Accessibility Helpers Classes for 'skip links' and 'screen-reader only' text etc.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
Alerts
Alerts Contextual messaging panels and text - alerts, errors, info etc.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v1.0.4
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v3.0.0
-
v4.0.0
-
v4.0.1
-
v4.0.2
-
v4.0.3
Other stuff
Badges Styled element to highlight a number.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
Labels Styled element to highlight a word.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
-
v2.0.6
-
v2.0.7
Progress Bars Visual representation of progress
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
Navigation
Breadcrumbs Styled navigational links used to indicate a user journey or path.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
Paginations Styled links to navigate within a set of related views.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
Buttons All buttons including button groups, dropdown-buttons etc.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v2.0.0
-
v2.0.1
-
v3.0.0
-
v3.0.1
-
v3.0.2
-
v3.0.3
-
v4.0.0
-
v4.0.1
-
v4.0.2
-
v4.0.3
-
v4.0.4
-
v4.0.5
Deprecated
Checkboxes Styled checkboxes with SVG enhancements.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v1.0.4
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
Footers Global footer panels.
Headers Global header panels.
Icons-Base Classes to manage icon size and embedding.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
Icons-Group 1
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
Icons-Group 2
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v3.0.0
-
v3.0.1
-
v3.0.2
Icons-Group 3
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 4
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 5
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 6
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 7
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 8
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 9
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v1.0.4
-
v2.0.0
-
v2.0.1
Icons-Group 10
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 11
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 12
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v2.0.0
-
v2.0.1
Icons-Group 13
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 14
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 15
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
Icons-Group 16
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
-
v2.0.2
Icons-Group 17
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
Input-Addons Styled input fields with attached selects or buttons.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
Radios Styled radio buttons with SVG enhancements.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v1.0.4
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
Form Base General form styling; providing form structure, layout and grouped input styling
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v1.0.4
Form Checks Styled checkboxes and radios
Input Fields Styled input fields including, text, email, date, textarea and selects etc.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.0.3
-
v2.0.0
-
v2.0.1
-
v3.0.0
-
v3.0.1
-
v3.0.2
Input Groups Styled input fields with attached attributes ie $ or %.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v3.0.0
-
v3.0.1
-
v3.0.2
-
v3.0.3
Switches Switch buttons for on/off, yes/no settings.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v3.0.0
-
v3.0.1
-
v3.0.2
-
v3.0.3
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.
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’.
Templates Global page templates.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
Icons
Icons A collection of hand-crafted AA accessibile SVG icons with PNG fallbacks, designed to aid navigation and legibility.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
Media
Images Classes to style image boxes.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
Responsive Embeds Classes to embed responsive video content.
Lists
List Groups Complex lists with custom content.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v3.0.0
-
v3.0.1
Lists Styled bullet lists in various colours.
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v3.0.0
-
v3.0.1
-
v3.0.2
Logos
Logos Westpac Group brand, SVG logos.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
-
v2.0.6
-
v2.0.7
-
v2.0.8
-
v2.0.9
-
v2.0.10
Popovers
Modals Popup modals in various sizes with JavaScript API.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v3.0.0
-
v4.0.0
-
v4.0.1
Popovers Small overlay elements with simple text and links.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.1.0
-
v2.1.1
Tooltips Little black boxes for simple messaging.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
Containers
Panels Containers with headers and optional footers for grouping elements and text.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
Tabcordions Tabs, accordions and a tab set that changes to an accordion based on break point.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v3.0.0
-
v4.0.0
-
v4.1.0
-
v4.1.1
-
v4.1.2
-
v4.1.3
-
v4.1.4
-
v4.1.5
-
v4.1.6
Wells Similar to panels, without the header or footer.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
Symbols
Symbols Multi-colour, SVG symbols.
-
v1.0.0
-
v1.0.1
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
-
v3.0.0
-
v3.0.1
-
v3.0.2
Tables
Tables Responsive tables, including various styling options.
-
v1.0.0
-
v2.0.0
-
v2.0.1
-
v2.0.2
-
v2.0.3
-
v2.0.4
-
v2.0.5
_testing
test-module Test module to see multiple versions
-
v1.0.0
-
v1.0.1
-
v1.0.2
-
v1.1.0
test-module2 Another test module
-
v1.0.0
-
v1.2.0
-
v4.0.0
-
v5.6.0
-
v10.15.56
