Headline Icon Alignment

These options require GenerateBlocks 1.7.

Starting in GenerateBlocks 1.7, we have introduced comprehensive flexbox options in the Layout component. This allows us to remove the icon position options from the Icon component of the Headline block.

This change provides users with more control over their designs and allows for greater creativity by revealing more possibilities.

Icon positions

icon on the left

This is the default layout of a Headline with an icon. You don’t need to do any specific settings.

icon on the right

Select the Headline block and set:

  • Direction: row-reverse (row + );
  • Justify content: flex-end;

You can also set a value for the Column gap to add space between the text and the icon.

icon on the top left

Select the Headline block and set:

  • Direction: column;
  • Align items: flex-start;

You can also set a value for the Row gap to add space between the text and the icon.

icon on the top center

Select the Headline block and set:

  • Direction: column;
  • Align items: center;

You can also set a value for the Row gap to add space between the text and the icon.

icon on the top right

Select the Headline block and set:

  • Direction: column;
  • Align items: flex-end;

You can also set a value for the Row gap to add space between the text and the icon.

icon on the bottom right

Select the Headline block and set:

  • Direction: column-reverse (column + );
  • Align items: flex-end;

You can also set a value for the Row gap to add space between the text and the icon.

icon on the bottom center

Select the Headline block and set:

  • Direction: column-reverse (column + );
  • Align items: center;

You can also set a value for the Row gap to add space between the text and the icon.

icon on the bottom left

Select the Headline block and set:

  • Direction: column-reverse (column + );
  • Align items: flex-start;

You can also set a value for the Row gap to add space between the text and the icon.