Notification Card

<div class="notification-card">

  <div class="notification-icon">
    🔔
  </div>

  <div class="notification-content">

    <div class="notification-top">

      <h2>New Message</h2>

      <span class="notification-dot"></span>

    </div>

    <p>
      Sarah sent you a new project update.
    </p>

    <span class="notification-time">
      2 minutes ago
    </span>

  </div>

</div>

.notification-card{
  width:100%;
  max-width:420px;
  display:flex;
  gap:16px;
  padding:22px;
  background:#08111f;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  color:#ffffff;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.notification-card:hover{
  transform:translateY(-6px);
  border-color:rgba(34,211,238,.45);
  box-shadow:
    0 24px 50px rgba(0,0,0,.35),
    0 0 26px rgba(34,211,238,.12);
}

.notification-icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:14px;
  background:linear-gradient(
    135deg,
    #22d3ee,
    #8b5cf6
  );
  font-size:21px;
  box-shadow:0 0 22px rgba(139,92,246,.25);
}

.notification-content{
  flex:1;
}

.notification-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.notification-top h2{
  margin:0;
  color:#ffffff;
  font-size:17px;
}

.notification-dot{
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:50%;
  background:#22d3ee;
  box-shadow:0 0 10px rgba(34,211,238,.65);
}

.notification-content p{
  margin:0 0 9px;
  color:#aab4c8;
  font-size:14px;
  line-height:1.5;
}

.notification-time{
  color:#71849d;
  font-size:11px;
}

How This Notification Card Works

The Notification Card is a compact message component built with HTML and CSS. It displays a notification icon, title, unread indicator, short message, and timestamp inside a dark horizontal card. The published component does not use JavaScript, so its interactive behavior comes entirely from CSS hover effects and transitions.

The main .notification-card uses display: flex to place the icon and notification content next to each other. A 16px gap separates the two areas, while 22px of padding keeps the content comfortably spaced from the card edges.

The card uses width: 100% with a max-width of 420px. This combination allows it to adapt to a narrower parent container while preventing it from becoming excessively wide. The background is #08111f, with white text and a subtle 1px border using rgba(255,255,255,.10).

Rounded corners are created with an 18px border radius. A default box-shadow of 0 18px 45px rgba(0,0,0,.28) adds depth beneath the card without making the interface look overly heavy.

Hovering over the notification activates three visual changes. The whole card moves upward with transform: translateY(-6px), the border becomes more visible with a semi-transparent cyan color, and the shadow expands. A second cyan-tinted shadow is also added to create a faint glow around the card.

These changes are animated with .3s ease transitions applied to transform, border-color, and box-shadow. This keeps the interaction smooth while avoiding unnecessary animation on properties that do not change. For more detail on this CSS behavior, see the MDN CSS transition documentation.

The .notification-icon creates the visual block on the left side. It measures 52px by 52px and uses Flexbox to center the bell emoji. flex-shrink: 0 prevents the icon from becoming smaller when the card is placed inside a narrow container.

The icon background uses a 135deg linear gradient from cyan #22d3ee to purple #8b5cf6. A 14px border radius gives the icon softer corners, while box-shadow: 0 0 22px rgba(139,92,246,.25) adds a light purple glow around it.

The .notification-content area uses flex: 1, which allows it to take the remaining horizontal space. Inside it, .notification-top uses another Flexbox layout to keep the “New Message” heading on the left and the unread dot on the right.

The heading uses a modest 17px font size, keeping it prominent without overpowering the message. A 12px gap is available between the heading and the status indicator if horizontal space becomes limited.

The .notification-dot is an 8px circular element filled with cyan. Its box-shadow creates a small glow, making it visually distinct as an unread or active-status marker. Like the icon, it uses flex-shrink: 0 so it maintains its size.

Below the heading, the notification message appears in a softer #aab4c8 color. Its 14px font size and 1.5 line height keep the text readable while clearly separating it from the brighter title.

The final .notification-time uses an even quieter #71849d color and an 11px font size. This creates a natural hierarchy where the notification title receives the most attention, followed by the message, and then the timestamp.

Customizing This Notification Card

The card can be adapted easily because its layout and visual styling are controlled by a small set of CSS values and simple text content.

• Change the 420px max-width to create a wider or narrower notification.
• Adjust the 22px padding and 16px gap to change the internal spacing.
• Replace #08111f to use a different card background.
• Change #22d3ee and #8b5cf6 to customize the icon gradient and unread indicator.
• Modify the 52px icon dimensions or 21px emoji font size to change its visual prominence.
• Edit translateY(-6px) to increase or reduce the hover lift.
• Change the .3s transition duration to make the hover interaction faster or slower.
• Replace “New Message,” the project update text, “2 minutes ago,” and the bell emoji with your own notification content.

Where to Use This Notification Card

This component works well anywhere a short update needs to be presented clearly without taking over the surrounding interface.

• Dashboard notification panels.
• Messaging and collaboration apps.
• Project management interfaces.
• Admin dashboards.
• Activity feeds.
• Account alerts and status updates.
• SaaS application notification centers.

Because the card uses a flexible horizontal layout and contains no JavaScript dependency, it can be repeated easily inside lists or dashboard sections. For a more visually animated card interaction, the 3D Hover Monster Cards component is another related CodeRipple example.

Frequently Asked Questions

Does the Notification Card use JavaScript?

No. The published component contains HTML and CSS only. The hover lift, border change, shadow expansion, and glow effects are all handled with CSS.

What does the cyan dot represent?

The .notification-dot functions as a small visual status indicator. In the current design, it appears beside the “New Message” title and can naturally represent an unread or active notification.

Is the Notification Card responsive?

There is no separate media query, but the card uses width: 100% with max-width: 420px. This allows it to shrink with its parent container instead of remaining at a fixed width.

Why does the icon use flex-shrink: 0?

The property prevents the 52px icon from becoming compressed when horizontal space is limited. The notification content can adjust while the icon keeps its intended dimensions.

The Notification Card keeps its implementation lightweight with a flexible layout, clear text hierarchy, gradient icon, status indicator, and CSS-only hover feedback.