Notification Card

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

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

/* Container to lay out the notifications */
.notifications-list-container {
    max-width: 500px;
    margin: 2rem auto;
    display: grid;
    gap: 1rem;
}

/* === Notification Card Styles === */
.notification-card {
    --notification-radius: 8px;
    --notification-accent-color: #3b82f6; /* Blue for 'info' */
    --notification-bg-color: #eff6ff; /* Light blue */

background-color: var(--notification-bg-color);
    border-left: 5px solid var(--notification-accent-color);
    border-radius: var(--notification-radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07);
}

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

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

.notification-title {
    font-weight: 600;
    color: #1e3a8a; /* Darker shade of the accent color */
    margin: 0 0 0.25rem;
}

.notification-message {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1e40af;
    margin: 0;
}

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

/* Success State */
.notification-card.is-success {
    --notification-accent-color: #16a34a; /* Green */
    --notification-bg-color: #f0fdf4;
}
.notification-card.is-success .notification-title { color: #15803d; }
.notification-card.is-success .notification-message { color: #166534; }

/* Warning State */
.notification-card.is-warning {
    --notification-accent-color: #f59e0b; /* Amber */
    --notification-bg-color: #fffbeb;
}
.notification-card.is-warning .notification-title { color: #b45309; }
.notification-card.is-warning .notification-message { color: #92400e; }

/* Error State */
.notification-card.is-danger {
    --notification-accent-color: #dc2626; /* Red */
    --notification-bg-color: #fef2f2;
}
.notification-card.is-danger .notification-title { color: #b91c1c; }
.notification-card.is-danger .notification-message { color: #991b1b; }

</style>

<div class="notifications-list-container">
    
    
    <div class="notification-card">
        <div class="notification-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10,1.667A8.333,8.333,0,1,0,18.333,10,8.333,8.333,0,0,0,10,1.667Zm4.792,12.158-0.833,0.833a0.45,0.45,0,0,1-0.625,0l-4.167-4.125A2.95,2.95,0,0,1,5.283,6.717l1.992,1.942,1.358-1.358L6.667,5.358a3,3,0,0,1,3.333,0.583,2.908,2.908,0,0,1,0.683,3.125l4.125,4.125A0.408,0.408,0,0,1,14.792,13.825Z" clip-rule="evenodd" />
            </svg>
        </div>
        <div class="notification-content">
            <h3 class="notification-title">System Update Scheduled</h3>
            <p class="notification-message">A brief maintenance window is scheduled for tomorrow at 2:00 AM UTC.</p>
        </div>
    </div>
    
    
    <div class="notification-card is-success">
        <div class="notification-icon">
            <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 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
        </div>
        <div class="notification-content">
            <h3 class="notification-title">Success</h3>
            <p class="notification-message">Your profile has been updated successfully.</p>
        </div>
    </div>

<div class="notification-card is-warning">
        <div class="notification-icon">
            <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"></path>
            </svg>
        </div>
        <div class="notification-content">
            <h3 class="notification-title">Warning</h3>
            <p class="notification-message">Your trial period expires in 3 days. Please upgrade to continue service.</p>
        </div>
    </div>

<div class="notification-card is-danger">
        <div class="notification-icon">
            <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="notification-content">
            <h3 class="notification-title">Error</h3>
            <p class="notification-message">Unable to save your changes. Please try again.</p>
        </div>
    </div>
</div>