---
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 <kbd>&lt;/&gt; qmd</kbd>-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'<span style="display:inline-block;width:2.2em;height:1.2em;'
        f'background:{hex_value};border:1px solid #999;border-radius:3px;"></span>'
    )

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}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
```

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

```
:::


**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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
```

#### 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

![Ein Bild mit einer Bildunterschrift, [Link](*), `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.