<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); }
This Pen doesn't use any external JavaScript resources.