PopupFrame
Variables: id, class, hidden, dialog, modal, labelledBy, describedBy, ariaLabel, overlay
Slots: default
Design reference
Pop-ups that sort people, not bug them.
The popup system now lives as Astro components with prop variables and named slots, in
src/components/popups/. The examples below are rendered through those
components, so the reference page shows the same API that can be used across the Lead
Caravan site.
- Intent before interruption. No box, overlay, panel, or note shows the moment the page loads. The top banner is the only one allowed to do that.
- One job per component. Boxes ask for a free look. Panels point at a next step. Small notes confirm what happened. Banners handle cookies or site-wide news.
- Slots carry the custom parts. Each page owns its own boxes, buttons, and words. The shape and styles stay shared.
- 01 Full-screen audit overlay
PopupFrame + PopupDialog variant=fullscreen - 02 Qualified lead modal
PopupFrame + PopupDialog formAction - 03 Side panel prompt
PopupPanel - 04 Toast stack
PopupToastStack + PopupToast - 05 Cookie consent banner
PopupDialog class=popup-consent - 06 Announcement banner
PopupBanner placement=top - 07 Sticky CTA banner
PopupBanner placement=bottom
Component API
Settings shape the box. Slots hold the words.
PopupDialog
Variables: id, variant, as, class, title, titleClass, kicker, description, closeLabel, dismissible, hidden, formAction, formMethod, inert
Slots: default, fields, actions, consent, support
PopupPanel
Variables: id, class, title, kicker, description, closeLabel, hidden, inert
Slots: default, actions
PopupToastStack / PopupToast
Variables: id, class, hidden, live, atomic, role, title, message, tone, closeLabel, ariaLabel, alert, inert
Slots: toast default content
PopupBanner
Variables: id, class, placement, hidden, closeLabel, role, ariaLabel, inert
Slots: default, actions
Live demo
The one sample on this page that really works.
Every pattern below is a static reference: its close button, decline link, and consent choices look right but do nothing, because a dead control is worse than no control. This one is wired. Open it and tab through it — focus moves into the dialog, Tab and Shift+Tab stay trapped inside it, Escape and a backdrop click dismiss it, and focus returns to the button below when it closes.
Live demo
Want the list of where you lose leads?
Try it. Tab moves through the email box, the website box, the close button, and the two buttons below, and never leaves the box. Esc and a click outside close it too.
Full-screen audit overlay
A full-screen offer with one clear path. Ask for a free look, or keep reading. It sells the work, not a vague mailing list.
Show it only after real interest, like a 60% scroll or a second visit. Never the moment the page loads. Once per person, per push.
Static specimen — controls inert; see the live demo above.
Qualified audit
Make the next two weeks bring you real calls.
We look at your page, your follow-up, your calendar, and your CRM hand-off. Those turn interest into booked calls. You leave with the first fixes, in order of what helps most.
Qualified lead modal
A small box that asks for details. The words make clear that we look at lead paths and booking.
Only when they go to leave, or after a slow scroll. Esc, a click outside, and the close button all shut it and remember that — see the live demo above for that trap, Esc, and backdrop behavior working for real; this static specimen's controls are inert.
The close button does nothing here. The send button is real and needs no JavaScript. See the live demo above for how it really behaves.
Side panel prompt
A panel on the right with nothing dimmed behind it. It points at the next step and lets you keep using the page.
Slide it in after something useful happens, like finishing a quiz, getting a number, or reading half a guide. Then leave it shut for that visit.
Static specimen — controls inert; see the live demo above.
Toast stack
Short notes that say what just happened. They should never carry the main pitch or ask you to fill in a form.
Announce good news gently and only shout for errors. Fade them out after enough time to read, and always keep a close button.
Static specimen — controls inert; see the live demo above.
Audit request sent
We have your website and will reply with next steps.
Slot held for 10 minutes
Answer a few questions to lock in your time.
Calendar unavailable
Send it in and we will come back with times.
Cookie consent banner
A bottom banner that matches the real cookie note. The parts the site needs keep working. Ad tags wait until you say yes.
It blocks nothing. Both choices are saved on your device through window.__setConsent.
Static specimen — controls inert; see the live demo above.
Announcement banner
A one-line banner at the top. It shows right away without hiding the header or pushing the page around.
It does not move. Once you close it, it stays closed across pages while that push is running.
Static specimen — controls inert; see the live demo above.
Sticky CTA banner
A reminder at the bottom edge with one next step. It only helps when that same button is not already on screen.
Show it once the top button scrolls away, and hide it near the footer so it never fights the rest of the page.
Static specimen — controls inert; see the live demo above.
Already shipped