Skip to content
Copyright © 2023 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.

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 else can I find this?