Panel

The panel is a prominent confirmation container that appears at the end of a completed service or transaction.

It provides clear visual confirmation that users have successfully finished a task and communicates what happens next.

Use panels exclusively for end-of-service confirmations when users have completed their entire journey.

Use panels when users have:

• successfully completed an entire service or transaction
• submitted final forms or applications that don’t require further action
• finished registration processes
• completed bookings
• updated account information

Don’t use panels for mid-journey confirmations or when other components work better.

Use notification banner instead when:

• users have completed an action but still have tasks remaining in their journey
• you’re confirming form submissions that are part of a longer process
• users need to take additional steps to complete their service

Use inset text instead when:

• information is important but doesn’t confirm completion
• content provides context rather than confirmation

Avoid panels when:

• users haven’t completed their full journey
• you’re providing general information or guidance
• content includes interactive elements like buttons or links

Structure panel content to clearly confirm completion and guide users on next steps.

Panel heading

Write clear, specific confirmation messages that focus on what users have accomplished:

• use heading level 2 (H2) for the panel title
• keep headings short to prevent text wrapping on mobile devices
• focus on what users have done rather than thanking them
• use specific language: “Application complete” rather than “Thank you”

Common heading patterns

Choose headings that clearly communicate completion:

• ‘Application complete’ – for application submissions
• ‘Registration complete’ – after full registration including email confirmation
• ‘Your [item] has been [action]’ – for updates like ‘Your password has been changed’
• ‘Booking confirmed’ – for successful bookings or appointments

Panel body

Provide essential next-step information using paragraph text:

• include reference numbers when provided: “Your reference number is [number]”
• confirm email communications: “A copy of your answers has been sent to [email address]”
• explain what happens next: “You should receive a reply within 10 working days”
• reassure when no action needed: “You don’t need to do anything else right now”

Additional content

Include relevant follow-up information below the panel, under the heading ‘What happens next’:

• provide contact details for support or questions
• link to related guidance or next steps
• include confirmed details like event information
• offer copies of submitted information where helpful