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.
