> ## Documentation Index
> Fetch the complete documentation index at: https://homelab.amylify.de/llms.txt
> Use this file to discover all available pages before exploring further.

# 5.0.2 Copy-Pastes

> Fertige Code-Snippets für häufig verwendete Mintlify-Komponenten.

Fertige Copy-Paste Snippets für alle gängigen Mintlify-Komponenten.
Einfach kopieren, einfügen und anpassen.

***

## Badges

Statusanzeigen für Seiten und Inhalte.

> [tab] Vorschau
>
> EntwurfVeraltetArchivAktivWarnungInternNeu

> [tab] Code
>
> ```mdx theme={"dark"}
> <Badge icon="clock" color="orange">Entwurf</Badge>
> <Badge icon="ban" color="red">Veraltet</Badge>
> <Badge icon="circle-check" color="green">Archiv</Badge>
> <Badge icon="circle-check" color="green">Aktiv</Badge>
> <Badge icon="triangle-exclamation" color="yellow">Warnung</Badge>
> <Badge icon="lock" color="gray">Intern</Badge>
> <Badge icon="star" color="blue">Neu</Badge>
> ```

***

## Callouts

Hinweis-Boxen für wichtige Informationen.

> [tab] Vorschau
>
> > [!NOTE]
> >
> > Standard Hinweis – für allgemeine Informationen.
>
> > [!TIP]
> >
> > Tipp – für hilfreiche optionale Hinweise.
>
> > [!WARNING]
> >
> > Warnung – für kritische Hinweise die beachtet werden müssen.
>
> > [!NOTE]
> >
> > Info – für ergänzende Informationen.

> [tab] Code
>
> ```mdx theme={"dark"}
> <Note>Text hier.</Note>
> <Tip>Text hier.</Tip>
> <Warning>Text hier.</Warning>
> <Info>Text hier.</Info>
> ```

***

## Cards

Einzelne Karte mit Icon und optionalem Link.

> [tab] Vorschau
>
> > [card] [Kartenname](https://homelab.amylify.de/pfad/zur/seite)
> >
> > Kurze Beschreibung was auf dieser Seite zu finden ist.

> [tab] Code
>
> ```mdx theme={"dark"}
> <Card title="Kartenname" icon="star" href="/pfad/zur/seite">
>   Kurze Beschreibung was auf dieser Seite zu finden ist.
> </Card>
> ```

***

## CardGroup

Mehrere Karten nebeneinander.

> [tab] Vorschau
>
> > [card] Karte 1
> >
> > Beschreibung der ersten Karte.
>
> > [card] Karte 2
> >
> > Beschreibung der zweiten Karte.
>
> > [card] Karte 3
> >
> > Beschreibung der dritten Karte.
>
> > [card] Karte 4
> >
> > Beschreibung der vierten Karte.

> [tab] Code
>
> ```mdx theme={"dark"}
> {/* cols={2} für 2 Spalten, cols={3} für 3 Spalten */}
> <CardGroup cols={2}>
>   <Card title="Karte 1" icon="server">
>     Beschreibung der ersten Karte.
>   </Card>
>   <Card title="Karte 2" icon="network-wired">
>     Beschreibung der zweiten Karte.
>   </Card>
> </CardGroup>
> ```

***

## Steps

Schritt-für-Schritt Anleitungen.

> [tab] Vorschau
>
> **1. Erster Schritt**
>
> Beschreibung des ersten Schritts.
>
> **2. Zweiter Schritt**
>
> Beschreibung des zweiten Schritts. Kann auch Code enthalten:
>
> ```bash theme={"dark"}
> sudo apt update
> ```
>
> **3. Dritter Schritt**
>
> Beschreibung des dritten Schritts.

> [tab] Code
>
> ```mdx theme={"dark"}
> <Steps>
>   <Step title="Erster Schritt">
>     Beschreibung des ersten Schritts.
>   </Step>
>   <Step title="Zweiter Schritt">
>     Beschreibung des zweiten Schritts.
>   </Step>
> </Steps>
> ```

***

## Tabs

Inhalte in Tabs aufteilen.

> [tab] Vorschau
>
> > [tab] Windows
> >
> > Inhalt für Windows.
>
> > [tab] Linux
> >
> > Inhalt für Linux.
>
> > [tab] macOS
> >
> > Inhalt für macOS.

> [tab] Code
>
> ```mdx theme={"dark"}
> <Tabs>
>   <Tab title="Windows">
>     Inhalt für Windows.
>   </Tab>
>   <Tab title="Linux">
>     Inhalt für Linux.
>   </Tab>
> </Tabs>
> ```

***

## Accordion

Aufklappbare Abschnitte für optionale Details.

> [tab] Vorschau
>
> > [accordion] Erster Abschnitt
> >
> > Inhalt des ersten Abschnitts – wird auf- und zugeklappt.
>
> > [accordion] Zweiter Abschnitt
> >
> > Dieser Abschnitt ist standardmäßig geöffnet.

> [tab] Code
>
> ```mdx theme={"dark"}
> <AccordionGroup>
>   <Accordion title="Titel des Abschnitts">
>     Inhalt hier.
>   </Accordion>
>   <Accordion title="Standardmäßig offen" defaultOpen={true}>
>     Dieser Abschnitt ist standardmäßig geöffnet.
>   </Accordion>
> </AccordionGroup>
> ```

***

## Code-Blöcke

Code mit Syntax-Highlighting und Copy-Button.

> [tab] Vorschau
>
> ```bash theme={"dark"}
> sudo apt update && sudo apt upgrade -y
> ```
>
> ```powershell theme={"dark"}
> git add . && git commit -m "Nachricht" && git push
> ```
>
> ```json theme={"dark"}
> {
>   "key": "value",
>   "number": 42
> }
> ```

> [tab] Code
>
> ````mdx theme={"dark"}
> ```bash
> sudo apt update
> ```
> ```powershell
> git push
> ```
> ```json
> { "key": "value" }
> ```
> ````

***

## Tabellen

Strukturierte Daten in Tabellenform.

> [tab] Vorschau
>
> | Spalte 1 | Spalte 2 | Spalte 3 |
> | - | - | - |
> | Wert A | Wert B | Wert C |
> | Wert D | Wert E | Wert F |

> [tab] Code
>
> ```mdx theme={"dark"}
> | Spalte 1 | Spalte 2 | Spalte 3 |
> |---|---|---|
> | Wert A | Wert B | Wert C |
> | Wert D | Wert E | Wert F |
> ```

***

## Bilder

Bilder aus dem `/images/` Ordner einbinden.

> [tab] Code
>
> ```mdx theme={"dark"}
> {/* Ohne Leerzeichen im Pfad */}
> <img src="/images/ordner/dateiname.png" alt="Beschreibung" />
>
> {/* Mit Leerzeichen im Pfad → %20 verwenden */}
> <img src="/images/ordner/datei%20name.png" alt="Beschreibung" />
> ```

***

## Frontmatter

Pflichtfelder für jede neue `.mdx` Seite.

> [tab] Code
>
> ```mdx theme={"dark"}
> ---
> title: "X.X.X – Seitenname"
> description: "Kurze präzise Beschreibung der Seite."
> ---
> ```

***

## Trennlinie

Abschnitte visuell trennen.

> [tab] Code
>
> ```mdx theme={"dark"}
> ---
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.