Dieser Beitrag ist der Testfall des Renderers. Jeder Abschnitt zeigt einen Blocktyp so, wie Notion ihn liefert. Wenn hier etwas fehlt oder falsch aussieht, ist es ein Fehler im Build, nicht in Notion.

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Aufklappbare Überschrift

Dieser Absatz steckt in einer Toggle-Überschrift. Notion nennt das „is_toggleable".

Absätze können fett, kursiv, durchgestrichen und als Code gesetzt sein. Links sehen so aus.

Dieser Satz ist unterstrichen. Dieser Satz ist rot. Dieser hat einen blauen Hintergrund.

  • Erster Punkt
  • Zweiter Punkt mit Unterpunkten
    • Unterpunkt A
    • Unterpunkt B
  • Dritter Punkt
  1. Erster Schritt
  2. Zweiter Schritt mit Unterschritten
    1. Unterschritt 2a
    2. Unterschritt 2b
  3. Dritter Schritt
Ein Toggle zum Aufklappen

Der Inhalt eines Toggles ist erst nach dem Klick sichtbar. Ohne JavaScript ist er trotzdem im HTML und wird von der Suche gefunden.

Ein Zitat steht in einer Serifenschrift, mit einem großen Anführungszeichen davor.
💡
Ein blauer Callout für Hinweise.
⚠️
Ein gelber Callout für Warnungen.
🎀
Ein rosa Callout für alles andere.
const antwort = 42;
console.log(`Die Antwort ist ${antwort}`);
Ein Code-Block mit Sprache und Bildunterschrift.
Ein Bild mit Bildunterschrift. Klick öffnet die Lightbox.
Ein Bild mit Bildunterschrift. Klick öffnet die Lightbox.

Linke Spalte. Spalten werden auf schmalen Bildschirmen untereinander gesetzt.

Rechte Spalte. Die Breiten kommen aus Notion und werden auf feste Klassen gerundet.

BlockHTMLAnmerkung
paragraph<p>Standard
heading_2<h3>H1 ist der Seitentitel
callout<div class="kg-callout-card">Farbe als Klasse
Overview - Notion Docs
Discover what Notion connections are, when to use each type, and what you can build.
Notion Docs
Ein Bookmark: Titel, Beschreibung und Bild werden beim Build geholt.
E = mc^2

Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film

Beim Abspielen werden Daten an youtube-nocookie.com übertragen. youtube-nocookie.com

Big Buck Bunny

Beim Abspielen werden Daten an player.vimeo.com übertragen. player.vimeo.com

https://example.com/ein-fremdes-widget
example.com

Dieser Absatz steht in einem Synced Block. Der Renderer zeigt die Kinder des Originals.

Erster Tab

Inhalt des ersten Tabs.

Zweiter Tab

Inhalt des zweiten Tabs.

Und sonst?

Unbekannte Blocktypen lässt der Renderer weg und schreibt eine Zeile ins Build-Protokoll. Die Seite baut trotzdem.