MDX Playground Showcase

Showcase (Design-Elemente)

Du nutzt diese Übersicht, um schnell zu entscheiden, welches Baustein-Design zu deinem Inhalt passt: Rezepte, Übungsbeschreibungen, Wissensartikel, FAQs oder Onboarding-Guides.

Canonical-Index der Design-Elemente

Nutze bei Prompts immer die canonical-Namen in Fettdruck, die Synonyme helfen dir bei der inhaltlichen Einordnung.

• Headings und Text – Synonyme: Überschriften, Fließtext, Copy, Einleitungstext
• Listen und Tabellen – Synonyme: Aufzählungen, Bulletpoints, Checklisten, Tabellenübersicht
• Cards – Synonyme: Kacheln, Kärtchen, Teaserbox, Navigationskarte
• Columns – Synonyme: Spaltenlayout, Raster, Grid, Kachelraster
• Images – Synonyme: Bilder, Fotos, Illustrationen, Übungsbilder
• Videos – Synonyme: Trainingsvideos, Kochvideos, Anleitungsvideo, Demo
• I-Frames – Synonyme: Einbettung, externe Inhalte, eingebettete Tools
• Callouts – Synonyme: Hinweisbox, Tippbox, Warnhinweis, Info-Kasten
• Expandables – Synonyme: Akkordeon, Ausklapper, FAQ-Bereich, aufklappbare Sektion
• Steps – Synonyme: Schritt-für-Schritt, Anleitung, Ablauf, Checkliste
• Tabs – Synonyme: Reiter, Umschalter, Ansicht wechseln, Variantenwahl
• Updates – Synonyme: Changelog, Versionsverlauf, Änderungsprotokoll
• ParamField – Synonyme: Metadaten, Faktenblock, Attributliste, Eigenschaften
• Image-Box / Media-Card (Pattern) – Synonyme: Bildkarte, Medienbox, visuelle Vorschau, Hero-Kachel

Headings und Text

Synonyme: Überschriften, Fließtext, Copy, Einleitungstext

Strukturiere Wissensartikel, Rezepte und Trainingsguides mit klaren Überschriften und gut lesbarem Fließtext. Nutze Überschriften, um Abschnitte wie Zutaten, Ausführung, Hinweise oder Kontraindikationen zu trennen. Im Text erklärst du Hintergründe, warum eine Übung wichtig ist oder worauf Klientinnen bei einem Rezept achten sollen. Kombiniere normalen Text mit Fettdruck und kursiver Hervorhebung, um wichtige Begriffe hervorzuheben.

Beispiel

Rückenfreundliches Workout

Stärke deine Rückenmuskulatur gezielt und entlaste gleichzeitig die Wirbelsäule. Ideal für Klientinnen mit viel Schreibtischarbeit oder einseitigen Belastungen im Alltag.

Listen und Tabellen

Synonyme: Aufzählungen, Bulletpoints, Checklisten, Tabellenübersicht

Listen eignen sich für Zutatenlisten, Schrittfolgen, Warnhinweise oder kurze Tipps pro Übung. So können Klientinnen Inhalte schnell scannen und abhaken. Tabellen helfen bei einfachen Vergleichen, etwa Varianten eines Rezepts, Schwierigkeitsgrade von Übungen oder Dauer vs. Intensität. Nutze sie sparsam für Inhalte, die wirklich in Zeilen und Spalten gedacht werden.

Beispiel

Ungeordnete Liste (z. B. Zutaten):

• 80 g Haferflocken
• 200 ml Haferdrink
• 1 Handvoll Beeren

Einfache Tabelle (z. B. Trainingslevel):

Cards

Synonyme: Kacheln, Kärtchen, Teaserbox, Navigationskarte

Cards eignen sich für Rezept-Kacheln, Übungsübersichten oder Einstiege in Themenbereiche wie Ernährung, Mindset oder Workouts. Jede Card enthält einen Titel, eine kurze Beschreibung und führt per Klick zu einer Detailseite. So baust du zum Beispiel eine Startseite mit deinen wichtigsten Programmen, Kursen oder Wissensserien auf.

Beispiel

Columns

Synonyme: Spaltenlayout, Raster, Grid, Kachelraster

Mit Columns ordnest du mehrere Cards oder andere Inhalte in einem gleichmäßigen Raster an. Ideal für Übersichtsseiten: Trainingskatalog (Oberkörper, Unterkörper, Core), Rezepte (Frühstück, Lunch, Dinner) oder Wissensbereiche. So sehen Klientinnen auf einen Blick, welche Angebote oder Inhalte es gibt.

Beispiel

Images

Synonyme: Bilder, Fotos, Illustrationen, Übungsbilder

