Notification Card

Communicate important information, status updates, or alerts to your users with this clear and accessible notification card.

This component is essential for any application or dashboard. It's designed to be easily adapted to different contexts, with pre-styled variations for information, success, warnings, and errors.

Screenshot showing four different notification cards for info, success, warning, and error states.

Get Source Code Preview

About this Component

This template uses a classic alert message pattern. An icon and a colored left border provide a strong visual cue for the notification's type, while the main content area provides a title and a descriptive message. The component's appearance is controlled entirely by a single modifier class.

Features

Contextual Color Theming: The template includes four pre-built themes. These are "info" (blue), "success" (green), "warning" (amber), and "danger" (red).
Modifier-Based Styling: Easily change a notification's style by adding a single class (e.g., .is-success) to the main card element.
Themed with CSS Variables: Colors for each theme are set with CSS variables, making it simple to customize to your brand's palette.
Accessible: Each notification is a distinct region with an icon that visually supports the message's intent.

Code Breakdown

HTML Structure

Each notification is a simple div with the class .notification-card. You can then add a modifier class like .is-warning to apply a different style. Inside, the card is a flex container with a div element for the icon and a div for the text content. The text content includes an h3 element for the title and a p element for the message.

CSS Styling

The core styling uses a colored border-left and a light, tinted background-color to define the notification's look. This is all handled by the --notification-accent-color and --notification-bg-color variables. The modifier classes (e.g., .is-success) work by simply re-declaring these variables with different color values. The text colors inside the notification are then set based on these accent colors for a cohesive theme.

Code

Here is the complete, self-contained code. Simply choose the notification style you need and apply the corresponding class to the card element.

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

View Output