The Panel component is a full-width section used to highlight content that sits outside the main content of a page.

The component helps draw attention to supporting information such as a feature, related guidance, or supplementary detail without interrupting the primary page flow.

When to use this component

Use the Panel component when you need to present content that is related to the page but separate from the main body of information. This includes:

• Feature highlights or promotional content
• Supplementary guidance or related links
• Supporting information that benefits from visual separation
• Content that should be noticed but does not require a notification or alert

The purpose of the component is to give content a distinct visual treatment so users can easily distinguish supplementary sections from the main page content.

When not to use this component

Do not use the Panel component for critical warnings, errors, or time-sensitive information.

Use a notification or alert component instead when content requires immediate attention or conveys severity.

Before using this component, consider:

• Whether the content belongs in the main page flow rather than as a separate section
• Whether a notification would better communicate the importance of the message
• Whether the panel content needs a clear heading for context and accessibility
• Whether the amount of content justifies a full-width highlighted section

Example of where we have used this component

This component is used on:

• Tasks
• Microsites
• Action cards

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.