A-One Design System

NOTIFICATION: User-feedback message surfaces
VARIANTS: Inline | Floating | Toast

Consolidated entry for the three notification families. Inline sits in the content flow; Floating and Toast are transient overlays. Tabs switch between them.

INLINE NOTIFICATION: Page-level notifications for system status, warnings, errors, successes, and highlights
VARIANTS: info | warning | error | success | highlight
CLASSES: .inline-notification | .inline-notification-{variant} | .inline-notification-icon | .inline-notification-content | .inline-notification-title | .inline-notification-message | .inline-notification-actions | .inline-notification-close

In-flow notifications that live within the page content. Unlike floating notifications (toast-style, fixed position), inline notifications persist until explicitly dismissed or are permanently visible. Supports optional icon, title, message, action buttons, and close button. Requires inline_notification_controller.js for dismiss behavior.

All Variants

Variants: Five semantic variants for different notification types. Each shown here with icon, title, message, action buttons, and close button. Use .inline-notification-{variant} to set the color scheme.

New schools added near you

12 new sixth forms in Manchester match your search.

Application deadline approaching

Hills Road closes in 3 days — finish your application before the cut-off.

Couldn't save your search

Something went wrong while saving your search. Please try again.

Your shortlist is ready

5 schools saved — compare them now.

New feature: Course alerts

Get notified when a course's deadline is near so you never miss an application window. Configure your preferences in settings.

<div class="inline-notification inline-notification-info" role="status">

        <div class="inline-notification-icon"><i class="fa-solid fa-circle-info"></i></div>

        <div class="inline-notification-content">

          <p class="inline-notification-title">Title</p>

          <p class="inline-notification-message">Message</p>

          <div class="inline-notification-actions">

            <button class="btn btn-sm btn-outline-secondary">Action</button>

          </div>

        </div>

        <button class="inline-notification-close" aria-label="Close notification">

          <i class="fa-solid fa-xmark"></i>

        </button>

      </div>

Title Only

Title Only: The simplest notification — just a title with an icon and close button. Useful for brief, one-line messages that need no further explanation.

ApplicaaOne is scheduled for maintenance tonight at 10pm.

Your session will expire in 5 minutes.

Changes saved successfully.

<div class="inline-notification inline-notification-info" role="status">

        <div class="inline-notification-icon"><i class="fa-solid fa-circle-info"></i></div>

        <div class="inline-notification-content">

          <p class="inline-notification-title">Title text only</p>

        </div>

        <button class="inline-notification-close" ...><i class="fa-solid fa-xmark"></i></button>

      </div>

Message Only

Message Only: A notification with just body text and no title. Useful for simple informational messages that don't need a heading.

Applications close 31 Jan — submit before then.

Unable to connect to the external verification service. Please try again later.

<div class="inline-notification inline-notification-info">

        <div class="inline-notification-icon"><i class="fa-solid fa-circle-info"></i></div>

        <div class="inline-notification-content">

          <p class="inline-notification-message">Message text only</p>

        </div>

        <button class="inline-notification-close" ...><i class="fa-solid fa-xmark"></i></button>

      </div>

Without Icon

No Icon: The icon element is optional. Omit .inline-notification-icon for a cleaner, text-only layout.

System update scheduled

A maintenance window is planned for Saturday 22 March from 2am to 6am. ApplicaaOne will be unavailable during this time.

Incomplete application

Your application is missing required documents — upload them to continue.

<div class="inline-notification inline-notification-info">

        <div class="inline-notification-content">

          <p class="inline-notification-title">Title</p>

          <p class="inline-notification-message">Message</p>

        </div>

        <button class="inline-notification-close" ...><i class="fa-solid fa-xmark"></i></button>

      </div>

Without Actions

No Actions: Notifications can omit the action buttons area. This is the most common pattern — just informational content with a close button.

Multiple entry points available

Hills Road Sixth Form accepts applications for Year 12 and Year 13 entry. Select the appropriate entry point when you start your application.

Comparison updated

52 schools added to your comparison.

