---
title: Designtest
subtitle: Änderungen im Branding überprüfen
description: |
Diese Seite stellt die wesentlichen Design-Element von Quarto-Dokumenten zusammen, um die
Auswirkungen von Änderungen in der _brand.yml und der .scss-Datei zu prüfen.
abstract: ""
abstract-title: ""
categories:
- File
keywords:
- Branding
- Corporate Design
date: 2026-01-15
date-modified: last-modified
date-format: "DD.MM.YYYY"
author:
- name:
given: Kai-Christian
family: Bruhn
copyright: "Kai-Christian Bruhn"
license: CC BY # Optionen für Lizensierungsangaben: https://quarto.org/docs/authoring/front-matter.html#license
toc: true
toc-location: left
number-sections: true
---
::: {.callout-note title="Download als .qmd-Datei"}
Diese Datei können Sie auch [direkt aus dem Repository in .qmd]({{< meta data-url >}}quarto-designtest.qmd) herunterladen und in anderen Projekten nutzen oder über den </> qmd-Button oben rechts auf dieser Seite einzelne Abschnitte des Markwdowns dieser Seite aufrufen.
:::
## Aktuelle Farbbelegung in *\_brand.yml*
In dieser Tabelle wird die aktuelle Belegung der Farbpalette in der _brand.yml angezeigt. Sie wird nach jedem Rendern dieser Seite automatisch neu über ausführbaren Code in Quarto erzeugt. Auswirkungen auf die farbliche Gestaltung der Website wird für wesentliche Elemente weiter unten auf der Seite sichtbar.
::: {.smaller}
```{python}
#| echo: true
#| output: asis
#| code-fold: true
#| code-summary: "Python-Code für Generierung der Farbtabelle anzeigen"
from pathlib import Path
import html
import yaml
brand_path = Path("../_brand.yml")
data = yaml.safe_load(brand_path.read_text(encoding="utf-8"))
palette = (data.get("color", {}) or {}).get("palette", {}) or {}
def swatch(hex_value: str) -> str:
return (
f''
)
lines = []
lines.append("| Farbname | Hex | Vorschau |")
lines.append("|---|---|---|")
for name, value in palette.items():
hex_value = str(value).strip()
name_esc = html.escape(str(name))
hex_esc = html.escape(hex_value)
lines.append(f"| {name_esc} | `{hex_esc}` | {swatch(hex_esc)} |")
print("\n".join(lines))
```
:::
## Formatierungen und Elemente für Design-Tests
**fett**
*kursiv*
***fett-kursiv***
Zitat:
> Dies ist ein Zitat
### Codeboxen
Eine Codebox:
```{.html}
```
Das ist `inline-code`.
### Callouts
note, tip, warning, caution, and important.
::: {.callout-note}
Callout Note
:::
::: {.callout-tip}
Callout Tip
:::
::: {.callout-important}
Callout Important
:::
::: {.callout-caution}
Callout Caution
:::
::: {.callout-warning}
Callout Warning
:::
::: {.callout-note title="Inline-Elemente im Callout"}
**Callout-Notiz mit** `inline code`, einem {{< kbd kdb-Button >}} und einem [Link](#).
:::
**Codebox in Callout:**
::: {.callout-note title="Mit Codebox"}
``` html
```
:::
**Zitat in Callout**
::: {.callout-note title="Mit Zitat"}
> Das ist ein Zitat
:::
### Tabsets
::: panel-tabset
#### Tab A
Inhalt Tab A
#### Tab B
Inhalt Tab B
:::
``` markdown
::: {.panel-tabset}
#### Tab A
Inhalt Tab A
#### Tab B
Inhalt Tab B
:::
```
**Tabset mit Columns**
::: panel-tabset
#### Tab A
::::: columns
::: {.column width="40%"}
Lösung mit Columns
Linke Spalte (40%)
:::
::: {.column width="60%"}
Rechte Spalte (60%)
:::
:::::
#### Tab B
::: {layout-ncol="2"}
Lösung mit `{layout-ncol="2"}`
Erste Spalte
Zweite Spalte
:::
:::
**Tabset mit Codebox und Zitat**
::: panel-tabset
#### Codebox
``` html
```
#### Zitat
> Dies ist ein Zitat
:::
### Brand-Logos
::::: {.columns}
::: {.column width="10%"}
*Small:* `{{< brand logo small >}}`
{{< brand logo small >}}
:::
::: {.column width="40%"}
*Medium:* `{{< brand logo medium >}}`
{{< brand logo medium >}}
:::
::: {.column width="40%"}
*Large:* `{{< brand logo large >}}`
{{< brand logo large >}}
:::
:::::
### Bild mit Bildunterschrift
, `inline-code` und einer {{< kbd Taste >}}](/img/placeholder.png "Ein Platzhalter"){fig-alt="Illustration eines Platzhalters." width="250"}
### Fußnoten und Anmerkungen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis[^anmerkung].
[^anmerkung]: Hier ist etwas anzumerken.