From 576357cf394d9eea0a84e1cca8baa8c13afa96f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 21 May 2026 11:32:20 +0200 Subject: [PATCH] Add text layout patterns page with full, 60%, and two-column variants --- index.html | 1 + patterns/text-layouts.html | 36 ++++++++++++++++++++++++++++++++++++ styleguide.css | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+) create mode 100644 patterns/text-layouts.html diff --git a/index.html b/index.html index 5e76a7a..f6f609a 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,7 @@
  • Card Gruppe mit Tastennavigation
  • Formular mit Abschnitten
  • Multiselektions-Pulldown
    • +
  • Text Layouts
    • diff --git a/patterns/text-layouts.html b/patterns/text-layouts.html new file mode 100644 index 0000000..4b3bb6c --- /dev/null +++ b/patterns/text-layouts.html @@ -0,0 +1,36 @@ + + + + + + Styleguide – Pattern Text Layouts + + + + +

    Pattern – Text Layouts

    +
    +

    Pattern: Text Layout ganze Breite

    +
    +

    + Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte. +

    +
    + +

    Pattern: Text 60% Breite

    +
    +

    + Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen. +

    +
    + +

    Pattern: Text zweispaltig

    +
    +

    + Text zweispaltig: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert. Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen, die in Analyse- und Detailseiten stabil funktionieren und sich gut mit angrenzenden Karten, Tabellen oder Kennzahlenmodulen kombinieren lassen. +

    +
    +
    + + + diff --git a/styleguide.css b/styleguide.css index 446b551..a30b5c6 100644 --- a/styleguide.css +++ b/styleguide.css @@ -2080,6 +2080,42 @@ section + section { width: 100%; } +/* ========================================================= */ +/* Patterns: Text Layouts */ +/* ========================================================= */ + +.sg-text-layout-pattern { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-text-layout-pattern__sample { + margin: 0; +} + +.sg-text-layout-pattern__sample--full-width { + width: 100%; +} + +.sg-text-layout-pattern__sample--sixty-width { + width: 60%; +} + +.sg-text-layout-pattern__sample--two-column { + width: 100%; + column-count: 2; + column-gap: var(--spacing-large); +} + +@media (max-width: 767px) { + .sg-text-layout-pattern__sample--sixty-width, + .sg-text-layout-pattern__sample--two-column { + width: 100%; + column-count: 1; + } +} + /* ========================================================= */ /* Patterns: Card Gruppe mit Tastennavigation */ /* ========================================================= */