npm

@westpac/bom

BOM brand component for the Westpac GEL Design System

@westpac/bsa

BSA brand component for the Westpac GEL Design System

@westpac/btfg

BTFG brand component for the Westpac GEL Design System

@westpac/stg

STG brand component for the Westpac GEL Design System

@westpac/wbc

WBC brand component for the Westpac GEL Design System

@westpac/wbg

WBG brand component for the Westpac GEL Design System

@westpac/core

Global functionality and settings essential to the framework

@westpac/grid

Mobile-first grid framework used to build responsive layouts using the common 12-column system

@westpac/hooks

Hooks for the Westpac GEL Design System

@westpac/icon

Small symbolic illustrations used for navigation and context, implemented as SVGs

@westpac/tabcordion

Tablists and accordions used to group and dynamically show/hide content, includes a responsive ‘tabcordion’ mode

@westpac/alert

Alert boxes and Alert text, used as a consistent message system for common user interactions

@westpac/a11y

Accessibility components used to ensure an optimal experience for users of assistive technologies

@westpac/body

Styling for areas of text content including typography elements such as headings, paragraphs, links, strong, emphasis etc.

@westpac/input-group

Text inputs with add-on elements placed before or after, used to provide additional context or functionality

@westpac/badge

Small, coloured UI items used to highlight a number count

@westpac/breadcrumb

Styled navigational links used to indicate the user’s location within a website application

@westpac/progress-bar

Simple indicator used to display the progress status for a task that may take a long time or consist of several steps

@westpac/button-dropdown

Highly configurable popup panels triggered by a button, containing text, switches, radios, checkboxes, links and more

@westpac/popover

Small content popup panels triggered by a button, containing contextual supporting information

@westpac/label

Small, coloured UI items used to highlight a word

@westpac/button

Styling for button controls used for actions in forms and modals, with support for multiple sizes, styles, states and more

@westpac/button-group

Button toggles grouped together on a single line, used to capture simple responses, powered by radio elements

@westpac/list-group

List-group components for the Westpac GEL Design System

@westpac/form

Form components for the Westpac GEL Design System