diff --git a/docs/styleguide/patterns/public-page-patterns.html b/docs/styleguide/patterns/public-page-patterns.html index 51aaddb..8981443 100644 --- a/docs/styleguide/patterns/public-page-patterns.html +++ b/docs/styleguide/patterns/public-page-patterns.html @@ -36,6 +36,27 @@ +

pattern: Content Focus Box

+ +
+
+
+
+
+
+

+ Text zweispaltig links: 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. +

+

+ Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten. +

+
+
+
+
+
+
+

pattern: CTA box left

@@ -76,6 +97,26 @@
+

pattern: CTA small button box right

+ +
+
+
+
+

+ Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten. +

+ +
+ +
+
+
+
+
+

pattern: picture full width

diff --git a/docs/styleguide/patterns/text-layouts.html b/docs/styleguide/patterns/text-layouts.html index 93b45d4..ea333f6 100644 --- a/docs/styleguide/patterns/text-layouts.html +++ b/docs/styleguide/patterns/text-layouts.html @@ -6,56 +6,60 @@ 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. -

-
+

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

-
+

+ 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 (mobil zweispaltig)

-
-
-

- Text zweispaltig links: 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. -

-

- Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten. -

-
+
+

+ Text zweispaltig links: 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. +

+

+ Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten. +

+
+
+ +

Pattern: Text zweispaltig (mobil gestacked)

+
+
+

+ Text zweispaltig links: 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. +

+

+ Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten. +

Pattern: Dreispaltig verteilt (mobil dreispaltig)

-
-
-

- Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen. -

-

- Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen. -

-

- Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock. -

-
+
+

+ Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen. +

+

+ Mittlere Spalte mittelachsig: Diese Spalte zentriert den Text auf der Mittelachse und eignet sich für vergleichende Kernaussagen, die visuell als Schwerpunkt zwischen den Randspalten stehen sollen. +

+

+ Rechte Spalte rechtsbündig: Diese Spalte schließt den Abschnitt mit einer klaren Endkante ab und eignet sich für ergänzende Hinweise oder abschließende Perspektiven im gleichen Inhaltsblock. +

diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html index 285a135..d7edf10 100644 --- a/docs/styleguide/semantic-tokens-components.html +++ b/docs/styleguide/semantic-tokens-components.html @@ -121,7 +121,12 @@

Picture Full Width

-

Keine zusätzlichen semantischen Tokens erforderlich. Die Komponente ist strukturell und bezieht sich mit width: 100% auf den umgebenden Container, mit height: auto und display: block für das Bild-Element.

+ + + + + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck in der Komponente
radius-picture-full-widthradius-cardBorder-Radius des Full-Width-Bildes.
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index c07c64a..cd31ce4 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -193,6 +193,7 @@ --surface-navigation-card-body: var(--color-white); --surface-content-block-card-title: var(--color-light-grey); --surface-content-block-card-content: var(--color-white); + --radius-picture-full-width: var(--radius-card); --layout-content-cards-group-gap: var(--spacing-small); --surface-card-list-drawer: var(--color-background-purple); --text-content-block-card-title: var(--color-font-dark); diff --git a/docs/styleguide/styles/31-patterns-text-layouts.css b/docs/styleguide/styles/31-patterns-text-layouts.css index 5a6f365..fbdd9e0 100644 --- a/docs/styleguide/styles/31-patterns-text-layouts.css +++ b/docs/styleguide/styles/31-patterns-text-layouts.css @@ -2,20 +2,21 @@ /* Patterns: Text Layouts */ /* ========================================================= */ +.sg-page-text-layouts { + background: var(--surface-form-preview); +} + +.sg-page-text-layouts .sg-main-heading, +.sg-page-text-layouts .sg-preview-label { + color: inherit; +} + .sg-text-layout-pattern { display: flex; flex-direction: column; gap: var(--spacing-small); } -.sg-text-layout-pattern__preview-surface { - width: 100%; - box-sizing: border-box; - padding: var(--spacing-large); - border-radius: var(--radius-card); - background: var(--surface-text-layout-preview); -} - .sg-text-layout-pattern__sample { margin: 0; } @@ -40,6 +41,11 @@ column-gap: var(--layout-text-layout-column-gap); } +.sg-text-layout-pattern__two-column--stacked-mobile { + width: 100%; + min-width: 0; +} + .sg-text-layout-pattern__three-column-distributed { width: 100%; min-width: 0; @@ -73,7 +79,13 @@ .sg-text-layout-pattern__sample--sixty-width, .sg-text-layout-pattern__sample--two-column, .sg-text-layout-pattern__two-column, + .sg-text-layout-pattern__two-column--stacked-mobile, .sg-text-layout-pattern__three-column-distributed { width: 100%; } + + .sg-text-layout-pattern__two-column--stacked-mobile { + grid-template-columns: 1fr; + row-gap: var(--layout-text-layout-column-gap); + } } diff --git a/docs/styleguide/styles/44-components-public-page-components.css b/docs/styleguide/styles/44-components-public-page-components.css index 2259312..5111e16 100644 --- a/docs/styleguide/styles/44-components-public-page-components.css +++ b/docs/styleguide/styles/44-components-public-page-components.css @@ -80,6 +80,7 @@ width: 100%; max-width: 100%; height: auto; + border-radius: var(--radius-picture-full-width); } .sg-page-public-page-components .sg-preview-area { diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index ae70648..2fbe5fd 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -193,6 +193,7 @@ --surface-navigation-card-body: var(--color-white); --surface-content-block-card-title: var(--color-light-grey); --surface-content-block-card-content: var(--color-white); + --radius-picture-full-width: var(--radius-card); --layout-content-cards-group-gap: var(--spacing-small); --surface-card-list-drawer: var(--color-background-purple); --text-content-block-card-title: var(--color-font-dark); @@ -3643,20 +3644,21 @@ main { /* Patterns: Text Layouts */ /* ========================================================= */ +.sg-page-text-layouts { + background: var(--surface-form-preview); +} + +.sg-page-text-layouts .sg-main-heading, +.sg-page-text-layouts .sg-preview-label { + color: inherit; +} + .sg-text-layout-pattern { display: flex; flex-direction: column; gap: var(--spacing-small); } -.sg-text-layout-pattern__preview-surface { - width: 100%; - box-sizing: border-box; - padding: var(--spacing-large); - border-radius: var(--radius-card); - background: var(--surface-text-layout-preview); -} - .sg-text-layout-pattern__sample { margin: 0; } @@ -3681,6 +3683,11 @@ main { column-gap: var(--layout-text-layout-column-gap); } +.sg-text-layout-pattern__two-column--stacked-mobile { + width: 100%; + min-width: 0; +} + .sg-text-layout-pattern__three-column-distributed { width: 100%; min-width: 0; @@ -3714,9 +3721,15 @@ main { .sg-text-layout-pattern__sample--sixty-width, .sg-text-layout-pattern__sample--two-column, .sg-text-layout-pattern__two-column, + .sg-text-layout-pattern__two-column--stacked-mobile, .sg-text-layout-pattern__three-column-distributed { width: 100%; } + + .sg-text-layout-pattern__two-column--stacked-mobile { + grid-template-columns: 1fr; + row-gap: var(--layout-text-layout-column-gap); + } } /* ========================================================= */ @@ -4609,6 +4622,7 @@ main { width: 100%; max-width: 100%; height: auto; + border-radius: var(--radius-picture-full-width); } .sg-page-public-page-components .sg-preview-area { diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 43fa164..28363b4 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", - "styleguideCommit": "c3c939f", - "syncedAtUtc": "2026-06-24T09:40:00Z", + "styleguideCommit": "733c9c0", + "syncedAtUtc": "2026-06-24T10:11:55Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index ae70648..2fbe5fd 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -193,6 +193,7 @@ --surface-navigation-card-body: var(--color-white); --surface-content-block-card-title: var(--color-light-grey); --surface-content-block-card-content: var(--color-white); + --radius-picture-full-width: var(--radius-card); --layout-content-cards-group-gap: var(--spacing-small); --surface-card-list-drawer: var(--color-background-purple); --text-content-block-card-title: var(--color-font-dark); @@ -3643,20 +3644,21 @@ main { /* Patterns: Text Layouts */ /* ========================================================= */ +.sg-page-text-layouts { + background: var(--surface-form-preview); +} + +.sg-page-text-layouts .sg-main-heading, +.sg-page-text-layouts .sg-preview-label { + color: inherit; +} + .sg-text-layout-pattern { display: flex; flex-direction: column; gap: var(--spacing-small); } -.sg-text-layout-pattern__preview-surface { - width: 100%; - box-sizing: border-box; - padding: var(--spacing-large); - border-radius: var(--radius-card); - background: var(--surface-text-layout-preview); -} - .sg-text-layout-pattern__sample { margin: 0; } @@ -3681,6 +3683,11 @@ main { column-gap: var(--layout-text-layout-column-gap); } +.sg-text-layout-pattern__two-column--stacked-mobile { + width: 100%; + min-width: 0; +} + .sg-text-layout-pattern__three-column-distributed { width: 100%; min-width: 0; @@ -3714,9 +3721,15 @@ main { .sg-text-layout-pattern__sample--sixty-width, .sg-text-layout-pattern__sample--two-column, .sg-text-layout-pattern__two-column, + .sg-text-layout-pattern__two-column--stacked-mobile, .sg-text-layout-pattern__three-column-distributed { width: 100%; } + + .sg-text-layout-pattern__two-column--stacked-mobile { + grid-template-columns: 1fr; + row-gap: var(--layout-text-layout-column-gap); + } } /* ========================================================= */ @@ -4609,6 +4622,7 @@ main { width: 100%; max-width: 100%; height: auto; + border-radius: var(--radius-picture-full-width); } .sg-page-public-page-components .sg-preview-area {