Panel

Panel component is used on confirmation pages.

When to use

The panel component is a visible container used on confirmation or results pages to highlight important content like transaction-related information and reference number.
In most cases, the panel component is used on confirmation pages, to tell the user they have completed the transaction.
Never use the panel component to highlight important information within body content.

Guidelines

Only use one panel per page, and ideally only one per transaction, on completion.
Use the appropriate panel color to convey information, but do not rely on the color to indicate status.
Provide users with as much information as possible, such as a reference number, or the reason a transaction failed.

Basic

A simple Panel is created with panel-header class along with the content as children using panel-content class.

Application complete

Your reference number
ABC563

<div class="panel-container d-flex justify-content-center" tabindex="0" aria-live="polite">                                  
  <div class="panel-body">
    <div class="panel-header">
      <h1>Application complete</h1>
    </div> 
    <div class="panel-content">
      Your reference number
      <br>
      <strong>ABC563</strong>
    </div>                              
  </div>                                                                       
</div>

Accessibility

If using the RAG status indicators, make sure that the text within the panel identifies what type of panel it is.
Because of its intrusive nature, the role ="alert" must be used sparingly and only in situations where the user's immediate attention is required. Dynamic changes that are less urgent should use a less aggressive method, such as aria-live="polite"
If transaction related things or reference numbers are there, then add tabindex=”0” to that text so it can be easily read by screen readers.

When to use Guidelines Basic Accessibility