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.