A-One Design System

INLINE NOTIFICATION: Page-level notifications for system status, warnings, errors, successes, and highlights
VARIANTS: info | warning | error | success | highlight
CLASSES: .tw-inline-notification | .tw-inline-notification-{variant} | .tw-inline-notification-icon | .tw-inline-notification-content | .tw-inline-notification-title | .tw-inline-notification-message | .tw-inline-notification-actions | .tw-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 .tw-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="tw-inline-notification tw-inline-notification-info" role="status">

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

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

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

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

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

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

          </div>

        </div>

        <button class="tw-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="tw-inline-notification tw-inline-notification-info" role="status">

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

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

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

        </div>

        <button class="tw-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="tw-inline-notification tw-inline-notification-info">

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

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

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

        </div>

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

      </div>

Without Icon

No Icon: The icon element is optional. Omit .tw-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="tw-inline-notification tw-inline-notification-info">

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

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

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

        </div>

        <button class="tw-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="tw-inline-notification tw-inline-notification-info">

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

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

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

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

        </div>

        <button class="tw-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="tw-inline-notification tw-inline-notification-warning" role="alert">

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

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

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

          <p class="tw-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 .tw-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="tw-inline-notification tw-inline-notification-error">...</div>

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

        <div class="tw-inline-notification tw-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="tw-inline-notification tw-inline-notification-info"

           data-controller="inline-notification"

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

           role="status">

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

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

        <button class="tw-inline-notification-close"

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

                aria-label="Close notification">

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

        </button>

      </div>