System Alert Warning Card

<!DOCTYPE html>
<title>My Example</title>

<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>