Panel

Panel Component

Contributed by Yitong He

The panel component is a visible container used on confirmation or results pages to highlight important content.(GOV.UK Design System (opens in a new tab))

Success Panel

Code Usage

Fail Panel

Code Usage

Usability

When to use this component
  • Use the panel component to display important information when a transaction has been completed.
  • In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction of failed with the transaction.
    (GOV.UK Design System (opens in a new tab))
When not to use this component

Never use the panel component to highlight important information within body content. (GOV.UK Design System (opens in a new tab))

Keep the panel text brief

The panel text is only meant for a high-level explanation of what has happened. Short words and phrases can highlighted information is easy to read at different screen sizes. For example, 'Application complete'.

If you need to give detailed information, or more context, use the description text under the heading text.
(GOV.UK Design System (opens in a new tab))

Accessibility

Writing appropriate markup for panel

If the panel doesn't contain an accurate WAI-ARIA role or property, the screen reader software won't recognize the purpose of the message — and neither will the user.
Thus, a ARIA role is needed for the accessibility of panel. role="alert"should be used in this case for important information that needs to be presented to the user immediately. (Bureau of Internet Accessibility (opens in a new tab))

Version

VersionEditorAuthorDateDescription
v1.0Yitong He(Vivian)Yitong He(Vivian)2023.9.19Initial version