Alert

displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Note: I have set the root font-size to 10px for this library.

Instructions to import the Alert component in your CSS or HTML:

// CSS
@import url("https://starlingui.netlify.app/utils/color.css");
@import url("https://starlingui.netlify.app/pages/components/alert/alert.css");

// HTML
<link rel="stylesheet" href="https://starlingui.netlify.app/utils/color.css">
<link rel="stylesheet" href="https://starlingui.netlify.app/pages/components/alert/alert.css">

Simple Alert

has 4 types:

alert_info

alert_success

alert_warning

alert_danger

This is a simple info Alert

This is a simple success Alert

This is a simple warning Alert

This is a simple danger Alert

<!-- Info Alert -->
<div class="sui_alert alert_info">
  This is a simple info Alert
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>

<!-- Success Alert -->
<div class="sui_alert alert_success">
  This is a simple success Alert
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>

<!-- Warning Alert -->
<div class="sui_alert alert_warning">
  This is a simple warning Alert
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>

<!-- Danger Alert -->
<div class="sui_alert alert_danger">
  This is a simple danger Alert
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>

Standard Alert

in addition to the simple alert, it has an icon:

info Alert with icon and close button

success Alert with icon and close button

warning Alert with icon and close button

danger Alert with icon and close button

<!-- Info Alert -->
<div class="sui_alert alert_info">
  <i class="fas fa-info-circle"></i>
  <!-- Your alert message comes here.. -->
  info Alert with icon and close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>

<!-- Success Alert -->
<div class="sui_alert alert_success">
  <!-- Font Awesome icons are used, you can change them if you wish -->
  <i class="fas fa-check-circle"></i>
  success Alert with icon and close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>

<!-- Warning Alert -->
<div class="sui_alert alert_warning">
  <i class="fas fa-exclamation-circle"></i>
  warning Alert with icon and close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>

<!-- Danger Alert -->
<div class="sui_alert alert_danger">
  <i class="fas fa-exclamation-triangle"></i>
  danger Alert with icon and close button
  <button class="btn_icon_fa">
    <i class="fas fa-times"></i>
  </button>
</div>