Bilder sind entscheidend für Übungs- und Rezeptseiten: Zeige Start- und Endposition einer Übung oder das fertig angerichtete Gericht. Nutze sinnvolle Bildunterschriften beziehungsweise Alt-Texte, damit auch Nutzerinnen mit Screenreadern verstehen, was zu sehen ist. Verwende Bilder, um Motivation zu erzeugen und komplexe Bewegungen schnell verständlich zu machen.

Beispiel

Videos

Synonyme: Trainingsvideos, Kochvideos, Anleitungsvideo, Demo

Videos eignen sich besonders für Übungsdemonstrationen, Warm-up-Routinen oder Kochanleitungen. Klientinnen sehen Tempo, Bewegungsspielraum und Atmung deutlich besser als in Textform. Nutze kurze Clips mit Fokus auf Technik und Sicherheit, die deine schriftlichen Anweisungen ergänzen.

Beispiel

I-Frames

Synonyme: Einbettung, externe Inhalte, eingebettete Tools

Mit I-Frames bindest du externe Inhalte ein, zum Beispiel Trainings-Apps, Formular-Tools, Kalender oder eine Demo deines Mitgliederbereichs. So bleibt die Nutzerin auf deiner Seite, während sie externe Funktionen nutzt. Nutze I-Frames gezielt für Inhalte, die du nicht direkt als Text oder Video in deine Dokumentation bringst.

Beispiel

Callouts

Synonyme: Hinweisbox, Tippbox, Warnhinweis, Info-Kasten

Callouts heben wichtige Hinweise hervor: Kontraindikationen bei Übungen, Allergiehinweise bei Rezepten oder Support-Tipps bei Login-Problemen. Sie unterbrechen den Fließtext optisch und lenken die Aufmerksamkeit genau auf Sicherheitsaspekte oder Empfehlungen, die deine Klientinnen nicht übersehen sollen. Nutze unterschiedliche Callout-Typen für Info, Tipp oder Warnung.

Beispiel

Expandables

Synonyme: Akkordeon, Ausklapper, FAQ-Bereich, aufklappbare Sektion

Expandables eignen sich für optionale Details, die nicht alle Leserinnen brauchen: wissenschaftliche Hintergründe, ausführliche FAQ-Antworten, Varianten einer Übung oder Rezept-Alternativen. So bleibt die Seite schlank, und nur wer mehr wissen möchte, klappt den Bereich auf. Typische Einsatzfälle: weiterführende Erklärungen oder Zusatzinfos für sehr interessierte Klientinnen.

Beispiel

Steps

Synonyme: Schritt-für-Schritt, Anleitung, Ablauf, Checkliste

Steps eignen sich für geführte Abläufe: Onboarding-Prozess, Login-Hilfe, Rezeptschritte oder eine komplette Trainingsroutine. Jede Stufe zeigt einen klaren nächsten Schritt, sodass Klientinnen sich sicher durch den Prozess bewegen. Das ist besonders hilfreich in Hilfecenter-Artikeln oder bei komplexeren Programmen mit mehreren Etappen.

Beispiel

Tabs

Synonyme: Reiter, Umschalter, Ansicht wechseln, Variantenwahl

Tabs helfen dir, Varianten nebeneinander anzubieten, ohne eine lange Seite zu bauen. Typische Szenarien: Equipment-Variante einer Übung (mit/ohne Hanteln), Ernährungsplan mit vegetarischer oder veganer Option or unterschiedliche Plattform-Sichten (Klientin vs. Coach). Die Nutzerin wechselt per Klick zwischen den Inhalten, bleibt aber im gleichen Kontext.

Beispiel

Updates

Synonyme: Changelog, Versionsverlauf, Änderungsprotokoll

Mit Update dokumentierst du Änderungen an Programmen, Rezepten oder Wissensseiten. So sehen Klientinnen und Kolleginnen, wann du zum Beispiel neue Übungen ergänzt, Portionsgrößen anpasst oder Onboarding-Schritte überarbeitest. Das ist besonders hilfreich, wenn du im Team arbeitest oder deinen Mitgliedern transparent zeigen möchtest, wie sich dein Angebot weiterentwickelt.

Beispiel

ParamField (optionale Strukturfelder)

Synonyme: Metadaten, Faktenblock, Attributliste, Eigenschaften

ParamField nutzt du, um strukturierte Faktenblöcke zu bauen: Ernährungsmerkmale (vegan, glutenfrei), Zubereitungszeit, Schwierigkeitsgrad, Muskelgruppe oder benötigtes Equipment. Es ist kein klassisches Tag- oder Kategorie-System, sondern eine klare, beschreibende Liste von Eigenschaften. So können Klientinnen einen Rezept- oder Übungsblock schnell scannen und verstehen, ob der Inhalt zu ihren Bedürfnissen passt.

