Interactive
11 blocks · Accordions, tabs, modals, dropdowns, carousels, hover effects, and animated entrances — reusable component patterns for dynamic pages.
Accordion1
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
Three feature cards with staggered scroll-triggered fade-up entrance animations.
Carousel1
Image slideshow that shows one photo at a time, with previous and next arrows and dot indicators.
Consent1
Fixed bottom bar that auto-shows on first page load. Persists accepted/rejected state in localStorage. Shows only once per visitor.
Dropdown1
CSS-first click dropdown with trigger button and option panel. Zero JavaScript required.
Hover1
Card with hover lift animation. Floats up on hover, settles on release.
Marquee1
Logo strip that scrolls sideways in a seamless loop and pauses on hover. Logos sit grey and faded until hovered.
Modal3
Click-triggered modal with backdrop overlay, content panel, and close behavior.
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.
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
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.
Hero split
Two-column hero with eyebrow, heading, description, and CTAs on the left. Image on the right.
Features three columns
Centered heading with three columns, each showing an icon, title, body text, and link.
Simple CTA
Centered call-to-action on an accent background with heading, description, and buttons.
Footer multi-column
Grid footer with brand blurb and multiple link columns. Copyright and social links at the bottom.
Navigation bar
Standard header with logo, nav links, primary CTA, and a mobile hamburger menu.
Testimonial cards
Two-column grid of testimonial cards with quote, photo avatar, name, and role.
Hero centered
Clean centered hero with eyebrow, large heading, description, and two CTA buttons.
Hero photo backdrop
Full-height hero with a cover photo, theme-tinted overlay, centered headline, subtitle, and CTAs.
Copy and image split
Two-column section with heading and body text on one side, rounded cover image on the other.
Hero dark background
Dark background hero with eyebrow, centered heading, description, and CTA buttons.
FAQ two columns
Six Q&As laid out in two columns with divider rows. Includes eyebrow, heading, and intro.
Image with story
Photo on the left, eyebrow, headline, body copy, and CTA on the right.