Page-Alert Component

Description

Page-Alert Component provides an alert box that will always be added as the first child in the body so that it appears above all other content. Alerts can stack as shown above.

Demo

See Above.

Available attributes:

data-alertSeverity - options include: 'info', 'danger', 'warning', 'success'
data-alertHeading - specify the title to appear in the alert box
data-alertInfo - specify alert information that should follow the title
data-alertLink - specify URL to be used for button (OPTIONAL)

Excluded attributes will default to the following:

data-alertSeverity - 'info'
data-alertHeading - 'Alert Heading'
data-alertInfo - 'Alert information should go here.'

HTML


    <page-alert 

        data-alertSeverity="info" 

        data-alertHeading='This is an Information alert' 

        data-alertInfo ="This alert has an associated link button"

        data-alertLink="https://www.google.com">

    </page-alert>


    <script src="pageAlert.min.js"></script>

Page-Alert Component

Description

Demo

Available attributes:

Excluded attributes will default to the following:

HTML

Javascript