<div class="inline-notification inline-notification-info">

        <div class="inline-notification-icon"><i class="fa-solid fa-circle-info"></i></div>

        <div class="inline-notification-content">

          <p class="inline-notification-title">Title</p>

          <p class="inline-notification-message">Message</p>

        </div>

        <button class="inline-notification-close" ...><i class="fa-solid fa-xmark"></i></button>

      </div>

Non-Dismissible

Non-Dismissible: Omit the close button and the Stimulus controller to create a notification that is always visible. These are useful for persistent system messages.

Read-only mode

This application has been submitted and can no longer be edited. Contact the provider if changes are needed.

Account suspended

This account has been suspended by an administrator. All features are disabled until the suspension is lifted.

Welcome to A-One

Get started by telling us what you're looking for and saving your first search.

<div class="inline-notification inline-notification-warning" role="alert">

        <div class="inline-notification-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>

        <div class="inline-notification-content">

          <p class="inline-notification-title">Title</p>

          <p class="inline-notification-message">Message</p>

        </div>

      </div>

Note: No close button, no data-controller, no dismiss action.

Rich Content

Rich Content: The message area supports rich HTML content including lists, links, and structured text. This is useful for detailed error reports or feature explanations.

Some details need fixing

The following fields must be corrected before you can submit your application:

Date of birth — enter it in the UK format (DD/MM/YYYY)
Phone number — add a country code prefix (e.g. +44)
Postcode — doesn't match a valid UK postcode

See the application help guide for help resolving these issues.

What's new in this release

Saved-search alerts when new schools match your criteria
Side-by-side school comparison for your shortlist
Export your shortlist to PDF and Excel
Improved accessibility across all pages

Tip: Use a <div> instead of <p> for .inline-notification-message when the content includes block-level elements like lists.

Stacked Notifications

Stacked: Multiple inline notifications stack vertically with space-y-3 spacing. This is the natural layout when multiple notifications appear in sequence within a page.

Payment processing failed

The application fee payment could not be processed. The card on file has been declined.

Missing supporting documents

3 required documents have not been uploaded: birth certificate, school report, and proof of address.

Application reference: APP-2026-0847

Use this reference number in all correspondence regarding this application.

<div class="tw:space-y-3">

        <div class="inline-notification inline-notification-error">...</div>

        <div class="inline-notification inline-notification-warning">...</div>

        <div class="inline-notification inline-notification-info">...</div>

      </div>

Interactive Demo

Live: These notifications use data-controller="inline-notification" for real dismiss behavior. Click the close button or press Escape (when focused within) to dismiss. The notification fades out and is removed from the DOM.

Try dismissing this notification

Click the close button or focus within and press Escape to dismiss.

Dismiss via action button

You can also dismiss using an action button with the same Stimulus action.

This one disappears too

All interactive notifications animate out smoothly before being removed from the DOM.

<div class="inline-notification inline-notification-info"

           data-controller="inline-notification"

           data-action="keydown.escape->inline-notification#dismiss"

           role="status">

        <div class="inline-notification-icon"><i class="fa-solid fa-circle-info"></i></div>

        <div class="inline-notification-content">...</div>

        <button class="inline-notification-close"

                data-action="click->inline-notification#dismiss"

                aria-label="Close notification">

          <i class="fa-solid fa-xmark"></i>

        </button>

      </div>

Toast notifications that appear in the top-right corner, auto-dismiss after a configurable duration, and support stacking. Uses neutral white cards with elevated shadow. Hover pauses the auto-dismiss timer. Requires floating_notification_controller.js for animation and auto-dismiss behavior.

Basic Notification

Basic: A simple notification with title and close button. The .floating-notification-visible class is applied inline here for static display.

Application saved

<div class="floating-notification floating-notification-visible">

        <div class="floating-notification-content">

          <p class="floating-notification-title">Application saved</p>

        </div>

        <button class="floating-notification-close" type="button" aria-label="Close">

          <i class="fa-solid fa-xmark"></i>

        </button>

      </div>

With Title and Message

