On this page

Overview
Intro
Quote
Highlight
Key takeaways
List
Callout
Divider
Code
Terminal
Image

Blocks: text and structure

Ten blocks for the reading flow of longer pages and blog posts: intro, quote, highlight, key takeaways, lists, callouts, divider, code, terminal and image. All settings are listed for each of them.

Overview

Blocks for the reading flow: intro, quote, highlight, lists, notes, dividers, code and images.

In the editor you find these blocks under "Text & structure". They do not open a section of their own but attach to the section above — so they visually belong to the heading they sit under.

The same markup works in all of their text fields: ==accent==, **bold**, *italic*, `code` and [link](/target/). An empty line starts a new paragraph.

Intro `intro`

Highlighted introductory text at the start of a page or post.

In the editor: Text & structure
Page structure: Inline
Settings: 1

An opening paragraph that frames the topic in two or three sentences and leads into the text.

The intro is set apart from the rest of the text.

All settings of the Intro block
Setting	Type	Required	Default	Meaning
`text`	Text	Required	no default	The introductory text; Markdown is allowed.

On top of these come the common settings _style.

Quote `quote`

Highlighted quote with an attribution.

In the editor: Text & structure
Page structure: Inline
Settings: 2

A concise quotation that brings a statement to the point.

Source / person

Quote with attribution. Both are placeholders — only enter quotations that were really said that way.

All settings of the Quote block
Setting	Type	Required	Default	Meaning
`text`	Text	Required	no default	The wording of the quote.
`cite`	Text	optional	no default	Who or what is being quoted.

On top of these come the common settings _style.

Highlight `highlight`

Short, colour-highlighted text block for an important statement.

In the editor: Text & structure
Page structure: Inline
Settings: 2

Important

A highlighted note with particular weight.

The highlight lifts a single thought out of the body text.

All settings of the Highlight block
Setting	Type	Required	Default	Meaning
`text`	Text	Required	no default	The highlighted text.
`title`	Text	optional	no default	Heading above the text.

On top of these come the common settings _style.

Key takeaways `key-takeaways`

Box with the most important points in brief, mainly for blog posts.

In the editor: Text & structure
Page structure: Inline
Settings: 2

The essentials

First key point.
Second key point.
Third key point.

Key takeaways summarise a longer text at the start.

All settings of the Key takeaways block
Setting	Type	Required	Default	Meaning
`title`	Text	optional	no default	Heading above the block.
`items`	List of texts	optional	empty	The key takeaways in order.

On top of these come the common settings _style.

List `list`

Enumeration as bullets, numbers or a checklist.

As a numbered or checklist with at least three points it additionally produces a machine-readable list for search engines.

In the editor: Text & structure
Page structure: Inline
Settings: 2

First point
Second point
Third point

The same list is also available with bullets or numbers via "style".

All settings of the List block
Setting	Type	Required	Default	Meaning
`items`	List of texts	Required	empty	The lines of the list in order.
`style`	Choice	optional	`unordered`	Kind of list: unordered (bullets), ordered (numbers) or checklist (ticks). Possible values: unordered, ordered, checklist

On top of these come the common settings _style.

Callout `callout`

Coloured box for notes, tips or warnings.

In the editor: Text & structure
Page structure: Inline
Settings: 3

Note

A note in a coloured box.

The callout in the "info" variant. "variant" also offers tip, warning, danger and success.

All settings of the Callout block
Setting	Type	Required	Default	Meaning
`text`	Text	Required	no default	The text inside the box; Markdown is allowed.
`variant`	Choice	optional	`info`	Kind of note: info, tip, warning, danger or success; it determines colour and icon. Possible values: info, tip, warning, danger, success
`title`	Text	optional	no default	Heading inside the box.

On top of these come the common settings _style.

Divider `divider`

Horizontal line between two sections.

The divider carries no text. The editor points this out in the inspector; line, width and spacing are still available.

In the editor: Text & structure
Page structure: Inline
Settings: 2

A divider in the "gradient" style at the "wide" width.

All settings of the Divider block
Setting	Type	Required	Default	Meaning
`style`	Choice	optional	`gradient` (rendering)	Line style: gradient, solid, dashed or dotted. Possible values: gradient, solid, dashed, dotted
`width`	Choice	optional	`full` (rendering)	Width of the line: full, wide or narrow. Possible values: full, wide, narrow

On top of these come the common settings _style.

Code `code`

Code block with a file header for technical content.

In the editor: Text & structure
Page structure: Inline
Settings: 3

start.sh

echo "Hello world"

A code block with file name and language in its header.

All settings of the Code block
Setting	Type	Required	Default	Meaning
`code`	Text	Required	no default	The source code.
`language`	Text	optional	empty	Language of the source code; it is shown in the header of the block.
`filename`	Text	optional	no default	File name in the header of the block.

On top of these come the common settings _style.

Terminal `terminal`

Rendering of commands and their output like in a command line.

In the editor: Text & structure
Page structure: Inline
Settings: 4

Terminal

$ npm run build

done in 2.4 s

Command and output in the appearance of a terminal.

All settings of the Terminal block
Setting	Type	Required	Default	Meaning
`commands`	Entries (text or object)	Required	empty	The lines; either a plain command as text or an entry with output.
`commands[].prompt`	Text	optional	no default	Characters shown before the command.
`commands[].command`	Text	Required	no default	The command itself.
`commands[].output`	Text	optional	no default	The output below the command.

On top of these come the common settings _style.

Image `image`

Single image with an optional caption.

The alternative text is required: it describes the image for people who cannot see it. If the image sits at a full address, an image statement for search engines is produced from it as well.

In the editor: Text & structure
Page structure: Inline
Settings: 3

All settings of the Image block
Setting	Type	Required	Default	Meaning
`src`	Text	Required	no default	Address of the image file.
`alt`	Text	Required	no default	Alternative text describing the image; it is required for accessibility.
`caption`	Text	optional	no default	Short caption below the content.

On top of these come the common settings _style.

Overview

Intro intro

Quote quote

Highlight highlight

Key takeaways key-takeaways

The essentials

List list

Callout callout

Divider divider

Code code

Terminal terminal

Image image

Intro `intro`

Quote `quote`

Highlight `highlight`

Key takeaways `key-takeaways`

List `list`

Callout `callout`

Divider `divider`

Code `code`

Terminal `terminal`

Image `image`