Designtest

Änderungen im Branding überprüfen

File

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.

Author

Kai-Christian Bruhn

Veröffentlicht am

15.01.2026

Zuletzt geändert am

15.04.2026

Stichwörter

Branding, Corporate Design

Download als .qmd-Datei

Diese Datei können Sie auch direkt aus dem Repository in .qmd herunterladen und in anderen Projekten nutzen oder über den </> qmd-Button oben rechts auf dieser Seite einzelne Abschnitte des Markwdowns dieser Seite aufrufen.

1 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.

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

Farbname	Hex	Vorschau
hintergrund	`#FFFFFF`
text	`#13294B`
akzent	`#0084FF`
cd-farbe	`#E7C6AC`
cd-farbe-abstufung1	`#CD8255`
cd-farbe-abstufung2	`#BCA089`
cd-farbe-abstufung3	`#CFC5BA`
flaeche	`#F2F2F2`
erfolg	`#2E7D32`
hinweis	`#0288D1`
warnung	`#ED6C02`
fehler	`#D32F2F`

2 Formatierungen und Elemente für Design-Tests

fett

kursiv

fett-kursiv

Zitat:

Dies ist ein Zitat

2.1 Codeboxen

Eine Codebox:

<!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.

2.2 Callouts

note, tip, warning, caution, and important.

Note

Callout Note

Tip

Callout Tip

Important

Callout Important

Caution

Callout Caution

Warning

Callout Warning

Inline-Elemente im Callout

Callout-Notiz mit inline code, einem kdb-Button und einem Link.

Codebox in Callout:

Mit Codebox

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

Mit Zitat

Das ist ein Zitat

2.3 Tabsets

Inhalt Tab A

Inhalt Tab B

::: {.panel-tabset}

#### Tab A

Inhalt Tab A

#### Tab B

Inhalt Tab B

:::

Tabset mit Columns

Lösung mit Columns

Linke Spalte (40%)

Rechte Spalte (60%)

Lösung mit {layout-ncol="2"} Erste Spalte

Zweite Spalte

Tabset mit Codebox und Zitat

<!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">

Dies ist ein Zitat

2.4 Brand-Logos

Small: assets/logos/n4o_logo_verlauf_200px.png

Medium: assets/logos/n4o_logo_verlauf_claim_kurz_h200px.png

Large: assets/logos/n4o_logo_oer_hsm.png

2.5 Bild mit Bildunterschrift

Illustration eines Platzhalters. — Ein Bild mit einer Bildunterschrift, Link, `inline-code` und einer Taste

2.6 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¹.

Fußnoten

Hier ist etwas anzumerken.↩︎

Lizenz

CC BY 4.0

Urheber:innen

Kai-Christian Bruhn

--- 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></> 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.