Notification banner

A highlight block that shows the user important information after they have completed a task, such as a success message.

About this component

The notification panel component presents important content when a task completes. Use it on confirmation pages to tell users, both:

• that they have completed the thing they wanted to do
• the outcome such as a success message

A notification panel contains a heading and an optional supporting description.

When using a notification panel, you must:

• place it at the top of the main content, either as the page’s main heading or immediately after it
• only use one notification panel per page

Notification panel titles should be a short high-level explanation of what has happened. If you can, use shorter words to limit text wrapping on small devices.

You should not include buttons or links in a notification panel’s content.

When to use this component

Use this component to tell users when they complete a task they started, such as submitting a form.

When not to use this component

Avoid using a notification panel if a page still has further actions a user can take. For example, when further form fields remain on the page after submitting changes.

Why we use this component

Using a visually contrasting area for important content will help users find it.

Related components

• Inset text
• Notification banner
• Warning text

                                
                                    

                                        <div class="notification--panel notification--panel-success">
                                            <h2 class="notification--panel-title"> Thank you </h2>
                                            <div class="notification--panel-content">
                                                <p>
                                                    Your Floodline account has been successfully created.
                                                </p>
                                            </div> 
                                        </div>
                                    
 
                                
                            

                                
                                    

                                        /* Notification panel
                                        ------------------------------------ */
                                        .notification--panel {
                                            margin-bottom: 1.5rem;
                                            padding: 2.5rem 1.5rem;
                                            background: var(--grey-three);
                                            text-align: center;
                                        }
                                        .notification--panel-success {
                                            background: var(--success-green);
                                            color: #ffffff;
                                        }
                                        h2.notification--panel-title {
                                            margin-bottom: 1rem;
                                            font-weight: 700;
                                            font-size: 2.75rem;
                                            color: #ffffff;
                                        }
                                        .notification--panel-content>:last-child {
                                            margin-bottom: 0;
                                        }