Information notification

Guidelines coming soon.

Examples

Example

One more step to do

We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you. Read our latest updates

HTML

                                    
<div class="coop-c-notification coop-c-notification--alert" role="alert">
    <h3 class="coop-c-notification__heading">Coronavirus</h3>
    <p class="coop-c-notification__p">
        <a href="" class="coop-c-notification__link">Read our advice and latest updates</a>
    </p>
</div>
                                    
<div class="coop-c-notification coop-c-notification--success" role="status">
    <h3 class="coop-c-notification__heading">One more step to do</h3>
    <p class="coop-c-notification__p">
        We need to confirm your email address.  To complete the subscription process, please click the link in the email we just sent you.
        <a href="" class="coop-c-notification__link">Read our latest updates</a>
    </p>
</div>
                                    
<div class="coop-c-notification coop-c-notification--error" role="alert">
    <h3 class="coop-c-notification__heading">Error</h3>
    <p class="coop-c-notification__p">
        There is an error here. <a href="" class="coop-c-notification__link">Read our advice and latest updates</a>
    </p>
</div>
                                    

Design and content

Documentation coming soon.

Accessibility

Documentation coming soon.

Related components

Alert notification