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

Panels are containers used to group and separate content with a strong intent or action, or to simply communicate important information.

Default panel

The default panel style has an emphasised heading element which adds some brand colour to the interface.

Default panel

They found themselves standing on the very edge of the Wild Wood. Rocks and brambles and tree-roots behind them, confusedly heaped and tangled; in front, a great space of quiet fields, hemmed by lines of hedges black on the snow, and, far ahead, a glint of the familiar old river, while the wintry sun hung red and low on the horizon. The Otter, as knowing all the paths, took charge of the party, and they trailed out on a bee-line for a distant stile. Pausing there a moment and looking back, they saw the whole mass of the Wild Wood, dense, menacing, compact, grimly set in vast white surroundings; simultaneously they turned and made swiftly for home, for firelight and the familiar things it played on, for the voice, sounding cheerily outside their window, of the river that they knew and trusted in all its moods, that never made them afraid with any amazement.
Panel footer

Faint panel

The faint panel style is the more subtle and understated option.

Faint panel

They found themselves standing on the very edge of the Wild Wood. Rocks and brambles and tree-roots behind them, confusedly heaped and tangled; in front, a great space of quiet fields, hemmed by lines of hedges black on the snow, and, far ahead, a glint of the familiar old river, while the wintry sun hung red and low on the horizon. The Otter, as knowing all the paths, took charge of the party, and they trailed out on a bee-line for a distant stile. Pausing there a moment and looking back, they saw the whole mass of the Wild Wood, dense, menacing, compact, grimly set in vast white surroundings; simultaneously they turned and made swiftly for home, for firelight and the familiar things it played on, for the voice, sounding cheerily outside their window, of the river that they knew and trusted in all its moods, that never made them afraid with any amazement.
Panel footer

Panel with table

Use a table within a panel to give it a more prominent header and surround.

Panel with table

NameTypeDate Modified
GamesFile folder6/7/2020
Program FilesFile folder4/7/2021
bootmgrSystem file11/20/2010
log.txtText Document1/18/2016
Footer goes here and should colSpan all columns

User experience

Panels are designed to group content either for visual structure or as a design requirement. They have optional headers and footers which can be used to associate actions with your grouped content.

Visual design

The default panel uses colour in the header to increase visibility and branding. This can be useful in text heavy screens where areas of colour can provide some relief. As the name suggests the faint panel can be used for content that doesn't need to be visually prominent. Like most of the UI components the faint panel is designed to be subtle and unobtrusive so as not to detract from the content.

Dos and don’ts

  • Avoid changing the styles of panels.
  • Avoid using long panel headings especially when designing responsive applications.

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