Notification - Seventh UI CSS

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget commodo dui. Nulla mauris arcu, placerat eu sem ac, faucibus pharetra ipsum. Praesent tempus egestas leo, mollis blandit urna vehicula at.

Starts at: 04/16/2026 Created at: 04/16/2026 - 14:03:52 By administrator

Slots

Review the campaign details before publishing.

Starts at: 04/16/2026 Created at: 04/16/2026 - 14:03:52

Dark surfaces use existing tokens and keep the same persistent content model.

Created at: 04/16/2026 - 14:03:52 By administrator

Behavior Notes

Notification is persistent content. It does not auto-dismiss and should not use the Toast region or timing behavior.

Use semantic containers such as <article> or <section> when the notification is part of page content.

CSS API

<article class="sui-notification" aria-labelledby="notification-title">
  <div class="sui-notification__body">
    <span class="sui-icon sui-icon--icons-note-outline sui-notification__icon" aria-hidden="true"></span>
    <div class="sui-notification__content">
      <div class="sui-notification__header">
        <h3 class="sui-notification__title" id="notification-title">Title</h3>
      </div>
      <p class="sui-notification__description">Persistent notification body.</p>
      <div class="sui-notification__meta">Created at: 04/16/2026</div>
    </div>
    <div class="sui-notification__actions" aria-label="Notification actions">
      <button class="sui-notification__action" type="button" aria-label="More options">...</button>
    </div>
  </div>
</article>

Default

Title

Slots

Campaign scheduled

Persistent notification

Behavior Notes

CSS API