Design System
Playground Zur Vorlage

Sektionen · ContentArtikel-Body

Sektion · 6 Varianten

Artikel-Body

sections/ArtikelBody.astro

Fließtext mit Inhaltsverzeichnis links oder rechts (sticky, Kante, aktive Stelle), Meta oben, Autor-Box im Fuß, breit ohne TOC, kompakt mit eingeklapptem TOC.

Notizen

  • Prose-Sektion (65ch) bleibt Basis; hier die Komposition mit TOC, Zitat, Callout, Code, Inline-CTA, Autor.
  • Scroll-Spy für das TOC ist Runtime und folgt bei Promotion.

Props

Name Typ Default Notiz
variant "toc-links" | "toc-rechts" | "meta-oben" | "autor-fuss" | "breit" | "kompakt" "toc-links" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<ArtikelBody variant="toc-links" surface="nacht" />

01 · TOC links

3 + 7, sticky

Seitennav kante. —

Nacht

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Paper

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

02 · TOC rechts

7 + 3, order-2

Docs. —

Nacht

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Paper

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

03 · Meta oben

Autor, Datum, Lesezeit über dem Text

Autor-Box meta. Haarlinie.

Nacht

Autor Daniel Schmidt
Datum 2. September 2026
Lesezeit 6 min

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Paper

Autor Daniel Schmidt
Datum 2. September 2026
Lesezeit 6 min

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

04 · Autor Fuß

Autor-Box mit Link unten

Autor-Box fuss. —

Nacht

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Daniel Schmidt · Werk

Legt Fläche seit 2014. Schreibt über Index, Draht und den Slot.

Paper

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Daniel Schmidt · Werk

Legt Fläche seit 2014. Schreibt über Index, Draht und den Slot.

05 · Breit

9 Spalten, großes Zitat

Manifest. —

Nacht

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.
Daniel Schmidt, Werk

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Daniel Schmidt · Werk

Legt Fläche seit 2014. Schreibt über Index, Draht und den Slot.

Paper

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.
Daniel Schmidt, Werk

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Daniel Schmidt · Werk

Legt Fläche seit 2014. Schreibt über Index, Draht und den Slot.

06 · Kompakt

TOC eingeklappt oben

Inhaltsverzeichnis eingeklappt. Mobil.

Nacht

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.

Paper

Der Slot

Ein Auftrag zur Zeit. Der Slot gehört einem Mandat, vom Briefing bis zur Abnahme. Kein Parallelbetrieb, keine Warteschleife, kein Account dazwischen. Was nicht zum Auftrag gehört, bleibt draußen.

Vierzehn Tage sind kein Sprint, sondern ein Takt. Tag 0 ist das Briefing, Tag 14 die Abnahme. Dazwischen wird gelegt, nicht abgestimmt.

Wir bauen keine Websites. Wir legen Fläche, die gefunden wird und trägt.

Index vor Ads

Query, Snippet, Schema stehen vor der ersten Kampagne. Der Satz trägt die Sichtbarkeit, nicht das Budget.

src/pages/index.astro
<Button variant="primary" text="Slot anfragen" /><Tag text="Index" index="01" /><SectionLabel text="Warum wir" />

Wer brieft, spricht mit dem, der legt. Kein zweiter Ton, keine Folien.