Alerts

Alerts provide feedback to the user in a more stylised manner than a body copy. The use colours and iconography to draw the users attention to messaging and supporting call to actions

Installation

Coming soon..

Alert - Examples


                                                        
                                                        
                                                            <co-alert variant="information" title="Alert Title">
                                                            <p slot="content">
                                                                Write a concise summary that will assist the user with their
                                                                journey.
                                                            </p>
                                                        </co-alert>

Alert - info variant


                                                        
                                                        
                                                            <co-alert variant="success" title="Alert Title" showClose>
                                                            <p slot="content">
                                                                Write a concise summary that will assist the user with theirjourney.
                                                            </p>
                                                        </co-alert>

Alert - closable


                                                        
                                                        
                                                            <co-alert variant="information" title="Alert Title">
                                                            <p slot="content">
                                                                Write a concise summary that will assist the user with theirjourney.
                                                            </p>
                                                            <footer slot="footer">
                                                                <div class="co-button-group-pair">
                                                                    <co-button variant="primary">Primary</co-button>
                                                                    <co-button variant="secondary">Secondary</co-button>
                                                                </div>
                                                            </footer>
                                                        </co-alert>

Alert - with footer


                                                        
                                                        
                                                            <co-alert variant="information" title="Alert Title">
                                                            <p slot="content">
                                                                Text length can vary in the alert boxes and we want the area used to
                                                                max out at our agreed character length per line. With a body size of
                                                                16px this is roughly 648px.
                                                            </p>
                                                        </co-alert>

Alert - with more content

Alert Slim - Examples


                                                        
                                                        
                                                            <co-alert-slim variant="information">
                                                            <span slot="content">
                                                                A concise summary here
                                                            </span>
                                                        </co-alert-slim>

Alert slim - info variant

Properties

Property	Type	Description	Usage
variant	String	Determine variant or type of alert	variant = "information"\| "success"\| "danger" \| "warning"
title	String	Determine alert’s title	title="Alert Title"
showClose	Boolean	Determine whether to display close icon or not	showClose = true \| false

Dependencies

This component automatically imports the following dependencies.


                                                        
                                                        
                                                            <co-icon></co-icon>
                                                        <co-icon-button></co-icon-button>