Panel
A visible container used on confirmation or results pages to emphasize important content, ensuring key information stands out clearly for users. Usually placed on the first section of the page.
The Panel component offers flexible properties, but to simplify implementation, this serves as the base component to begin with.
- Panel title is a clear, concise heading that summarizes the panel's content, helping users quickly understand its purpose and importance.
- Placeholder (Body/M/400).
- Detail (Body/XL/600).
Colour
- Blue (Informational)
- Green (Success)
- Yellow (Warning)
- Red (Danger)
Usage example
Informational Blue
The blue panel is used to display informational messages when a process is in progress but not yet completed. It helps users understand the current status of their application or action, providing updates without indicating success or failure. Common use cases include submissions being processed or applications under review.
- Provide useful information related to this status such as “Date submitted”
Success Green
The green panel indicates that a process is complete and successful. It confirms to the user that their application, payment, or task has been finalized with positive results. This panel is typically used at the end of a workflow/forms to show that no further action is needed.
- Use the “check-circle” icon where necessary, especially to indicate that the process is complete.
- Provide a reference number or information that the user can retain for future use.
- Use larger “Body/5XL/600” to emphasis numbers.
- Include a QR code, barcode, or any image that users can use as proof of completing the process.
Warning Yellow
The yellow panel is used to bring attention to situations that require user input or where something is in process. It’s typically employed when an application or process is incomplete, under review, or approaching a deadline. The panel helps guide the user toward next steps, alerting them to the status of their request or form, while still indicating that resolution is possible with action.
- When displaying a warning status, include the estimated response time, next steps to take, expected resolution, and any payment amount required, so users know what to expect next.
Danger Red
The red panel signals that a process has failed or been rejected. It is used to notify the user of errors, rejected applications, overdue payments, or failed actions. This panel provides clear feedback on what went wrong, along with guidance on potential next steps if applicable.
- When displaying a negative status, include the reason for rejection and the error code so users understand what caused the error or rejection.