Alerts
News alerts
Alerts are built using .ui-card
module but adding a .card-alert
class
modifier in combination of some utilities classes .bg-*
and .text-*
for
customization.
NEWS: New Coded Bonus available.
NEWS: New Coded Bonus available.
Use data-card-close
attribute on any element to trigger the
remove action of the alert.
Info alerts
INFO: You have 10 notifications messages.
INFO: You have 10 notifications messages.
Success alerts
SUCCESS: New User has been registered successfully.
SUCCESS: New User has been registered successfully.
Warning alerts
WARNING: Your balance is very low.
WARNING: Your balance is very low.
Error alerts
ERROR: Your username and password don't match.
ERROR: Your username and password don't match.
Auto Fadeout Alerts
Using .fadeout
class in an alert card will trigger auto fadeout
effect.
Refresh this page to
see this effect again.
FADEOUT: This message will fadeout after 3 seconds.