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>