Referenz

HeroML

Layout: grid & sidebar

These blocks create multi-column layouts and classic magazine or blog arrangements (scope all).

grid · cell

The grid block arranges any blocks in a grid. Each child becomes a cell; cell groups content and can span columns.

Attribute	Values	Effect
`cols`	1–6 (default 3)	fixed column count
`min`	pixels	responsive: as many columns as fit, from this minimum width
`gap`	`small` · `medium` · `large`	spacing between cells
`span` (cell)	number	cell spans multiple columns

With a fixed column count and one wide cell:

grid cols=3 gap=large
  cell span=2
    image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22300%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%237c2d12%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%3Espan%202%3C%2Ftext%3E%3C%2Fsvg%3E
  paragraph
    text: Eine schmale Spalte daneben.
  paragraph
    text: Zelle A
  paragraph
    text: Zelle B
  paragraph
    text: Zelle C

Result ↓

Eine schmale Spalte daneben.

Zelle A

Zelle B

Zelle C

With min, the column count adapts to the width — ideal for image galleries:

grid min=160 gap=medium
  image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%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%230d9488%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23134e4a%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%3E1%3C%2Ftext%3E%3C%2Fsvg%3E
  image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%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%237c2d12%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%3E2%3C%2Ftext%3E%3C%2Fsvg%3E
  image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%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%237c3aed%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234c1d95%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%3E3%3C%2Ftext%3E%3C%2Fsvg%3E
  image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%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%232563eb%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e3a8a%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%3E4%3C%2Ftext%3E%3C%2Fsvg%3E
  image src=data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22200%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%23db2777%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23831843%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%3E5%3C%2Ftext%3E%3C%2Fsvg%3E

Result ↓

Below 720px every grid collapses to one column.

with-sidebar

Splits the page into a main column and a sidebar: every child except the sidebar block forms the main column.

Attribute	Values	Effect
`side`	`left` · `right`	side of the sidebar (default `right`)
`width`	pixels	sidebar width (default 320)

Sidebar on the right, filled dynamically:

with-sidebar side=right width=280
  heading level=2
    text: Aus der Redaktion
  posts excerpt=18
  sidebar sticky
    recent-posts count=4
    category-list
    ad slot=sidebar format=rectangle

Result ↓

Aus der Redaktion

48 Stunden in Palermo

Jun 2, 2026 · Lena Vogt

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

Die neue Welle des Kaffees

May 28, 2026 · Ben Roth

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

Analog fotografieren im Piemont

May 19, 2026 · Mara Kern

Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. Absatz. …

Weiterlesen →

The same idea with side=left:

with-sidebar side=left width=240
  sidebar
    category-list
  heading level=3
    text: Hauptbereich
  paragraph
    text: Mit side=left steht die Sidebar links neben dem Inhalt.

Result ↓

Below 860px the main column and sidebar stack.

sidebar

The sidebar container. Takes any blocks — static (widget) or dynamic (recent-posts, category-list, ad).

Attribute	Values	Effect
`sticky`	flag	sidebar stays in place while scrolling

widget

A titled box for hand-written sidebar content — any blocks under a heading (attribute title).

sidebar
  widget title="Über das Magazin"
    paragraph
      text: Wir erzählen Reisegeschichten mit Ruhe und Sorgfalt — seit 2019.
  widget title="Folgen"
    paragraph
      text: Newsletter, RSS und die sozialen Kanäle.

Result ↓