Structure & content
These blocks form the page skeleton and the text building blocks. They are available in every view (scope all).
Structure blocks
site-header · site-footer
Header and footer with the wordmark or logo and the respective navigation.
| Attribute | Values | Effect |
|---|---|---|
note (footer only) | text | replaces the default copyright line |
outlet
Placeholder in the layout for the current view (home, single, …). No attributes.
section
A section with a constrained content width that frames any child blocks.
| Attribute | Values | Effect |
|---|---|---|
alt | flag | alternate (offset) background |
class | text | extra CSS class |
id | text | anchor id for jump links |
section alt
heading level=3
text: Abschnitt mit alternativem Hintergrund
paragraph
text: Das Flag „alt" hebt einen Abschnitt farblich ab.Abschnitt mit alternativem Hintergrund
Das Flag „alt" hebt einen Abschnitt farblich ab.
container · article
Plain width-constrained wrapper (container) or semantic article frame (article). Both accept class.
Content blocks
heading
A heading.
| Attribute | Values | Effect |
|---|---|---|
level | 1–6 (default 2) | heading level (h1–h6) |
text | text | the heading text |
class | text | extra CSS class |
heading level=2
text: Geschichten, die bleibenGeschichten, die bleiben
paragraph
A paragraph of plain text (attribute text) with a comfortable line length.
paragraph
text: HeroML erzeugt sauberes, semantisches HTML. Dieser Absatz zeigt den Standard-Fließtext mit angenehmer Zeilenhöhe und Zeilenlänge.HeroML erzeugt sauberes, semantisches HTML. Dieser Absatz zeigt den Standard-Fließtext mit angenehmer Zeilenhöhe und Zeilenlänge.
image
An image, optionally with a caption.
| Attribute | Values | Effect |
|---|---|---|
src (required) | URL | image source |
alt | text | alternative text (accessibility) |
caption | text | caption (renders a figure) |
width | number | fixed width in pixels |
image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22450%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ea580c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239a3412%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EBild%3C%2Ftext%3E%3C%2Fsvg%3E alt="Beispielbild" caption="Eine Bildunterschrift beschreibt das Motiv."%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%2222%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20opacity%3D%220.9%22%3EBild%3C%2Ftext%3E%3C%2Fsvg%3E)
quote
A highlighted quotation.
| Attribute | Values | Effect |
|---|---|---|
text | text | the quote text |
cite | text | source / author |
quote cite="Italo Calvino"
text: Eine Stadt besteht aus den Beziehungen zwischen den Maßen ihres Raums und den Ereignissen ihrer Vergangenheit.Eine Stadt besteht aus den Beziehungen zwischen den Maßen ihres Raums und den Ereignissen ihrer Vergangenheit.Italo Calvino
list · item
A list; the child item blocks carry the text (attribute text). The ordered attribute produces a numbered list.
list ordered
item
text: Erster Schritt
item
text: Zweiter Schritt
item
text: Dritter Schritt- Erster Schritt
- Zweiter Schritt
- Dritter Schritt
richtext · markdown · html · code · divider
Further content blocks: richtext (formatted HTML from the block editor, sanitised), markdown and html as raw blocks (see Syntax), code for monospaced code blocks and divider for a horizontal rule (<hr>).