Text

Description

The Text block is for adding rich text content to your designs.

Headline block vs Text block

The Headline block is a variant of the Text block, that is used specifically for adding H1 to H6 Headings. Text and Headline blocks will transform to the relevant block depending on the chosen element tag.

Toolbar

The Text block has the following toolbar options.

Add to Container

Add the selected blocks inside a new Container Block

Choose Tag Name P

Choose a HTML Element Tag Name for the currently selected Text block. The options to choose from include: Additional HTML Tag Names can be selected for all blocks from the block settings.

Open Dynamic Tags

This action opens the Dynamic Tags settings for the currently selected block. The resulting Dynamic Tag will be inserted where the current cursor position or highlight text is when the panel was first opened. Preview and Edit Toggle If a Block has a Dynamic Tag or Tags inserted then the toolbar will display a Preview … Read more

Block Settings

Icon

Inline SVG Icons can be added to Text, Headline and Button blocks. You can choose from a list of predefined Icons or add SVG HTML for custom icons.

Icon Pro

With GenerateBlocks Pro you can create your own custom icon libraries using the Asset Library feature.

Icon settings

The Icon block settings are displayed once an icon has been selected. These settings are shortcuts for settings the relevant block Styles. More options can be found in the Styles tab.

Icon Color

A shortcut option to set SVG Icons color styles.

It should be noted that the Icon Color sets the Typography > Color style. And this requires the SVG HTML to contain a relevant fill or stroke attribute that is set to currentColor

Icon Location

Choose whether to insert the SVG Icon:

Before the text

An Example Text or Headline Block with an Icon before

After the text

An Example Text or Headline Block with an Icon after

Note: the position of the icon is set within the blocks HTML.

Icon Display – show the icon by itself

Selecting this will remove the text content and just display the icon.

ARIA Label

Give the icon an HTML aria-label attribute for improved accessibility.

Styles for Icons

When an Icon is added to the block; GenerateBlocks will set some basic styles. By default the layout will look like this:

An Example Text or Headline Block with an Icon

Open the Styles tab of the block to see the Layout

The Layout settings are:

Display = Inline Flex

Alignment = Center

Column Gap = 0.5em

Position the Icon above the text

An Example Text or Headline Block with an Icon

Adjust the Layout Settings to:

Flex Direction = Column

Alignment = Left ( Flex Start )

Row Gap = a value of your choosing

Change the size of the Icon

By default the Icon will inherit its size from the blocks font size.
To independently change the Icon Size or other styles we begin by selecting the Icon selector in the blocks styles

With the Icon selector selected, any style changes you make will apply specifically to the icon.

Now change the Typography > Font Size

In more advanced cases the Sizing styles can be used to set the icons Width and Height indpendently.