<div class="wrapper">

  <h2>CSS Alert Message Boxes</h2>

  <!-- Success -->
  <div class="sf-alert success">
    <i class="alert-icon fas fa-check-circle"></i>
    <div class="alert-content">
      <p>This is a success message! <a href="#">Link</a></p>
    </div>
    <a class="alert-close" href="#"><i class="fas fa-times"></i></a>
  </div>

  <!-- Error -->
  <div class="sf-alert error">
    <i class="alert-icon fas fa-times-circle"></i>
    <div class="alert-content">
      <p>This is an error message!</p>
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Vitae velit, sunt nemo, non</li>
      </ul>
    </div>
    <a class="alert-close" href="#"><i class="fas fa-times"></i></a>
  </div>

  <!-- Warning -->
  <div class="sf-alert warning">
    <i class="alert-icon fas fa-exclamation-triangle"></i>
    <div class="alert-content">
      <p>This is a warning message! <a href="#">Link</a></p>
    </div>
    <a class="alert-close" href="#"><i class="fas fa-times"></i></a>
  </div>

  <!-- Info -->
  <div class="sf-alert info">
    <i class="alert-icon fas fa-info-circle"></i>
    <div class="alert-content">
      <p>This is an info message! <a href="#">Link</a></p>
    </div>
    <a class="alert-close" href="#"><i class="fas fa-times"></i></a>
  </div>

</div>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #f1f4f7; color: #3b495e; font-family: Inter; font-size: 16px; line-height: 1.5; }

.wrapper { width: 100%; max-width: 900px; margin: 50px auto; padding: 0 30px; }
.wrapper > h2 { text-align: center; margin-bottom: 40px; }

/* ------------------ */
/*  Snippflow Alerts  */
/* ------------------ */

.sf-alert {
  --sf-alert-success-bg: #d4edda;
  --sf-alert-success-text: #155724;
  --sf-alert-success-icon: #28a745;
  --sf-alert-success-link: #155724;

  --sf-alert-error-bg: #f8d7da;
  --sf-alert-error-text: #721c24;
  --sf-alert-error-icon: #dc3545;
  --sf-alert-error-link: #721c24;

  --sf-alert-warning-bg: #fff3cd;
  --sf-alert-warning-text: #856404;
  --sf-alert-warning-icon: #ffc107;
  --sf-alert-warning-link: #856404;

  --sf-alert-info-bg: #d1ecf1;
  --sf-alert-info-text: #0c5460;
  --sf-alert-info-icon: #17a2b8;
  --sf-alert-info-link: #0c5460;
}

.sf-alert { display: flex; align-items: center; gap: 20px; margin: 15px 0; padding:15px 20px; border-radius: 4px; }
.sf-alert .alert-icon { flex-shrink:0; font-size: 24px; }
.sf-alert .alert-content { flex-grow: 1; }
.sf-alert .alert-content > * ~ * { margin-top: 10px; }
.sf-alert .alert-content ul { margin-left: 20px; }
.sf-alert .alert-content a { text-decoration: underline; }
.sf-alert .alert-content a:hover { text-decoration: none; }
.sf-alert a.alert-close{ display: flex; align-items: center; justify-content: center; flex-shrink:0; width: 30px; height: 30px; border-radius: 4px; font-size: 18px; text-decoration: none; }
.sf-alert a.alert-close:hover { background-color: rgba(0, 0, 0, 0.03); }

.success { color: var(--sf-alert-success-text); background-color: var(--sf-alert-success-bg); }
.success a { color: var(--sf-alert-success-link); }
.success .alert-icon { color: var(--sf-alert-success-icon); }

.error { color: var(--sf-alert-error-text); background-color: var(--sf-alert-error-bg); }
.error a { color: var(--sf-alert-error-link); }
.error .alert-icon { color: var(--sf-alert-error-icon); }

.warning { color: var(--sf-alert-warning-text); background-color: var(--sf-alert-warning-bg); }
.warning a { color: var(--sf-alert-warning-link); }
.warning .alert-icon { color: var(--sf-alert-warning-icon); }

.info { color: var(--sf-alert-info-text); background-color: var(--sf-alert-info-bg); }
.info a { color: var(--sf-alert-info-link); }
.info .alert-icon { color: var(--sf-alert-info-icon); }

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/inter-ui/4.1.0/inter.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.