The List Loader block is an animated list that highlights key information in an engaging way. Use it to showcase important details - whether about your company, an offer, or any other key points.
It can also serve as a transition element, smoothly redirecting users to the next step in your flow, just as our Loader Block.
🔎 If you're looking for a shorter list with the same icons and no headlines, take a look at our checklist block here. If you prefer no animations, you can also use our List block.
Update the Content
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.
Change the content of the lines and add more if needed. Choose an icon or emoji to go with your content, or upload your own image, or simply pick one from the image library.
Change the Settings
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.
Spacing
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.
Appearance
Define the number of columns shown side by side, separately for desktop and mobile views, for an optimized layout across devices. Besides, set a background color to match your design.
Visibility
Set the block’s Default Visibility to show only on mobile, desktop, or hide it completely. Alternatively, you can set up a Conditional Visibility. This lets you decide based on which rules a block should appear.
🔎 Learn more about controlling Block Visibility here.
Animation & Navigation
Enable Is animated to add motion to your list icons. Set the animation duration in seconds and choose a mode to control whether items appear one by one or all at once. Use Navigate after to define what happens when the animation ends. Check the preview to see your settings in action.
Design your 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.
🔎 Learn more in our full guide: Design Presets for Blocks
Also see Heyflow's other design options to individualize your flow and building blocks even more: