Text blocks
Heading block
Headings are used to structure your content. When adding this block select the appropriate heading level. In article templates you can use h2
up to h6
. On the homepage a h1
can also be used.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Headings are used in a specific order, on article templates the h1
is reserved for the page title, so you will always start with adding a h2
. If the structure of the text requires further subdivision then use a h3
.
Don’t skip levels, for example a h4
after a h2
. Don’t use headings for ‘design’ reasons or in full caps because you might think this text is extra important and really needs to be read, this is just bad practice. A proper page structure helps readers and search engines to understand your page.
Text block
This is the standard WYSIWYG editor field for inline content with formatting for:
bold, italic, code
link and email.
Superscript and subscript
At the moment of writing, this block doesn’t support the use of subscript or superscript. Untill supported, I’ve added these options with a text replacement:
- Use a tilde ~ just before a character for subscript: H2O
- Use a caret ^ for superscript: 100m2
List block
A WYSIWYG editor field for ordered and unordered lists. When a list is placed after a paragraph the whitespace above the list can be removed and an expanded line height can be used.
Unordered list
After a paragraph of text one line of white space is added, the list underneath has this white space removed which is an option in the block settings.
- An unordered list item
- An unordered list item
- Use the tab key to add a nested unordered list
- Use the tab key to add a nested unordered list
- An unordered list item
Ordered list
The list items of this list have extra margin, before and after, applied:
- An ordered list item.
- An ordered list item.
- Use the tab key to add a nested ordered list.
- Use the tab key to add a nested ordered list.
- An unordered list item.
Quote block
Line block
This block creates a hr
element or horizontal rule and represents a thematic break. For example a change in a story, or a transition to another topic:
Code block
h2 {
border-top: 4px solid var(--color);
}