Notifications
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quae commodi, fuga quos quas odio ratione mollitia neque consequuntur? Amet tempora, id beatae quibusdam asperiores facilis dignissimos ratione saepe non.
Default Notification
Use .fluid class for fullwidth notification
Hello
This is a message. A bit longer message lorem eligendi itaque dolore lectus suscipit enim.
Hello
This is a message. A bit longer message lorem eligendi itaque dolore lectus suscipit enim.
Congrats
This is a success message.
Caution
This is a warning message.
Oops
This is an error message.
Here is template code for notification. There're 4 samples of notification types. Just add class name on main notification class. Like .default, .success , .warning , .danger
For example code will be like this : <div class="t-notification fluid active default">
Note : If you want the notification without an icon beside, just remove this element
<div class="t-notification-icon"><span class="t-icon"></span></div>
<div class="t-notification default active fluid t-m-t-24">
<div class="t-notification-content">
<div class="t-notification-icon">
<span class="t-icon"></span>
</div>
<div class="t-notification-body">
<h4 class="t-heading-4 t-m-b-8">
Hello
</h4>
<p class="t-body-text">
This is a message.
</p>
</div>
</div>
</div>
Sticky Notifications
Use .sticky class for sticky notification. Sticky notification have default position behavior on top right of screen. Or use .top-right for top right position, .top-left for top left position, .bottom-right for bottom right position, .bottom-left for bottom left position.
Hello
This is a message. A bit longer message lorem eligendi itaque dolore lectus suscipit enim.
Hello
This is a message. A bit longer message lorem eligendi itaque dolore lectus suscipit enim.
Congrats
This is a success message.
Caution
This is a warning message.
Oops
This is an error message.
Here is template code for notification. There're 4 samples of notification types. Just add class name on main notification class. Like .default, .success , .warning , .danger
For example code will be like this : <div class="t-notification fluid active default">
<div class="t-notification active default">
<div class="t-notification-content">
<div class="t-notification-icon">
<span class="t-icon"></span>
</div>
<div class="t-notification-body">
<h4 class="t-heading-4 t-m-b-8">
Hello
</h4>
<p class="t-body-text">
This is a message.
</p>
</div>
<div class="t-notification-close">
<button class="t-btn t-btn-transparent">
<span class="t-icon icon-close"></span>
</button>
</div>
</div>
</div>