The Accordion block is perfect for organizing content in a clean, user-friendly way. It allows you to hide detailed information behind expandable rows, so visitors can choose what they want to read without being overwhelmed.

After clicking on a building block, you’ll find the Content section on the right. This is where you add and edit the block’s main elements.

Each top row stands for the content your users see right away. The bottom row is the hidden content, your user can view after clicking on the field.

You can add as many lines of content as you like and set some of them to open by default.

After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s options, appearance, and behavior to tailor it perfectly to your flow.

Control key settings for the block, including choosing between two icons or hiding it and allowing multiple rows to be expanded at the same time.

Aditionally, you can disable animations, to ensure your accordion items expand or collapse without an animation.

Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.

Set the block’s visibility to show only on mobile, desktop, or hide it completely. You can also decide how many columns appear per row on mobile and desktop devices.

Additionally, you can select a background color for the block.

After clicking on a building block, you’ll find the Design section on the right. You can quickly apply a preset style tailored to that block type. Also, customize colors, fonts, and spacing to match your flow.

When you apply a design to one block type, it automatically updates all blocks of that type across your flow. This keeps your design consistent, clean, and easy to maintain without styling each block manually.

Also see Heyflow's other design options to individualize your flow and building blocks even more: