Skip to content
Copyright © 2024 by Westpac Banking Corporation. All rights reserved.

Wells are containers with simple text. They are designed to house content without interfering with the primary content on a page.

Well

Choose the colour of your well and the background it appears on to help your content either stand out or recede. Contrasting colours will always make an impact.

It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace, and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks, and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a heavy knock sounded at the door.
It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace, and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks, and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a heavy knock sounded at the door.

User experience

Wells are used to group and separate content, they are a consciously simple component, with the purpose of showcasing the content they contain. They're often used for secondary legal information e.g. terms and conditions, things you should know etc.

If you need to associate an action with the content in your well then you could try using a panel component, which includes an optional header and/or footer, for this purpose.

Visual design

Wells have been designed to use responsive padding. As the viewport increases so too does the padding. This reduces long line widths and creates a more considered layout across all viewports.

A simple approach to make content stand out is to contrast the colour of your well with the background colour of the page. A white well on background colour, or vice versa, will highlight your content in a subtle yet effective way.

Where is this available?

The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.

PlatformStatus
GEL Design System
Copyright © 2023 by Westpac Banking Corporation. All rights reserved.Available
Mesh UI
Copyright © 2023 by Westpac Banking Corporation. All rights reserved.Available
Legacy WDP
Copyright © 2023 by Westpac Banking Corporation. All rights reserved.Available