System Alert/Warning Card

Communicate high-priority system-wide messages to users with this clear and prominent alert banner card.

This component is ideal for admin dashboards or application interfaces to notify users of critical information like scheduled maintenance, security updates, or major feature launches.

Screenshot showing three different alert cards for warning, danger, and info messages.

Get Source Code Preview

About this Component

This template is styled to be instantly recognizable as an important message. It uses a color-coded background, a matching accent border on the left, and a prominent icon to immediately convey the nature of the alert. The component is fully responsive and includes several color themes for different alert severities.

Features

Contextual Color Themes: Includes pre-built, accessible themes for warnings (amber), info (blue), and danger (red).
Theming with CSS Variables: All colors for each theme are controlled by a set of CSS variables, making it extremely easy to customize the look and feel or create new themes.
Accessible: The card has a role="alert" attribute to ensure that screen readers announce the message as an important update.

Code Breakdown

HTML Structure

Each alert is a div with the class .system-alert-card and an appropriate role attribute. You apply a modifier class, such as .is-danger, to change its appearance. Inside, a div holds the SVG icon, followed by another div for the textual content, which includes a h3 title and a p for the message.

CSS Styling

The card is a Flexbox container to align the icon and text content. The theming system is built entirely on CSS variables. The base .system-alert-card rule defines a default set of variables (e.g., --alert-bg-color, --alert-accent-color, etc.). Each modifier class, like .is-danger, simply overrides these variables with new color values. All other styles, like the border-left or the text color, inherit from these variables, allowing the entire component's color scheme to be changed with just a few lines of CSS.

Code

Here's the complete, self-contained code. To change the alert type, simply apply the desired modifier class to the main div element.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Container for the alert list */
.alert-list-container {
    max-width: 900px;
    margin: 2rem auto;
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

/* === System Alert Card Styles === */
.system-alert-card {
    --alert-radius: 8px;
    --alert-shadow: 0 4px 10px rgba(0,0,0,0.1);
    /* Default: Warning Theme */
    --alert-bg-color: #fffbeb;
    --alert-accent-color: #d97706;
    --alert-icon-color: #b45309;
    --alert-title-color: #92400e;
    --alert-text-color: #78350f;
    --alert-link-color: #92400e;
    
    background-color: var(--alert-bg-color);
    border-radius: var(--alert-radius);
    box-shadow: var(--alert-shadow);
    padding: 1.25rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.alert-icon-wrapper {
    flex-shrink: 0;
}
.alert-icon-wrapper svg {
    width: 24px;
    height: 24px;
    color: var(--alert-icon-color);
}

.alert-content {
    flex-grow: 1;
}

.alert-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--alert-title-color);
    margin: 0 0 0.5rem;
}

.alert-message {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--alert-text-color);
    margin: 0;
}
.alert-message a {
    color: var(--alert-link-color);
    font-weight: 500;
    text-decoration: underline;
}

/* --- Style Variations --- */

/* Info State */
.system-alert-card.is-info {
    --alert-bg-color: #eff6ff;
    --alert-accent-color: #3b82f6;
    --alert-icon-color: #2563eb;
    --alert-title-color: #1e40af;
    --alert-text-color: #1d4ed8;
    --alert-link-color: #1e3a8a;
}

/* Danger State */
.system-alert-card.is-danger {
    --alert-bg-color: #fef2f2;
    --alert-accent-color: #ef4444;
    --alert-icon-color: #dc2626;
    --alert-title-color: #b91c1c;
    --alert-text-color: #991b1b;
    --alert-link-color: #991b1b;
}

</style>

<div class="alert-list-container">

<div class="system-alert-card" role="alert">
        <div class="alert-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625l6.28-10.875zM10 6a.85.85 0 01.85.85v3.5a.85.85 0 01-1.7 0v-3.5A.85.85 0 0110 6zM10 13.7a0.95 0.95 0 100-1.9 0.95 0.95 0 000 1.9z" clip-rule="evenodd"/>
            </svg>
        </div>
        <div class="alert-content">
            <h3 class="alert-title">Scheduled Maintenance</h3>
            <p class="alert-message">The platform will be temporarily unavailable for approximately 15 minutes on Oct 3, 2025 at 05:00 UTC for a scheduled system upgrade. We apologize for any inconvenience.</p>
        </div>
    </div>
    
     
    <div class="system-alert-card is-danger" role="alert">
        <div class="alert-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
            </svg>
        </div>
        <div class="alert-content">
            <h3 class="alert-title">Critical Security Update</h3>
            <p class="alert-message">A new security patch has been released. All users are required to update their account password by the end of the day. <a href="#">Update password now.</a></p>
        </div>
    </div>

