Our Headline Block allows you to fully control your content.
This block isn’t intended to be used for full paragraphs of text. Instead, you should use the standard Paragraph block for that.
The Headline Block is ideal for headings, call to actions or one line features.
Element
The Element option allows you to choose what kind of text your headline is going to be.
As of right now, it’s not possible to use a span element in the block editor.
Alignment
The alignment icons allow you to left, center or right-align your headline.
Typography
The typography section uses our Typography component, which you can learn about below.
Colors
The following color options are available in the Headline Block.
To learn more about our Color Picker Component, see the article below.
Spacing
The Headline Block allows you to edit the padding, margin and border size of the element.
You can also set the Headline to “Inline Width”, which will make it so the background color and border only spans the width of the text. However, if you add two inline elements back-to-back, they will show up next to each other instead of stacking.
To learn more about our Dimensions Component, see the article below.
Icon
You can add an icon to your headline using our Icon picker component.
Besides the icon picker, our Headline block has more options specific to the Headline itself.
Icon Color
The icon color option can be found in the “Colors” panel with the other color options. This option uses our color picker component.
Remove Text
Toggling this option will remove the text from your Headline block. This is useful if you want to display an SVG icon only with no text.
Toggling this option will remove the Icon Location, Icon Alignment and Padding options, as they no longer apply. Overall padding can be adjusted in the Spacing panel.
An ARIA Label option will also display, which allows you to add a description of the icon for screen readers.
Icon Location
The icon location option allows you to place the icon inline (next to your headline) or above your headline.
Icon Alignment
The icon alignment option is only available when using the inline location. It allows you to set the vertical alignment of the icon (top, center or bottom).
If your icon is set to above the headline, the alignment will inherit the headline horizontal alignment.
Padding
You can set the padding of the icon element using our Dimensions component.
Icon Size
The icon size is set to 1 by default. It uses the em unit, which means it’s relative to the headline font size. 1 means the icon will use the same font size as the headline. You can also switch it to use px units. You can increase or decrease this as needed.