Interactive
11 blocks · Accordions, tabs, modals, dropdowns, carousels, hover effects, and animated entrances — reusable component patterns for dynamic pages.
Accordion1
Collapsible FAQ with native details/summary accordion behavior. Single-open by default.
Animation1
Three feature cards with staggered scroll-triggered fade-up entrance animations.
Carousel1
Auto-scrolling image carousel with navigation 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
Infinitely scrolling logo strip. Continuous horizontal scroll with no pause.
Modal3
Click-triggered modal with backdrop overlay, content panel, and close behavior.
Delay-triggered modal that appears once per session with an email signup form.
Accent-colored CTA card whose button opens a centered contact modal with a name/email/message form. Great for bento grids, footers, and prefooter bands.
Tabs1
Tabbed interface with 3 panels. Click a tab to show its content and hide the others.
Browse other blocks
Same library cards — preview live and grab structure from any block.
Features three columns
Centered heading with three columns, each showing an icon, title, body text, and link.
Hero split
Two-column hero with eyebrow, heading, description, and CTAs on the left. Image on the right.
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.
Copy and image split
Two-column section with heading and body text on one side, rounded cover image on the other.
Hero photo backdrop
Full-height hero with a cover photo, theme-tinted overlay, centered headline, subtitle, and CTAs.
Hero centered
Clean centered hero with eyebrow, large heading, description, and two CTA buttons.
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.