SimpleCSS
  • ☀️Light
  • 🌙Dark
  • 💻System
Download

🔔 Alert

💠 Examples

💻 HTML Code

Alert success

Lorem ipsum dolor sit amet.

Some footer if you need it

🧩 How to use

Add data-js="alert" to the alert. To let users close it manually, include a button with the .close class inside the alert. The script removes the alert automatically on button click or when its animation ends.

🎨 Colors

Apply a color by adding .alert-{color} to the alert. Each variant changes the background, border, and text according to the selected color.

📍 Positioning

Wrap alerts in an .alert-container. If no position class is added to the container, alerts use .top and .center by default.

.top
.bottom
.left
.center
.right

📌 Accessibility

For accessibility, give the alert a suitable role like role="status" and use aria-live="polite" so screen readers announce it when it appears.

📌 Close button

To let users manually dismiss an alert before the animation ends, add a button with the .close class inside the alert.

⚙️ Variables CSS

Variable Description
--alert-animation Animation used to show and/or hide the alert.
--alert-bg-color Background color of the alert (default).
--alert-body-padding Padding inside the alert body.
--alert-border-color Color of the alert border (default).
--alert-border-radius Corner radius of the alert.
--alert-border-style Border style of the alert (solid, dashed, etc.).
--alert-border-width Thickness of the alert border.
--alert-box-shadow Shadow applied to the alert.
--alert-container-padding-inline Horizontal padding inside the .alert-container.
--alert-footer-padding Padding inside the alert footer.
--alert-gap Gap between alerts inside the container.
--alert-header-padding Padding inside the alert header.
--alert-margin Outer margin around each alert.
--alert-width Width of the alert (e.g. 100% or fixed value).