POPUP: Modal dialog for essential information or actions
TYPES: Rich Content (default) | Informative (.popup-seamless) | Minimal (.popup-minimal)
ALIGNMENT: Left (default) | Center (.popup-center)
SIZES: Small (.popup-sm) | Default | Large (.popup-lg) | Extra Large (.popup-xl)
Popups block user interaction until dismissed. Use for confirmations, settings panels, and informational dialogs. Supports layered stacking with dimming and configurable dismiss modes.
Rich Content: Header has a visible bottom border separating it from the body. Body scrolls when content exceeds viewport. Footer stays fixed at the bottom with no top border. Best for settings panels, table configurations, and form inputs.
Configure visible columns and their order
Select which columns to display in the applicant list view. Drag to reorder.
<div class="tw-popup-panel" role="dialog" aria-modal="true"> <div class="tw-popup-header">...</div> <div class="tw-popup-body">...</div> <div class="tw-popup-footer">...</div></div>
Informative: Header flows seamlessly into the body with no border. Best for confirmation dialogs with explanatory text and information popups.
The admissions scoring algorithm takes multiple factors into account when evaluating each application. Understanding these factors helps ensure fair and consistent decision-making across all applicants.
Academic Performance — Prior school reports and assessment results are weighted based on the entry year requirements. For Year 7 entry, Key Stage 2 results carry the highest weight.
Interview Scores — Both individual and group interview scores are normalised across different interviewers to reduce bias. The system tracks inter-rater reliability automatically.
Special Considerations — Sibling priority, bursary eligibility, and catchment area are applied as separate flags rather than modifying the base score, ensuring transparency in the final ranking.
<div class="tw-popup-panel popup-seamless">...</div>
Minimal: No header at all — body content starts immediately with extra top padding. Best for simple confirmations with an icon, success messages, and yes/no prompts.
Application Submitted!
The application for Year 7 entry has been successfully submitted. The family will receive a confirmation email shortly.
<div class="tw-popup-panel tw-popup-minimal tw-popup-center tw-popup-sm">...</div>
Center: Centers text in header, body, and footer. Combine with any type. Best for confirmation dialogs and simple prompts.
Are you sure you want to permanently delete the application for James Thompson? This action cannot be undone and all associated documents will be removed.
<div class="tw-popup-panel popup-center">...</div>
Sizes: .popup-sm (400px) |
Default (520px) |
.popup-lg (680px) |
.popup-xl (860px).
All sizes are responsive and shrink gracefully on mobile.
This popup is 400px wide. Ideal for simple confirmations and quick prompts.
This popup is 520px wide. The standard size for most use cases including forms and settings.
This popup is 680px wide. Good for rich content, multi-column forms, and detailed settings.
This popup is 860px wide. Suitable for complex settings panels, large data tables, and multi-step flows.
<div class="tw-popup-panel popup-sm"> |
<div class="tw-popup-panel"> |
<div class="tw-popup-panel popup-lg"> |
<div class="tw-popup-panel popup-xl">
Scrollable: When body content exceeds the viewport, only the body scrolls. Header and footer remain fixed in place.
Please read carefully before proceeding
All personal data collected through the admissions process is handled in accordance with the Data Protection Act 2018 and UK GDPR. The school acts as a data controller and processes applicant information solely for the purpose of managing admissions decisions.
Applications must be submitted by the published deadline. Late applications may be considered at the school's discretion but will not be given priority over timely submissions. All information provided must be accurate and complete.
The school reserves the right to assess applicants through interviews, entrance examinations, or portfolio reviews as appropriate. Selection criteria are published annually and applied consistently to all applicants.
Offers of places are conditional upon acceptance within the specified timeframe. Failure to respond by the deadline may result in the offer being withdrawn and the place offered to the next applicant on the waiting list.
Where the school is oversubscribed, a waiting list will be maintained until the end of the autumn term. Position on the waiting list is determined by the admissions criteria and may change as new applications are received.
Parents have the right to appeal against a decision to refuse admission. Appeals are heard by an independent panel and the school will provide information about the appeals process with any refusal notification.
A non-refundable registration fee is required at the time of application. Upon acceptance of a place, a deposit is payable which will be credited against the first term's fees. Full fee schedules are available from the admissions office.
No Close Button: The close button (.popup-close) is optional.
Omit it when the user must make an explicit choice from the footer actions.
The popup can still be closed via overlay click or Escape key.
You have unsaved changes. Would you like to save before leaving this page?
Stacking: When a second popup opens, the first popup is dimmed
(.popup-dimmed) and the new overlay is transparent to avoid double-darkening.
Closing the top popup un-dims the one underneath. Focus is trapped in the topmost popup.
Configure admissions for Year 7 entry 2026
Manage the settings for this admissions cycle. Changes will apply to all new applications.
This will reset all admissions settings to their default values. Are you sure you want to continue?
Dismiss Mode: Controls what happens when the overlay is clicked or Escape is pressed.
data-popup-dismiss-mode-value="single" (default) — Closes only the topmost popup.
data-popup-dismiss-mode-value="all" — Closes all open popups at once.
Click the overlay or press Escape to close only this popup. This is the default behavior.
With data-popup-dismiss-mode-value="all", clicking the overlay or pressing Escape closes all open popups at once.
REAL-WORLD: Email Processor — Complex two-column popup-xl
COMPOSES: Popup | Form | Tag Input | RTE | Badge | Table | Tooltip | Button
Demonstrates how popup accommodates dense, multi-section scrollable content. Composes form controls, tag input, rich text editor, badges, toggles, table, and tooltips inside a single popup-xl panel.
To optionally import text from an email template, please choose a template from the list below and click on 'Add Template':
| NAME | |
|---|---|
| Sarah Johnson | sarah.johnson@email.com |
By using personalisation tokens, you can mail merge personalised content to your recipients.
Dear {{CONTACT_FIRST_NAME}},
Thank you for your interest in our Year 7 entry programme. We are pleased to confirm that we have received the enquiry for {{ENQUIRY_CHILD_FIRST_NAME}}.
Archive test
<div class="tw-popup-panel popup-xl"> <div class="tw-popup-header">...</div> <div class="tw-popup-body"> <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-6"> <div>...left column...</div> <div class="tw:border-l tw:border-neutral-200 tw:pl-6">...right column...</div> </div> </div> <div class="tw-popup-footer">...</div></div>
Accessibility: Popups use role="dialog" with aria-modal="true".
Focus is trapped inside the popup — Tab cycles through focusable elements and wraps at boundaries.
Escape closes the popup. Focus returns to the trigger element on close.
Use aria-labelledby to link to the title, or aria-label for minimal popups without a visible title.
| Key | Action |
|---|---|
Escape |
Closes the topmost popup (or all, based on dismiss mode) |
Tab |
Cycles forward through focusable elements within the popup |
Shift + Tab |
Cycles backward through focusable elements within the popup |