Title + Message: Use .floating-notification-title for the bold heading and .floating-notification-message for a supporting description below.

Application submitted

Your application to Hills Road Sixth Form has been received. Confirmation sent to your email.

<div class="floating-notification floating-notification-visible">

        <div class="floating-notification-content">

          <p class="floating-notification-title">Application submitted</p>

          <p class="floating-notification-message">Description text...</p>

        </div>

        <button class="floating-notification-close" ...>...</button>

      </div>

With Icons

Icons: Add a .floating-notification-icon element before the content area. Uses Font Awesome 6 icons. The icon inherits neutral-600 color by default.

New schools match your search

8 sixth forms added near you.

Changes saved successfully

Deadline approaching

Application deadline is in 3 days.

Upload failed

The file exceeds the 10MB size limit. Please try a smaller file.

Generating report...

This may take a few moments.

Syncing data

<div class="floating-notification floating-notification-visible">

        <div class="floating-notification-icon">

          <i class="fa-solid fa-circle-info"></i>

        </div>

        <div class="floating-notification-content">...</div>

        <button class="floating-notification-close" ...>...</button>

      </div>

Icon color override: Add Tailwind text color utilities to the icon element:
text-green-600 (success) | text-orange-600 (warning) | text-red-600 (error)

With Actions

Actions: Use .floating-notification-actions inside the content area for action buttons. Notifications with actions auto-dismiss after 7 seconds instead of 4. Use data-auto-dismiss="0" to disable auto-dismiss for critical actions.

Application submitted

Your application to Hills Road Sixth Form has been submitted.

Application archived

Moved to archived applications folder.

Export ready

Your CSV export is ready for download.

<div class="floating-notification-content">

        <p class="floating-notification-title">Title</p>

        <p class="floating-notification-message">Message</p>

        <div class="floating-notification-actions">

          <button class="btn btn-sm btn-primary" type="button">Action</button>

          <button class="btn btn-sm btn-tertiary" type="button">Dismiss</button>

        </div>

      </div>

Full Example

Full Example: Combines icon, title, message, actions, and close button. This matches the primary design spec for the component.

Application submitted successfully

Your application to Hills Road Sixth Form has been submitted. A confirmation email has been sent to your registered email address.

Progress Bar

Progress: The .floating-notification-progress wrapper is hidden by default and becomes visible when it contains child content. Nest a .progress / .progress-bar component inside for determinate or indeterminate states.

Uploading documents...

3 of 5 files uploaded

Processing upload...

Please wait while we process your files

<div class="floating-notification-progress">

        <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">

          <div class="progress-bar progress-bar-primary" style="width: 60%"></div>

        </div>

      </div>

Use .progress-indeterminate for unknown completion (e.g., processing uploads).

Stacked Notifications

Stacking: Multiple notifications stack vertically with a gap-3 gap inside the .floating-notification-container. Newest notifications appear at the top. This static example simulates the stacking layout without fixed positioning.

Changes saved

2 new applications received

Applications from Oliver Smith and Amelia Brown are ready for review.

Session expiring soon

Your session will expire in 5 minutes. Save your work.

Interactive Demo

Live: These notifications use data-controller="floating-notification" for real slide-in animation and auto-dismiss. They are positioned inside a relative container for this demo instead of the fixed top-right position used in production. Hover over a notification to pause its auto-dismiss timer.

Settings updated

Your notification preferences have been saved.

Report generated

Your saved-search summary is ready.

3 applications pending review

<div class="floating-notification-container"

           data-controller="floating-notification"

           role="status" aria-live="polite">

        <div class="floating-notification"

             data-floating-notification-target="notification">

          <div class="floating-notification-icon">...</div>

          <div class="floating-notification-content">

            <p class="floating-notification-title">Title</p>

            <p class="floating-notification-message">Message</p>

          </div>

          <button class="floating-notification-close"

                  data-action="click->floating-notification#dismiss"

                  aria-label="Close">...</button>

        </div>

      </div>

Auto-dismiss: Default 4s | With actions 7s | data-auto-dismiss="0" to disable | data-auto-dismiss="10000" for custom duration

