-
-
Notifications
You must be signed in to change notification settings - Fork 0
Alerts
Enio edited this page Dec 3, 2024
·
1 revision
Atomix lets you create alerts. Useful for displaying important messages. They can be used, for example, to display a disconnection message.
To create an alert, use the alert class. This gives:
<div class="alert">
I am an alert!
</div>To add an icon, use this:
<div class="alert">
<i class="ri-information-line icon"></i>
<p class="content">A simple alert with icon</p>
</div>You can replace the Fontawesome icon with an image. Make sur to add the
iconclass.
There are 7 different colors:
- Primary: no class
-
Success:
success -
Danger:
danger -
Warning :
warning -
Information:
info -
Light:
light -
Dark:
dark
If you don't want automatic closing. You can use a JavaScript script to close the alert if necessary.
<div class="alert close" onclick="this.style.display = 'none';" title="Click to dismiss">
<img src="../assets/images/logo.png" alt="Icon" class="icon">
<p class="content">A simple alert with icon and close <br>Click to close</p>
</div>The height of the alert adapts to the height of its contents. If the text is longer than the icon, the icon will be centered vertically, and vice versa.
To use line breaks, you can use <br> (although this is bad practice).