Smart Header

What is it?

Smart Header is a versatile block for inserting small amounts of text. For longer pieces of copy, you’ll want to use the core Paragraph blocks as these offer greater control.

Smart Header ’s strong point is the option to apply a shared style to multiple Smart Header blocks. Any style changes you make to one block are reflected in other blocks of the same style.

You can make a Smart Header block anyone of the six HTML heading elements, as well as several other element types.

An H1 at maximum size

An H1 at minimum size

A P element at middle size

Above are three Smart Header blocks with different settings. Note that this site styles Headings with an underline, which is why the last block doesn’t have an underline as it isn’t a Heading.

What can you use it for?

Smart Header is ideal for any small bits of text, particularly when you need to repeat a style across a page.

Things you need to know

Most styling options affect all Smart Header blocks that share a style. However, the Space Below control can be adjusted independently on each block.

You can set a range of sizes for a Smart Header block and the sizes will then automatically adjust for different screen sizes.

Got a suggestion?

Have you got a suggestion for making this block even better? Open the form below and let us know about it.

Open the suggestion form