The panel component is a visible container used on confirmation pages to highlight important content.

When to use this component

Use the panel component to display important information when a transaction has been completed.

When not to use this component

Never use the panel more than once on a single page.

Standard panel

Formatted example

Please confirm your email address

We have sent you an email to test@example.com.

Please open the email and follow the instructions to confirm your registration.

HTML code
<div class="panel">
    <h1>Please confirm your email address</h1>
    <p>We have sent you an email to <strong>test@example.com</strong>.</p>
    <p>Please open the email and follow the instructions to confirm your registration.</p>
</div>

Confirmation panel

Formatted example

You have joined our mailing list

Thanks! We'll be in touch.

HTML code
<div class="panel panel--confirmation">
    <h1>You have joined our mailing list</h1>
    <p>Thanks! We'll be in touch.</p>
</div>