Referenz

HeroML

Layout: Grid & Sidebar

Mit diesen Blöcken entstehen mehrspaltige Layouts und klassische Magazin- oder Blog-Anordnungen (Scope all).

grid · cell

Der grid-Block ordnet beliebige Blöcke in einem Raster an. Jedes Kind wird zu einer Zelle; cell gruppiert Inhalte und kann Spalten überspannen.

Attribut	Werte	Wirkung
`cols`	1–6 (Standard 3)	feste Spaltenzahl
`min`	Pixel	responsiv: so viele Spalten wie passen, ab dieser Mindestbreite
`gap`	`small` · `medium` · `large`	Abstand zwischen den Zellen
`span` (cell)	Zahl	Zelle überspannt mehrere Spalten

Mit fester Spaltenzahl und einer breiten Zelle:

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

Ergebnis ↓

Eine schmale Spalte daneben.

Zelle A

Zelle B

Zelle C

Mit min passt sich die Spaltenzahl automatisch der Breite an — ideal für Bildergalerien:

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

Ergebnis ↓

Unter 720px wird jedes Raster automatisch einspaltig.

with-sidebar

Teilt die Seite in Hauptspalte und Sidebar: alle Kinder außer dem sidebar-Block bilden die Hauptspalte.

Attribut	Werte	Wirkung
`side`	`left` · `right`	Seite der Sidebar (Standard `right`)
`width`	Pixel	Breite der Sidebar (Standard 320)

Sidebar rechts, dynamisch befüllt:

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

Ergebnis ↓

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 →

Dieselbe Idee mit 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.

Ergebnis ↓

Unter 860px werden Hauptspalte und Sidebar untereinander gestapelt.

sidebar

Der Sidebar-Container. Nimmt beliebige Blöcke auf — statisch (widget) oder dynamisch (recent-posts, category-list, ad).

Attribut	Werte	Wirkung
`sticky`	Flag	Sidebar bleibt beim Scrollen stehen

widget

Eine Titel-Box für handgeschriebene Sidebar-Inhalte — beliebige Blöcke unter einer Überschrift (Attribut 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.

Ergebnis ↓