CSS-Only

Notice

Notification card component for displaying updates, messages, and alerts in notification centers and activity feeds. Supports structured content with headers, body, footer, actions, and metadata.

Example

New Feature Available
We've added support for dark mode across the entire platform. Try it out in your settings!
2 hours ago 
<article class="omni-notice" data-variant="info">
  <div class="omni-notice-header">
    New Feature Available
  </div>
  <div class="omni-notice-body">
    We've added support for dark mode across the entire platform.
  </div>
  <div class="omni-notice-footer">
    2 hours ago
  </div>
</article>

When to Use Notice vs Alert vs Banner

Component Use Case Typical Location Element
Notice Notification centers, activity feeds, message lists Dedicated notification area, sidebar, dropdown <article>
Alert Inline contextual feedback, form validation, status messages Within page content, above forms, contextual areas <div>
Banner Full-width announcements, system-wide messages, cookie consent Top/bottom of page, sticky/fixed position <div>

Variants

Semantic Variants

Use data-variant to convey meaning through header color:

Primary Notice
This is a primary notification with a blue header.
Payment Successful
Your payment has been processed successfully.
Session Expiring Soon
Your session will expire in 5 minutes.
Security Alert
Suspicious login detected from a new location.
System Update
Scheduled maintenance tonight at 2 AM EST.
<article class="omni-notice" data-variant="success">
  <div class="omni-notice-header">Payment Successful</div>
  <div class="omni-notice-body">Your payment has been processed.</div>
</article>

Unread State

Use data-state="unread" to highlight unread notifications with a blue accent border and indicator dot:

New Message
You have a new message from Sarah Johnson.
5 minutes ago
Task Completed
Your report has been generated and is ready to view.
1 hour ago
<article class="omni-notice" data-state="unread" aria-label="Unread notification">
  <div class="omni-notice-header">New Message</div>
  <div class="omni-notice-body">You have a new message.</div>
</article>

Compact Size

Use data-size="compact" for tighter spacing in notification lists:

System backup completed successfully.
30 minutes ago
New team member added to your workspace.
1 hour ago
<article class="omni-notice" data-size="compact">
  <div class="omni-notice-body">Quick notification message.</div>
  <div class="omni-notice-footer">2 hours ago</div>
</article>

Structure

With Header, Body, and Footer

Structured notices with distinct header, body, and footer sections:

Password Expiring
Your password will expire in 3 days. Please update it to maintain account security.
Today at 9:00 AM

Simple (No Structure)

For simple notifications, you can omit the child components and use the notice directly:

Simple notification without structured children. 
<article class="omni-notice" data-variant="info">
  Simple notification text.
</article>

With Icon

Add an icon to the notice body using data-has-icon="true" and the omni-notice-icon class:

Order Shipped
Your order #12345 has been shipped and will arrive in 2-3 business days.
15 minutes ago 
<article class="omni-notice" data-variant="success">
  <div class="omni-notice-header">Order Shipped</div>
  <div class="omni-notice-body" data-has-icon="true">
    <div class="omni-notice-icon">
      <svg>...</svg>
    </div>
    <div>Your order has been shipped.</div>
  </div>
</article>

With Metadata

Add metadata like timestamps or categories using omni-notice-meta:

Comment on Your Post
Jane Cooper commented: "Great article! Very informative."
2 hours ago • Blog Posts 
<article class="omni-notice" data-variant="primary">
  <div class="omni-notice-header">Comment on Your Post</div>
  <div class="omni-notice-body">
    Jane Cooper commented: "Great article!"
    <div class="omni-notice-meta">
      <span class="omni-notice-time">2 hours ago</span>
      <span>•</span>
      <span>Blog Posts</span>
    </div>
  </div>
</article>

With Actions

Add action buttons using omni-notice-actions and standard button components:

Friend Request
Alex Morgan sent you a friend request.
5 minutes ago 
<article class="omni-notice" data-variant="info">
  <div class="omni-notice-header">Friend Request</div>
  <div class="omni-notice-body">
    Alex Morgan sent you a friend request.
    <div class="omni-notice-actions">
      <button class="omni-button" data-variant="primary" data-size="sm">Accept</button>
      <button class="omni-button" data-variant="secondary" data-size="sm">Decline</button>
    </div>
  </div>
</article>

Notification List

Group multiple notices in a notification center using a <section> with aria-label:

New Message
You have 3 unread messages from the team.
Just now
Deployment Complete
Your application was successfully deployed to production.
10 minutes ago
Low disk space detected on server-01.
1 hour ago
<section aria-label="Notifications">
  <article class="omni-notice" data-state="unread">
    <div class="omni-notice-header">New Message</div>
    <div class="omni-notice-body">You have 3 unread messages.</div>
  </article>
  <article class="omni-notice" data-variant="success">
    <div class="omni-notice-header">Deployment Complete</div>
    <div class="omni-notice-body">Successfully deployed.</div>
  </article>
</section>

API Reference

Notice Attributes

Attribute Values Default Description
data-variant primary, success, warning, danger, info — Semantic color applied to header
data-state unread — Unread indicator with accent border
data-size compact — Compact spacing for notification lists

Notice Components

Class Description
.omni-notice Base notice container (use <article> in lists)
.omni-notice-header Colored header bar with title text
.omni-notice-body Main content area
.omni-notice-footer Footer area (typically for timestamps)
.omni-notice-icon Icon container (use with data-has-icon="true" on body)
.omni-notice-meta Metadata container (timestamp, category, etc.)
.omni-notice-time Timestamp text
.omni-notice-actions Action buttons container

Accessibility

  • Use <article> for individual notices in a notification list
  • Wrap notification lists in <section aria-label="Notifications">
  • For dynamic notices added via JS, use role="status" (polite) or role="alert" (assertive)
  • Unread notices should include aria-label="Unread notification"
  • Timestamps should use <time> element with datetime attribute when possible
  • Action buttons maintain full keyboard navigation and focus indicators
  • Hover effect provides visual feedback for interactive notices

ARIA Roles Reference

<!-- For notification lists -->
<section aria-label="Notifications">
  <article class="omni-notice">...</article>
</section>

<!-- For dynamic advisory updates -->
<div class="omni-notice" role="status">...</div>

<!-- For dynamic urgent updates -->
<div class="omni-notice" role="alert">...</div>

<!-- For unread notices -->
<article class="omni-notice" data-state="unread" aria-label="Unread notification">
  ...
</article>

Components Used

Other OmniUI components demonstrated on this page:

Button