If you want to display elements side by side, you can use the container block. This block is often used with input blocks or for building landing pages, since it can help categorize sections on your page.

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.

Select the outer width of the container and the width of the inner element. Note that the preview may be displayed smaller than selected here. Define whether the content of the container is displayed on the left, right or in the centre.

Define the distance to the top, right, bottom and left edge of this block.

Adjust spacing to modify distances for each edge of the container and the inner element(s).

Next preview your changes to ensure the spacing meets your design needs. Proper margin and padding adjustment helps create cleaner, more visually appealing designs by controlling the space between elements.

Determine the vertical or horizontal direction of the blocks within the container, both for desktop and for mobile view. Align the block placement of the inner elements in relation to the edges of the container.

Also determine the gap or distance between the individual elements inside the container using the exact number of pixels.

Define the distribution of elements in the container using the arrangement settings. If the distribution of the columns is set to 0, you can adjust the horizontal alignment using the justify options.

Set the block’s visibility to show only on mobile, desktop, or hide it completely. Additionally, you can select a background color or even a background image for the block. By choosing a style variant, you can make initial design decisions. You can adjust the styles individually in the design tab.

After clicking on a building block, you’ll find the Design section on the right. You can quickly apply changes to the different styles by adjusting the border and other elements.

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: