Interactive & Overlays

These components respond to the visitor — expanding, revealing, and overlaying content on demand. They’re how you fit more into a page without overwhelming it.

Reveal in place

• Accordion / Collapse — stacked panels that expand one at a time, the classic pattern for FAQs and specs.
• Tab Variation — swap between panels of content in the same space with a row of tabs.
• Tooltip — small hints that appear on hover, perfect for icons, labels, and definitions.

Overlays & popups

• Modal / Lightbox — dialogs and image lightboxes that open over the page and dim the background.
• Popup Bar — a slim announcement bar, pinned to the top or bottom, for offers and notices.
• Popup Box — a centered popup box for newsletters, promos, or important messages.
• Preloader — a loading animation shown while the page assets finish loading.

A little goes a long way

Popups and preloaders are powerful but easy to overdo. One well-timed popup and a quick preloader feel polished; several competing overlays feel noisy.

Check the Buttons and Cards articles for other interface building blocks, or see Media for lightbox-adjacent gallery components.