<div class="system-alert-card is-info" role="alert">
        <div class="alert-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <g transform="scale(0.0390625)">
                    <path class="st0" d="M512,255.996l-63.305-51.631l29.002-76.362l-80.633-13.07L383.993,34.3l-76.361,29.002L256,0.004 l-51.646,63.298L128.008,34.3l-13.07,80.634l-80.633,13.07l28.988,76.362L0,255.996l63.292,51.632l-28.988,76.368l80.633,13.07 l13.07,80.633l76.347-29.002L256,511.996l51.632-63.299l76.361,29.002l13.07-80.633l80.633-13.07l-29.002-76.368L512,255.996z M212.829,313.648l-14.382,2.834c-0.973,0.183-1.649-0.056-2.298-0.811l-39.266-45.872l-0.606,0.12l10.151,51.596 c0.142,0.726-0.253,1.304-0.972,1.452l-13.662,2.686c-0.719,0.141-1.297-0.254-1.438-0.98l-15.678-79.746 c-0.155-0.734,0.24-1.304,0.959-1.445l14.508-2.855c0.846-0.169,1.635,0.056,2.284,0.811l39.181,46.013l0.592-0.12l-10.166-51.716 c-0.14-0.733,0.254-1.304,0.973-1.452l13.662-2.686c0.719-0.141,1.297,0.24,1.438,0.973l15.678,79.745 C213.942,312.929,213.548,313.507,212.829,313.648z M283.663,299.718l-52.689,10.364c-0.733,0.14-1.296-0.247-1.452-0.973 l-15.678-79.745c-0.141-0.734,0.24-1.312,0.973-1.452l52.688-10.364c0.719-0.14,1.298,0.247,1.438,0.98l2.538,12.922 c0.155,0.726-0.24,1.305-0.959,1.445l-35.418,6.966c-0.479,0.092-0.676,0.38-0.578,0.867l3.201,16.312 c0.099,0.48,0.395,0.677,0.874,0.586l29.495-5.802c0.719-0.141,1.297,0.253,1.438,0.972l2.524,12.81 c0.141,0.726-0.254,1.297-0.972,1.438l-29.496,5.802c-0.479,0.099-0.676,0.388-0.577,0.867l3.355,17.039 c0.084,0.486,0.38,0.676,0.86,0.578l35.417-6.965c0.719-0.141,1.298,0.254,1.438,0.98l2.538,12.93 C284.777,298.999,284.382,299.577,283.663,299.718z M371.896,281.107c0.014,0.754-0.493,1.361-1.339,1.523l-12.083,2.376 c-0.846,0.169-1.424-0.226-1.805-0.902L332.362,235.8l-0.24,0.049l-4.328,53.937c-0.099,0.768-0.494,1.354-1.34,1.515 l-12.083,2.383c-0.719,0.141-1.297-0.254-1.692-0.931l-36.94-75.565c-0.268-0.705-0.127-1.234,0.719-1.403l15.594-3.059 c0.846-0.17,1.423,0.212,1.678,0.923l21.995,49.263l0.24-0.049l3.877-54.346c0.099-0.782,0.493-1.353,1.326-1.523l10.518-2.066 c0.719-0.141,1.297,0.24,1.692,0.931l24.631,48.734l0.254-0.05l1.212-53.816c-0.042-0.874,0.367-1.34,1.213-1.502l15.467-3.038 c0.846-0.17,1.17,0.261,1.198,1.015L371.896,281.107z"/>
                </g>
            </svg>

</div>
        <div class="alert-content">
            <h3 class="alert-title">New Feature Available</h3>
            <p class="alert-message">We've just launched the new project reporting dashboard. You can check it out in your analytics section.</p>
        </div>
    </div>
</div>

View Output