Tornado Logo

Alerts - Tornado UI v2

Tornado Provide a Predesigned Standard Form Controls With Support for Multiple Themes Style and Many Other Useful Features.

Sass Customize

in order to edit the Alerts you can use the css classes to overide the theme or you can edit it with sass Tornado Folder/SCSS/forms/_alerts.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Baisc Alert

in order to use the alerts boxes simply create an html element and give it class name alert and inside of it you can write your alert message and for make it dismissal you can add an hyper-link element and name it remove-item see the example below

Default Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<div class="alert">
    <b>Default Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
    <a href="#" class="ti-close remove-item"></a>
</div>

Colored Alerts

for coloring alert boxes you can use the class sucess,danger,info,dark,warning.

Success Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Danger Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Warning Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Info Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
Dark Alert : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
<div class="alert success">
    <b>Success Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
    <a href="#" class="ti-close remove-item"></a>
</div>

<div class="alert danger">
    <b>Danger Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
    <a href="#" class="ti-close remove-item"></a>
</div>

<div class="alert warning">
    <b>Warning Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
    <a href="#" class="ti-close remove-item"></a>
</div>

<div class="alert info">
    <b>Info Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
    <a href="#" class="ti-close remove-item"></a>
</div>

<div class="alert dark">
    <b>Dark Alert</b> : Message Goes Here to appear in front of the user to tell him some thing important as alert box.
    <a href="#" class="ti-close remove-item"></a>
</div>

Utilities

Class Name Element Description
alert alert box Main Class for The Alert Box
remove-item button element Dismissal Alert Button
success alert box Coloring Alert with The Success Theme Color.
danger alert box Coloring Alert with The Danger Theme Color.
warning alert box Coloring Alert with The Warning Theme Color.
info alert box Coloring Alert with The Info Theme Color.
dark alert box Coloring Alert with The Dark Theme Color.

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.