Add text layout patterns page with full, 60%, and two-column variants

2026-05-21 11:32:20 +02:00
parent bfd5e9cf66
commit 576357cf39
3 changed files with 73 additions and 0 deletions
@@ -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                */
 /* ========================================================= */