Panel

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.

<div class="asp-panel">
  <div class="asp-container">
    <div class="asp-grid">
      <div class="asp-grid__item asp-grid__item--large-three-quarters asp-grid__item--extra-large-two-thirds">
        <h2>Panel title</h2>
      <p>Panel content (html).</p>
      <p>With additional line.</p>
      </div>
    </div>
  </div>
</div>

{% from "components/panel/macro.njk" import aspPanel %}

{{ aspPanel({
  content: {
    html: "<h2>Panel title</h2>\n<p>Panel content (html).</p>\n<p>With additional line.</p>\n"
  }
}) }}

{% from "components/panel/macro.njk" import aspPanel %}

{{ aspPanel({
  content: {
    html: "<h2>Panel title</h2>\n<p>Panel content (html).</p>\n<p>With additional line.</p>\n"
  }
}) }}

<div class="asp-panel">
  <div class="asp-container">
    <div class="asp-grid">
      <div class="asp-grid__item asp-grid__item--large-three-quarters asp-grid__item--extra-large-two-thirds">
        <p>Panel content (text only).</p>
      </div>
    </div>
  </div>
</div>

{% from "components/panel/macro.njk" import aspPanel %}

{{ aspPanel({
  content: {
    text: "Panel content (text only)."
  }
}) }}

{% from "components/panel/macro.njk" import aspPanel %}

{{ aspPanel({
  content: {
    text: "Panel content (text only)."
  }
}) }}

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.

Published 15 June 2026
Last updated 16 June 2026