Beispiel

Image-Box / Media-Card (Pattern)

Synonyme: Bildkarte, Medienbox, visuelle Vorschau, Hero-Kachel

Die Image-Box kombiniert Bild und Text in einer Card und eignet sich perfekt für Rezept-Teaser, Highlight-Workouts oder Kursvorschauen. Das Bild zieht Aufmerksamkeit an, während Titel und Kurzbeschreibung klarmachen, worum es geht. Nutze dieses Pattern als Hero-Kachel mit Call-to-Action oder in einem Raster für mehrere Highlights.

Beispiel

Proteinreiches Frühstücks-Bowl

Sättigende Frühstücksbowl mit Hafer, Beeren und Nüssen – ideal nach dem Morgen-Workout.

Zum Rezept

Code-Basis (Aufbau)

Nutze diesen Bereich, wenn du gezielt MDX-Code kopieren oder anpassen möchtest. Die Elemente sind in derselben Reihenfolge wie im Showcase sortiert, damit du Text- und Designideen schnell in funktionierenden Code überführen kannst.

Headings und Text

## Abschnittstitel

Kurzer Absatz mit normalem Text. Hebe Begriffe mit **Fettdruck** oder *Kursivschrift* hervor und verwende `Inline-Code` für technische Begriffe.

Listen und Tabellen

### Ungeordnete Liste

- Erster Punkt
- Zweiter Punkt
- Dritter Punkt

### Geordnete Liste

1. Schritt eins
2. Schritt zwei
3. Schritt drei

### Einfache Tabelle

| Status   | Beschreibung         |
| -------- | -------------------- |
| Aktiv    | Wird aktuell genutzt |
| Inaktiv  | Derzeit nicht aktiv  |

Cards

<Card title="Schnellstart" href="/quickstart" icon="zap" cta="Öffnen">

Kurze Beschreibung des verlinkten Inhalts.

</Card>

Columns

<Columns cols={3}>

<Card title="Einführung" href="/introduction" icon="book-open" cta="Lesen">

Grundlegender Überblick über das Projekt.

</Card>

<Card title="Features" href="/features" icon="settings" cta="Entdecken">

Liste der wichtigsten Funktionen.

</Card>

<Card title="Integrationen" href="/integrations" icon="code" cta="Ansehen">

Verfügbare Integrationen und Schnittstellen.

</Card>

</Columns>

Images

<Image
  src="https://placehold.co/800x400"
  alt="Platzhalter-Screenshot einer Dashboard-Ansicht"
  width="800"
  height="400"
/>

Videos

<Video
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
  width="640"
  height="360"
/>

I-Frames

<Iframe
  src="https://example.com"
  width="800"
  height="400"
/>

Callouts

<Callout kind="info">

Nutze Callouts für zusätzliche Kontextinformationen, die nicht Teil des Hauptflusses sind.

</Callout>

Expandables

<ExpandableGroup>

<Expandable title="Wann sollte ich Expandables verwenden?" default-open="true">

Nutze Expandables für Inhalte, die hilfreich, aber nicht für alle Leserinnen und Leser zwingend sind.

</Expandable>

</ExpandableGroup>

Steps

<Steps>

<Step title="Projekt anlegen" icon="plus">

Erstelle ein neues Projekt im Dashboard.

</Step>

<Step title="Inhalte hinzufügen" icon="edit">

Füge Seiten, Kategorien und Medien zu deinem Projekt hinzu.

</Step>

<Step title="Veröffentlichen" icon="rocket">

Aktualisiere die Live-Dokumentation mit deinen Änderungen.

</Step>

</Steps>

Tabs

<Tabs>

<Tab title="Redakteurinnen" icon="users">

Fokussiere dich auf Inhalt, Struktur und Verständlichkeit der Texte.

</Tab>

<Tab title="Entwickler" icon="code">

Achte auf API-Referenzen, Code-Beispiele und Integrationsdetails.

</Tab>

</Tabs>

Updates

<Update label="2024-03-15" description="v1.2.0" tags={["feature", "improvement"]}>

### Neue Funktionen

- Unterstützung für MDX-Komponenten im Help Center.

### Verbesserungen

- Schnellere Generierung von Vorschaudokumenten.

</Update>

ParamField (Strukturfelder)

<ParamField path="userId" param-type="string" required={true}>

Eindeutige Kennung der Benutzerin oder des Benutzers, zum Beispiel `usr_a1b2c3d4`.

</ParamField>

Image-Box / Media-Card (Pattern)

<Card
  title="Proteinreiches Frühstücks-Bowl"
  href="/ernaehrung"
  icon="cooking-pot"
  cta="Zum Rezept"
  image="https://placehold.co/800x450"
>