TOAST: Lightweight confirmation messages that appear after user actions
POSITIONING: Bottom-center, slides up from bottom edge
CLASSES: .toast .toast-container .toast-visible .toast-dismissing .toast-success .toast-error .toast-warning .toast-info .toast-icon .toast-message .toast-action .toast-close

Toasts provide quick, non-blocking confirmations (e.g., "Copied!", "Saved!", "Undo available"). Auto-dismiss after 3 seconds (6s with action), pause-on-hover supported. Dark background with semantic color via icon only.

Basic Toast

Minimal Structure: Icon + message in dark container. White text ensures readability.

Changes saved successfully

<div class="toast toast-visible">

        <i class="fa-solid fa-check toast-icon"></i>

        <span class="toast-message">Changes saved successfully</span>

      </div>

Semantic Variants

Icon Color Only: Dark background remains consistent. Add .toast-success, .toast-error, .toast-warning, or .toast-info to color the icon.

Application submitted successfully

Failed to save changes

Connection unstable — changes may not save

New version available

<div class="toast toast-success toast-visible">...</div>

      <div class="toast toast-error toast-visible">...</div>

      <div class="toast toast-warning toast-visible">...</div>

      <div class="toast toast-info toast-visible">...</div>

With Close Button

Manual Dismiss: Add .toast-close button for user-controlled dismissal. Still auto-dismisses unless disabled.

Email copied to clipboard

<div class="toast toast-visible">

        <i class="fa-solid fa-check toast-icon"></i>

        <span class="toast-message">Email copied to clipboard</span>

        <button type="button" class="toast-close" aria-label="Dismiss">

          <i class="fa-solid fa-xmark"></i>

        </button>

      </div>

With Action Button

Actionable: Add .toast-action link/button for quick actions (e.g., "Undo", "View"). Auto-dismiss extends to 6 seconds when action is present.

3 items deleted

<div class="toast toast-visible">

        <i class="fa-solid fa-trash toast-icon"></i>

        <span class="toast-message">3 items deleted</span>

        <button type="button" class="toast-action">Undo</button>

      </div>

Without Close Button

Auto-dismiss Only: Omit close button for brief confirmations that should disappear automatically.

Link copied!

<div class="toast toast-success toast-visible">

        <i class="fa-solid fa-circle-check toast-icon"></i>

        <span class="toast-message">Link copied!</span>

      </div>

Stacked Toasts

Multiple Toasts: Container uses flex-col-reverse so newer toasts appear above older ones. Each auto-dismisses independently.

Profile updated

Password changed successfully

Security settings updated

<div class="toast-container">

        <!-- Newer toasts appear above older ones -->

        <div class="toast toast-visible">...</div>

        <div class="toast toast-visible">...</div>

        <div class="toast toast-visible">...</div>

      </div>

Interactive Demo

Live Controller: Click buttons below to spawn toasts with Stimulus controller. Features auto-dismiss (3s default, 6s with action), pause-on-hover, manual dismiss via close button, and Escape key support.

Interactions: Hover to pause auto-dismiss • Click X to close • Press Escape to dismiss topmost

Duration: 3s default • 6s with action button • Disabled when data-auto-dismiss="0"

<div data-controller="toast">

        <div class="toast-container">

          <div class="toast" data-toast-target="toast" role="status" aria-live="polite">

            <i class="fa-solid fa-check toast-icon"></i>

            <span class="toast-message">Changes saved</span>

            <button type="button" class="toast-close" data-action="click->toast#dismiss">

              <i class="fa-solid fa-xmark"></i>

            </button>

          </div>

        </div>

      </div>

Accessibility

ARIA Attributes:

role="status" on toast element
aria-live="polite" announces to screen readers without interrupting
aria-label="Dismiss" on close button for icon-only context

Keyboard Support:

Escape — Dismisses the most recent toast
Close button is keyboard focusable via Tab
Action button (if present) is keyboard focusable

Motion: Animation respects prefers-reduced-motion — transitions disabled when user prefers reduced motion.