Design System Preview

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 admissions cycle is now open

Year 7 entry for 2027 is accepting applications. You can configure deadlines and requirements in the settings.

Application deadline approaching

The deadline for Year 7 applications is in 3 days. Ensure all pending reviews are completed before the cut-off.

Failed to import applicant data

The CSV file contains 12 rows with validation errors. Please correct the highlighted fields and try uploading again.

All applications processed

147 applications have been reviewed and decisions have been recorded. Offer letters are ready to send.

New feature: Automated waitlist management

Waitlisted applicants are now automatically offered places when spots become available. 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-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.

The admissions portal 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 submitted after the deadline will be placed on the waitlist automatically.

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. The portal will be unavailable during this time.

Incomplete application

This application is missing required documents. The applicant has been notified to upload them.

<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

This school accepts applications for Year 7, Year 9, and Sixth Form entry. Select the appropriate entry point when creating a new application.

Bulk import complete

Successfully imported 52 applicant records from the uploaded spreadsheet.

<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 admissions office 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 Admissions+

Get started by configuring your school profile and setting up your first admissions cycle.

<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.

Incompatible form fields detected

The following fields have validation conflicts that must be resolved before publishing:

Date of birth — format mismatch between UK (DD/MM/YYYY) and US (MM/DD/YYYY)
Phone number — missing country code prefix requirement
Postcode — regex pattern does not match the selected region format

Review the field configuration guide for help resolving these issues.

What's new in this release

Automated waitlist management with configurable rules
Bulk communication templates for offer and rejection letters
Enhanced reporting with export to PDF and Excel
Improved accessibility across all form components

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>

Small (.tw-inline-notification-sm)

The in-card banner size: tighter padding and body-xs text, for a notification that lives inside another component — an offer-status line in a person card, a warning in a drawer panel — where the page-level size would dominate the card it sits in. Distinct from .tw-inline-notification-compact, which only reduces vertical padding for one-line inline-action rows. Colour variants and the dismiss button work unchanged.

Oscar Clarke

Year 7 · September 2027 intake

Offer expires on Friday 21 August

The family has not responded since the offer was sent on 7 August.

Place accepted

Confirmed by Rachel Whitfield on 9 August 2026.

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

Collapsible (.tw-inline-notification-collapsible)

PARTS: .tw-inline-notification-collapsible | -toggle | -chevron | -body

A one-line summary bar that expands to the detail behind it — "12 updates since your last visit". The whole bar is one real <button class="tw-inline-notification-toggle"> carrying aria-expanded and aria-controls; the detail region is a .tw-collapsible-content with data-collapsible-target="content", wired by data-controller="collapsible" and data-action="click->collapsible#toggle". The chevron rotates from [aria-expanded="true"] in CSS, so do not also give it data-collapsible-target="icon" — the controller would rotate it a second time and it would point back the way it started. Start open with data-collapsible-open-value="true", aria-expanded="true" and .tw-show on the content.
Wrap the body in a tw:overflow-hidden div — the rule from docs/components/collapsible.md: the collapse animates a grid row from 0fr, and the direct child must clip, or the grid item's automatic minimum size keeps the "closed" bar permanently open. The wrapper goes outside .tw-inline-notification-body, so the body's own padding is clipped with it.

7 new Year 7 applications submitted
3 offers accepted — Amelia Hughes, Priya Raman, Tom Bradley
2 reference requests still unanswered after 14 days

1,284 records updated at 06:15 this morning. These four need a decision:

Daniel Okoro — date of birth differs from the MIS record
Priya Raman — two contacts share one email address
Tom Bradley — no home address on the MIS record
Amelia Hughes — duplicate UPN with a leaver record

<div class="tw-inline-notification tw-inline-notification-warning tw-inline-notification-collapsible" data-controller="collapsible">

        <button class="tw-inline-notification-toggle" type="button" aria-expanded="false" aria-controls="…" data-action="click->collapsible#toggle">

          <i class="tw-inline-notification-icon fa-solid fa-bell" aria-hidden="true"></i>

          <span class="tw-inline-notification-title tw:mb-0">12 updates since your last visit</span>

          <i class="tw-inline-notification-chevron fa-solid fa-chevron-down" aria-hidden="true"></i>

        </button>

        <div class="tw-collapsible-content" id="…" data-collapsible-target="content">

          <div class="tw:overflow-hidden"><div class="tw-inline-notification-body">…detail…</div></div>

        </div>

      </div>