Sättigende Frühstücksbowl mit Hafer, Beeren und Nüssen – ideal nach dem Morgen-Workout.

</Card>

No-Coding / Entwickler-Bausteine

In diesem Bereich findest du Bausteine, die vor allem für technische Integrationen interessant sind: API-Referenzen, mehrsprachige Code-Beispiele und strukturierte Antwortfelder. Wenn du ohne eigenen Code arbeitest, kannst du diesen Abschnitt ignorieren oder zusammen mit einer Entwicklerin nutzen.

Code blocks und CodeGroup

Einfache Code-Block-Nutzung:

```bash
npm install documentation-ai
```

Mehrsprachiges Beispiel mit CodeGroup:

<CodeGroup tabs="cURL,JavaScript">

```bash
curl -X POST https://api.acme-coach.com/v1/sessions \
  -H "Authorization: Bearer sk_live_4eC39HqLyjWDarjtT1zdp7dc" \
  -H "Content-Type: application/json" \
  -d '{"client_id":"cli_a1b2c3","duration":60}'
```

```javascript
async function createSession() {
  const response = await fetch("https://api.acme-coach.com/v1/sessions", {
    method: "POST",
    headers: {
      Authorization: "Bearer sk_live_4eC39HqLyjWDarjtT1zdp7dc",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      client_id: "cli_a1b2c3",
      duration: 60
    })
  });

  const data = await response.json();
  console.log(data);
}
```

</CodeGroup>

Mermaid

Request und Response

<Request>

```bash
curl -X GET "https://api.acme-coach.com/v1/users/usr_a1b2c3d4" \
  -H "Authorization: Bearer sk_live_4eC39HqLyjWDarjtT1zdp7dc"
```

</Request>

<Response>

```json
{
  "id": "usr_a1b2c3d4",
  "name": "Lena Hoffmann",
  "email": "lena.hoffmann@acme-coach.com"
}
```

</Response>

ResponseField

<ResponseField name="id" field-type="string">

Eindeutige Kennung der erstellten Ressource, zum Beispiel `sess_f9g8h7k6`.

</ResponseField>

Anhang: Farben im Playground und in MDX-Komponenten

Farben steuerst du primär global über die Konfiguration und nicht pro Baustein direkt im MDX.

Farbvorschau (live)

Diese Beispiele zeigen, wie sich deine globale Marken- und Textfarbe direkt in den Bausteinen widerspiegelt.

• Link / Markenfarbe: Die Standard-Linkfarbe nutzt automatisch die globale Markenfarbe, zum Beispiel bei internen Sprüngen wie zum Schnellstart.

Elemente, die Farben nutzen

• Globale Markenfarbe (brand) beeinflusst Links, Buttons, Akzente, Icons und aktive Zustände in Tabs und Steps.
• Überschriftenfarbe (heading) steuert die Farbe aller Headings über den gesamten Playground hinweg.
• Textfarbe (text) definiert die Standardfarbe für Fließtext und Beschreibungstexte in allen Komponenten.
• Callouts verwenden vordefinierte Varianten über kind (info, tip, success, alert, danger) mit jeweils fixen Farbsets, die sich in den globalen Stil einfügen.

Was nicht möglich ist

• Du kannst keine individuellen Farben pro Card, Tab, Step oder Callout im MDX setzen (keine Props für Hintergrund- oder Textfarbe).
• Icons lassen sich nicht pro Instanz einfärben; sie folgen automatisch der globalen Marken- und Textfarbe.
• Es gibt keine per-Komponenten-Themes oder lokalen Farbschemata direkt im MDX, alle Farbanpassungen laufen über die globale colors.light und colors.dark Konfiguration.

Anhang: Mermaid (Diagramme)

Mermaid rendert textbasierte Diagramme direkt aus Markdown-Codeblöcken und bietet begrenzte visuelle Anpassung über Themes, Farben und vordefinierte Formen.

Beispiel 1: Flowchart mit Theme (forest)

Beispiel 2: Flowchart mit classDef (Markenfarbe & Rahmen)

Beispiel 3: Mindmap-ähnliches Diagramm

Was Mermaid kann und was nicht

• Möglich:
  • Globale Themes setzen (zum Beispiel forest, dark, neutral).
  • Farben und Linienstärken über classDef und Klassen (:::brandNode) anpassen.
  • Knotenformen ändern, etwa eckig, rund, Stadium-Form oder Kreis.
• Nicht möglich:
  • Pixelgenaues Layout mit frei platzierbaren Elementen wie in Design-Tools.
  • Beliebige Rundungen an einzelnen Ecken oder komplexe Rahmen-Gestaltung.
  • Aufwendige Effekte wie Farbverläufe, Schatten oder eingebettete Logos und Bilder.