Our List block is a great tool to present information in a meaningful, appealing way. It's the perfect tool to point out key aspects, may it be about your company or the offer you're presenting in your flow.
🔎 If you're looking for a shorter list with the same icons and no headlines, take a look at our checklist block here.
Adding the list block
In the Blocks tab, drag the list block into your heyflow
Enter your information with a headline and explanatory text, or use variables
When you select the text, a toolbar will appear that offers different formatting options and links. You can e.g. select the text color or format (bold, underline, italic).
Adjust the settings such as amount of columns and add icons or even your own pictures via the image library.
Just publish your heyflow and you’re good to go!
Designing the List Block
There are multiple ways to adjust the block even more than described above. Just head to the Design tab and start working on the Presets. In some plans, you can dive even deeper into all spheres of design & look. When working on the presets, you can head to the Styles section on top and start editing every little detail of each section.
Edit Options
Spacing
Spacing
Width: Here you can adjust the maximum spread of the block and choose between S, M, L and maximum width.
Top, Bottom, Left, Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.
Appearance
Appearance
Visibility: Here you can choose whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background color: You can select a colour to be used as the background for the block.
Columns (desktop): Choose the amount of columns displayed next to each other on your desktop.
Columns (mobile): Choose the amount of columns displayed next to each other on your mobile device.
Animation & Navigation
Animation & Navigation
Animate: Activate, if you want to add animation to to the icons of your list.
Animated duration (in seconds): Define the length of the animation.
Animation mode: Choose the mode of your animation, to define, if the different items of your list should be displayed one by one or all at once.
Navigation when done: Set up a navigation, once the animation finished.
Preview: Shows a preview of your settings.