The widget library for Squarespace is here Learn more

Brutalist Accordion Process - Dark Mode Interaction

Make a bold statement with the Brutalist Accordion Process widget. Inspired by the "Technical Brutalism" design trend popularized by top digital agencies and Awwwards winners, this component turns a standard process list into a high-impact interactive experience.

Designed specifically to avoid the pitfalls of position: sticky in iframe-based editors (like Elementor, Webflow, or custom CMS previews), this widget uses a robust Vertical Accordion pattern. This ensures 100% compatibility across all viewing environments while maintaining that premium, "locked-in" feel.

The aesthetic is unapologetically modern: a deep Jet Black background (#111111) provides high contrast for the crisp white typography and Acid Green accents (#CCFF00). When a user clicks a step, the panel expands smoothly to reveal rich content and a large, cinematic image, keeping the user focused on one concept at a time.

Key Features:

  • Iframe-Safe Interaction: Uses CSS max-height transitions instead of sticky positioning, ensuring perfect functionality in all website builders and preview modes.
  • Awwwards Aesthetic: Features a "Technical Brutalist" look with monospaced numbers, sharp borders, and high-contrast neon accents.
  • Rich Text Support: The description area supports complex formatting (bullet points, bold text, multiple paragraphs) via data-richtext-editable.
  • Auto-Numbering Logic: JavaScript automatically assigns 01, 02, 03 to steps, so you never have to manually update numbers when reordering.
  • Smart Accordion Behavior: Automatically closes other panels when a new one is opened, keeping the interface clean and focused.
  • Responsive Design: Stacks perfectly on mobile with adjusted tap targets and font sizes for optimal usability.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.