Interactive

11 blocks · Accordions, tabs, modals, dropdowns, carousels, hover effects, and animated entrances — reusable component patterns for dynamic pages.

Accordion1

Accordion FAQ

Collapsible FAQ built on native details/summary elements, so it opens and closes with no JavaScript. Only one answer is open at a time.

Animation1

Animated cards row

Three feature cards with staggered scroll-triggered fade-up entrance animations.

Carousel1

Image carousel

Image slideshow that shows one photo at a time, with previous and next arrows and dot indicators.

Consent1

Cookie consent banner

Fixed bottom bar that auto-shows on first page load. Persists accepted/rejected state in localStorage. Shows only once per visitor.

Dropdown1

Dropdown menu

CSS-first click dropdown with trigger button and option panel. Zero JavaScript required.

Hover1

Hover lift card

Card with hover lift animation. Floats up on hover, settles on release.

Marquee1

Logo marquee

Logo strip that scrolls sideways in a seamless loop and pauses on hover. Logos sit grey and faded until hovered.

Modal3

Modal dialog

Click-triggered modal with backdrop overlay, content panel, and close behavior.

Newsletter popup modal

Popup that opens once per visitor when the page loads, with an email signup form. Closing it is remembered, so it doesn't come back.

Contact CTA with modal form

Accent-coloured CTA card whose button opens a centred contact modal with a name, email and message form. Fits bento grids, footers and pre-footer bands.

Tabs1

Tabs content switcher

Tabbed interface with 3 panels. Click a tab to show its content and hide the others; the active tab is underlined in the primary colour.

Browse other blocks

Same library cards — preview live and grab structure from any block.

View full library