feat: Add columns / column shortcodes (#970)

MoritzWeber0 · lenderom · web-flow · commit 4be773fc0c8e · 2026-06-22T19:06:15.000+02:00
Add the possibility to define columns in a specific container: 

```
{{% columns %}}
{{% column width="40%" %}}
Column 1
{{% /column %}}
{{% column width="60%" %}}
Wider Column 2
{{% /column %}}
{{% /columns %}}
```

---------

Co-authored-by: lennartrommeiss &lt;61516567+lenderom@users.noreply.github.com&gt;
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
@@ -284,6 +284,20 @@ figure {
   }
 }
 
+.o-columns {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+
+  @media (max-width: #{$breakpoint-md}) {
+    flex-direction: column;
+
+    > .o-columns__column {
+      flex-basis: 100% !important;
+    }
+  }
+}
+
 .o-single {
   padding: 2rem;
   background-color: var(--bg-default);
diff --git a/content/operator/cd/index.de.md b/content/operator/cd/index.de.md
@@ -267,18 +267,14 @@ Auf einigen Routen und Regionen gelten keine FIP Vergünstigungen, obwohl die Ve
 
 Für eine Übersicht der Gültigkeit kann die Übersichtskarte hier verwendet werden. Ausführlichere Informationen finden sich in der Detailkarte und den konkreten Regelungen in den folgenden Abschnitten zu [ČD Kommerzielle Verbindungen (zuschlagspflichtig)](#čd-kommerzielle-verbindungen-zuschlagspflichtig) und [Verbindungen der ČD ohne FIP](#verbindungen-der-čd-ohne-fip).
 
-<div style="display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem;">
-  <figure style="flex:1; margin:0;">
-    <img src="/en/operator/cd/cd-fip-map-overview-26.webp" alt="FIP Gültigkeitskarte Überblick für Tschechien" style="width:100%; height:auto; display:block;" />
-    <hr aria-hidden="true" />
-    <figcaption><a href="/en/operator/cd/cd-fip-map-overview-26.webp">Überblick FIP Gültigkeitskarte (Vollbild)</a> für Tschechien (© Petr Duda)</figcaption>
-  </figure>
-  <figure style="flex:1; margin:0;">
-    <img src="/en/operator/cd/cd-fip-map-detail-26.webp" alt="FIP Gültigkeitskarte Detail für Tschechien" style="width:100%; height:auto; display:block;" />
-    <hr aria-hidden="true" />
-    <figcaption><a href="/en/operator/cd/cd-fip-map-detail-26.webp">Detail FIP Gültigkeitskarte (Vollbild)</a> für Tschechien (© Petr Duda)</figcaption>
-  </figure>
-</div>
+{{% columns %}}
+{{% column width="50%" %}}
+![[Überblick FIP Gültigkeitskarte (Vollbild)](/de/operator/cd/cd-fip-map-overview-26.webp) für Tschechien (© Petr Duda)](cd-fip-map-overview-26.webp)
+{{% /column %}}
+{{% column width="50%" %}}
+![[Detail FIP Gültigkeitskarte (Vollbild)](/de/operator/cd/cd-fip-map-detail-26.webp) für Tschechien (© Petr Duda)](cd-fip-map-detail-26.webp)
+{{% /column %}}
+{{% /columns %}}
 
 ### ČD Kommerzielle Verbindungen (zuschlagspflichtig)
 
diff --git a/content/operator/cd/index.en.md b/content/operator/cd/index.en.md
@@ -267,18 +267,14 @@ On some routes and in some regions, FIP benefits are not valid, even if the serv
 
 For an overview of validity, the overview map can be used here. More detailed information can be found in the detailed map and the specific rules in the following sections on [ČD Commercial Services (Surcharge Required)](#čd-commercial-services-surcharge-required) and [ČD Services Without FIP](#čd-services-without-fip).
 
-<div style="display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem;">
-  <figure style="flex:1; margin:0;">
-    <img src="/en/operator/cd/cd-fip-map-overview-26.webp" alt="FIP validity map overview for Czechia" style="width:100%; height:auto; display:block;" />
-    <hr aria-hidden="true" />
-    <figcaption><a href="/en/operator/cd/cd-fip-map-overview-26.webp">Overview FIP validity map (full view)</a> for Czechia (© Petr Duda)</figcaption>
-  </figure>
-  <figure style="flex:1; margin:0;">
-    <img src="/en/operator/cd/cd-fip-map-detail-26.webp" alt="FIP validity map detail for Czechia" style="width:100%; height:auto; display:block;" />
-    <hr aria-hidden="true" />
-    <figcaption><a href="/en/operator/cd/cd-fip-map-detail-26.webp">Detailed FIP validity map (full view)</a> for Czechia (© Petr Duda)</figcaption>
-  </figure>
-</div>
+{{% columns %}}
+{{% column width="50%" %}}
+![[Overview FIP validity map (full view)](/en/operator/cd/cd-fip-map-overview-26.webp) for Czechia (© Petr Duda)](cd-fip-map-overview-26.webp)
+{{% /column %}}
+{{% column width="50%" %}}
+![[Detailed FIP validity map (full view)](/en/operator/cd/cd-fip-map-detail-26.webp) for Czechia (© Petr Duda)](cd-fip-map-detail-26.webp)
+{{% /column %}}
+{{% /columns %}}
 
 ### ČD Commercial Services (Surcharge Required)
 
diff --git a/content/operator/cd/index.fr.md b/content/operator/cd/index.fr.md
@@ -267,18 +267,14 @@ Sur certaines lignes et dans certaines régions, les avantages FIP ne sont pas v
 
 Pour un aperçu de la validité, la carte de vue d’ensemble peut être consultée ici. Des informations plus détaillées sont disponibles dans la carte détaillée et les règles spécifiques dans les sections suivantes sur les [Liaisons commerciales ČD (supplément obligatoire)](#liaisons-commerciales-čd-supplément-obligatoire) et les [Services ČD sans FIP](#services-čd-sans-fip).
 
-<div style="display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem;">
-  <figure style="flex:1; margin:0;">
-    <img src="/en/operator/cd/cd-fip-map-overview-26.webp" alt="Carte de validité FIP vue d’ensemble pour la Tchéquie" style="width:100%; height:auto; display:block;" />
-    <hr aria-hidden="true" />
-    <figcaption><a href="/en/operator/cd/cd-fip-map-overview-26.webp">Carte de validité FIP vue d’ensemble (vue complète)</a> pour la Tchéquie (© Petr Duda)</figcaption>
-  </figure>
-  <figure style="flex:1; margin:0;">
-    <img src="/en/operator/cd/cd-fip-map-detail-26.webp" alt="Carte de validité FIP détaillée pour la Tchéquie" style="width:100%; height:auto; display:block;" />
-    <hr aria-hidden="true" />
-    <figcaption><a href="/en/operator/cd/cd-fip-map-detail-26.webp">Carte de validité FIP détaillée (vue complète)</a> pour la Tchéquie (© Petr Duda)</figcaption>
-  </figure>
-</div>
+{{% columns %}}
+{{% column width="50%" %}}
+![[Carte de validité FIP vue d’ensemble (vue complète)](/fr/operator/cd/cd-fip-map-overview-26.webp) pour la Tchéquie (© Petr Duda)](cd-fip-map-overview-26.webp)
+{{% /column %}}
+{{% column width="50%" %}}
+![[Carte de validité FIP détaillée (vue complète)](/fr/operator/cd/cd-fip-map-detail-26.webp) pour la Tchéquie (© Petr Duda)](cd-fip-map-detail-26.webp)
+{{% /column %}}
+{{% /columns %}}
 
 ### Liaisons commerciales ČD (supplément obligatoire)
 
diff --git a/layouts/_shortcodes/column.html b/layouts/_shortcodes/column.html
@@ -0,0 +1,3 @@
+<div class="o-columns__column" style="flex-basis: {{ .Get "width" }};">
+  {{ .Inner }}
+</div>
diff --git a/layouts/_shortcodes/columns.html b/layouts/_shortcodes/columns.html
@@ -0,0 +1 @@
+<div class="o-columns">{{ .Inner }}</div>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<div class="o-columns__column" style="flex-basis: {{ .Get "width" }};">`
	`2`	`+ {{ .Inner }}`
	`3`	`+</div>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<div class="o-columns">{{ .Inner }}</div>`