@spw-ds/spw-stencil-library 1.3.4 → 1.4.0

package/dist/collection/stories/organisms/spw-mosaic/spw-mosaic.stories.js

@@ -18,39 +18,39 @@ const meta = {
     parameters: {
         docs: {
             description: {
-                component: `
-<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
-
-Le composant Mosaic permet d'afficher une grille d'éléments sous la forme d'un masonry (mise en page dynamique type Pinterest). Il s'adapte automatiquement à la hauteur variable des contenus et offre une configuration responsive.
-
-## Structure
-
-Le composant se compose de deux éléments :
-- **spw-mosaic** : Conteneur principal avec gestion du masonry layout
-- **spw-mosaic-item** : Wrapper pour chaque élément de la grille
-
-## Configuration responsive
-
-- **colsDesktop** : Nombre de colonnes en vue desktop (défaut: 3)
-- **colsTablet** : Nombre de colonnes en vue tablette (défaut: 2)
-- **colsMobile** : Nombre de colonnes en vue mobile (défaut: 1)
-- **isMasonry** : Active/désactive le mode masonry layout
-
-## Fonctionnalités
-
-- Layout masonry automatique avec bibliothèque Masonry.js
-- Grille responsive configurée par breakpoint
-- Chargement intelligent des images avant disposition
-- Support de tout type de contenu (cards, tiles)
-- Mode grille classique si masonry désactivé
-
-## Cas d'usage
-
-- Galeries d'actualités avec images de tailles variées
-- Grilles de cartes avec contenus de hauteurs différentes
-- Affichage de tuiles d'accès rapides organisées
-
-[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
+                component: `
+<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
+
+Le composant Mosaic permet d'afficher une grille d'éléments sous la forme d'un masonry (mise en page dynamique type Pinterest). Il s'adapte automatiquement à la hauteur variable des contenus et offre une configuration responsive.
+
+## Structure
+
+Le composant se compose de deux éléments :
+- **spw-mosaic** : Conteneur principal avec gestion du masonry layout
+- **spw-mosaic-item** : Wrapper pour chaque élément de la grille
+
+## Configuration responsive
+
+- **colsDesktop** : Nombre de colonnes en vue desktop (défaut: 3)
+- **colsTablet** : Nombre de colonnes en vue tablette (défaut: 2)
+- **colsMobile** : Nombre de colonnes en vue mobile (défaut: 1)
+- **isMasonry** : Active/désactive le mode masonry layout
+
+## Fonctionnalités
+
+- Layout masonry automatique avec bibliothèque Masonry.js
+- Grille responsive configurée par breakpoint
+- Chargement intelligent des images avant disposition
+- Support de tout type de contenu (cards, tiles)
+- Mode grille classique si masonry désactivé
+
+## Cas d'usage
+
+- Galeries d'actualités avec images de tailles variées
+- Grilles de cartes avec contenus de hauteurs différentes
+- Affichage de tuiles d'accès rapides organisées
+
+[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/378091-carousel-slider)
         `,
             },
         },
@@ -58,262 +58,262 @@ Le composant se compose de deux éléments :
 };
 export default meta;
 function htmlContentCards() {
-    return /* HTML */ `
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
-          <spw-card-subtags>
-            <spw-card-subtag-item link="http://google.be">Sous-tag 1</spw-card-subtag-item>
-            <spw-card-subtag-item link="http://google.be">Sous-tag 2</spw-card-subtag-item>
-          </spw-card-subtags>
-          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
-          <spw-card-excerpt>
-            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image label="Tag">
-          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
-        </spw-card-image>
-        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
-          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
-          <spw-card-excerpt>
-            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image label="Tag">
-          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
-        </spw-card-image>
-        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
-          <spw-card-title>Lorem ipsum dolor sit</spw-card-title>
-          <spw-card-excerpt>
-            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image label="Tag">
-          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
-        </spw-card-image>
-        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
-          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
-          <spw-card-excerpt>
-            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image label="Tag">
-          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
-        </spw-card-image>
-        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
-          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
-          <spw-card-excerpt>
-            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
-          <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>
-          <spw-card-excerpt>
-            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
+    return /* HTML */ `
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
+          <spw-card-subtags>
+            <spw-card-subtag-item link="http://google.be">Sous-tag 1</spw-card-subtag-item>
+            <spw-card-subtag-item link="http://google.be">Sous-tag 2</spw-card-subtag-item>
+          </spw-card-subtags>
+          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
+          <spw-card-excerpt>
+            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image label="Tag">
+          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
+        </spw-card-image>
+        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
+          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
+          <spw-card-excerpt>
+            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image label="Tag">
+          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
+        </spw-card-image>
+        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
+          <spw-card-title>Lorem ipsum dolor sit</spw-card-title>
+          <spw-card-excerpt>
+            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image label="Tag">
+          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
+        </spw-card-image>
+        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
+          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
+          <spw-card-excerpt>
+            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image label="Tag">
+          <img alt="Image" src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" />
+        </spw-card-image>
+        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
+          <spw-card-title>Lorem ipsum dolor sit amet consectetur adipiscing</spw-card-title>
+          <spw-card-excerpt>
+            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-content subtag="Tag" tag="Catégorie" date="2024-02-09">
+          <spw-card-title>Lorem ipsum dolor sit amet</spw-card-title>
+          <spw-card-excerpt>
+            Nullam et orci ac sapien hendrerit porta non in ligula. Suspendisse quis mattis neque. Cras sagittis nisi non urna congue, sed iaculis felis fermentum.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
   `;
 }
 function htmlContentIconTiles() {
-    return /* HTML */ `
-    <spw-mosaic-item>
-      <spw-tile variant="icon" href="http://google.com" target="_blank">
-        <spw-icon icon="fa-power-off"></spw-icon>
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-        <spw-tile-description>Description de ma tuile</spw-tile-description>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile variant="icon" href="http://google.com" target="_blank">
-        <spw-icon icon="fa-map-location-dot"></spw-icon>
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-        <spw-tile-description>Description de ma tuile</spw-tile-description>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile variant="icon" href="http://google.com" target="_blank">
-        <spw-icon icon="fa-paper-plane"></spw-icon>
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-        <spw-tile-description>Description de ma tuile</spw-tile-description>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile variant="icon" href="http://google.com" target="_blank">
-        <spw-icon icon="fa-user"></spw-icon>
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-        <spw-tile-description>Description de ma tuile</spw-tile-description>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile variant="icon" href="http://google.com" target="_blank">
-        <spw-icon icon="fa-image"></spw-icon>
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-        <spw-tile-description>Description de ma tuile</spw-tile-description>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile variant="icon" href="http://google.com" target="_blank">
-        <spw-icon icon="fa-bell"></spw-icon>
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-        <spw-tile-description>Description de ma tuile</spw-tile-description>
-      </spw-tile>
-    </spw-mosaic-item>
+    return /* HTML */ `
+    <spw-mosaic-item>
+      <spw-tile variant="icon" href="http://google.com" target="_blank">
+        <spw-icon icon="fa-power-off"></spw-icon>
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+        <spw-tile-description>Description de ma tuile</spw-tile-description>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile variant="icon" href="http://google.com" target="_blank">
+        <spw-icon icon="fa-map-location-dot"></spw-icon>
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+        <spw-tile-description>Description de ma tuile</spw-tile-description>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile variant="icon" href="http://google.com" target="_blank">
+        <spw-icon icon="fa-paper-plane"></spw-icon>
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+        <spw-tile-description>Description de ma tuile</spw-tile-description>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile variant="icon" href="http://google.com" target="_blank">
+        <spw-icon icon="fa-user"></spw-icon>
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+        <spw-tile-description>Description de ma tuile</spw-tile-description>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile variant="icon" href="http://google.com" target="_blank">
+        <spw-icon icon="fa-image"></spw-icon>
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+        <spw-tile-description>Description de ma tuile</spw-tile-description>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile variant="icon" href="http://google.com" target="_blank">
+        <spw-icon icon="fa-bell"></spw-icon>
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+        <spw-tile-description>Description de ma tuile</spw-tile-description>
+      </spw-tile>
+    </spw-mosaic-item>
   `;
 }
 function htmlContentLightTiles() {
-    return /* HTML */ `
-    <spw-mosaic-item>
-      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-      </spw-tile>
-    </spw-mosaic-item>
+    return /* HTML */ `
+    <spw-mosaic-item>
+      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="light" href="http://google.com" target="_blank">
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+      </spw-tile>
+    </spw-mosaic-item>
   `;
 }
 function htmlContentBigTiles() {
-    return /* HTML */ `
-    <spw-mosaic-item>
-      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-      </spw-tile>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
-        <spw-tile-title>Titre de ma tuile</spw-tile-title>
-      </spw-tile>
-    </spw-mosaic-item>
+    return /* HTML */ `
+    <spw-mosaic-item>
+      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+      </spw-tile>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-tile image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Image de tuile" variant="big" href="http://google.com" target="_blank">
+        <spw-tile-title>Titre de ma tuile</spw-tile-title>
+      </spw-tile>
+    </spw-mosaic-item>
   `;
 }
 function htmlContentFeaturedCard() {
-    return /* HTML */ `
-    <spw-mosaic-item col-span-desktop="2" col-span-tablet="2">
-      <spw-card variant="highlighted" full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio-mobile="4/3" ratio-tablet="16/8" ratio-desktop="15/9">
-          <img alt="Vennbahn au Couvent Vert" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Vennbahn : une piste cyclable transfrontalière exceptionnelle</spw-card-title>
-          <spw-card-excerpt>
-            La Vennbahn, ancienne ligne de chemin de fer, est aujourd'hui une véloroute transfrontalière traversant la Belgique et l'Allemagne sur 125 km. Elle offre un parcours
-            unique à travers les Hautes Fagnes.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio="16/9">
-          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Mobilité" date="2024-02-08">
-          <spw-card-title>Nouveaux aménagements cyclables en Wallonie</spw-card-title>
-          <spw-card-excerpt>Le réseau cyclable wallon s'enrichit de nouveaux aménagements pour faciliter la mobilité douce.</spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio="16/9">
-          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Patrimoine" date="2024-02-07">
-          <spw-card-title>Restauration des châteaux wallons</spw-card-title>
-          <spw-card-excerpt>Programme de restauration pour préserver notre patrimoine historique exceptionnel.</spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio="16/9">
-          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Environnement" date="2024-02-06">
-          <spw-card-title>Protection des espaces naturels</spw-card-title>
-          <spw-card-excerpt>Nouvelles mesures pour préserver la biodiversité de nos régions.</spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio="16/9">
-          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Énergie" date="2024-02-05">
-          <spw-card-title>Transition énergétique en Wallonie</spw-card-title>
-          <spw-card-excerpt>Initiatives locales pour un avenir énergétique durable et renouvelable.</spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio="16/9">
-          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Tourisme" date="2024-02-04">
-          <spw-card-title>Promotion du tourisme local</spw-card-title>
-          <spw-card-excerpt>Campagne de valorisation des attraits touristiques wallons.</spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio="16/9">
-          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Infrastructure" date="2024-02-03">
-          <spw-card-title>Modernisation des routes régionales</spw-card-title>
-          <spw-card-excerpt>Travaux d'amélioration pour un réseau routier plus sûr et efficace.</spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
-    <spw-mosaic-item>
-      <spw-card full-height="true" href="http://google.com" target="_blank">
-        <spw-card-image ratio="16/9">
-          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
-        </spw-card-image>
-        <spw-card-content tag="Culture" date="2024-02-02">
-          <spw-card-title>Festivals culturels wallons 2024</spw-card-title>
-          <spw-card-excerpt>Découvrez la programmation culturelle exceptionnelle de cette année.</spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-mosaic-item>
+    return /* HTML */ `
+    <spw-mosaic-item col-span-desktop="2" col-span-tablet="2">
+      <spw-card variant="highlighted" full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio-mobile="4/3" ratio-tablet="16/8" ratio-desktop="15/9">
+          <img alt="Vennbahn au Couvent Vert" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Actualités" date="2024-02-09">
+          <spw-card-title>Vennbahn : une piste cyclable transfrontalière exceptionnelle</spw-card-title>
+          <spw-card-excerpt>
+            La Vennbahn, ancienne ligne de chemin de fer, est aujourd'hui une véloroute transfrontalière traversant la Belgique et l'Allemagne sur 125 km. Elle offre un parcours
+            unique à travers les Hautes Fagnes.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Mobilité" date="2024-02-08">
+          <spw-card-title>Nouveaux aménagements cyclables en Wallonie</spw-card-title>
+          <spw-card-excerpt>Le réseau cyclable wallon s'enrichit de nouveaux aménagements pour faciliter la mobilité douce.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Patrimoine" date="2024-02-07">
+          <spw-card-title>Restauration des châteaux wallons</spw-card-title>
+          <spw-card-excerpt>Programme de restauration pour préserver notre patrimoine historique exceptionnel.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Environnement" date="2024-02-06">
+          <spw-card-title>Protection des espaces naturels</spw-card-title>
+          <spw-card-excerpt>Nouvelles mesures pour préserver la biodiversité de nos régions.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Énergie" date="2024-02-05">
+          <spw-card-title>Transition énergétique en Wallonie</spw-card-title>
+          <spw-card-excerpt>Initiatives locales pour un avenir énergétique durable et renouvelable.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Tourisme" date="2024-02-04">
+          <spw-card-title>Promotion du tourisme local</spw-card-title>
+          <spw-card-excerpt>Campagne de valorisation des attraits touristiques wallons.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Infrastructure" date="2024-02-03">
+          <spw-card-title>Modernisation des routes régionales</spw-card-title>
+          <spw-card-excerpt>Travaux d'amélioration pour un réseau routier plus sûr et efficace.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
+    <spw-mosaic-item>
+      <spw-card full-height="true" href="http://google.com" target="_blank">
+        <spw-card-image ratio="16/9">
+          <img alt="Image actualité" src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba" />
+        </spw-card-image>
+        <spw-card-content tag="Culture" date="2024-02-02">
+          <spw-card-title>Festivals culturels wallons 2024</spw-card-title>
+          <spw-card-excerpt>Découvrez la programmation culturelle exceptionnelle de cette année.</spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-mosaic-item>
   `;
 }
 function camelToKebab(str) {
@@ -437,10 +437,10 @@ FeaturedCard.args = {
 Cards.parameters = {
     docs: {
         description: {
-            story: `
-Mosaïque de cartes (spw-card) avec masonry activé en 3 colonnes desktop, 2 tablette, 1 mobile. Mélange de cartes avec et sans images, avec contenus de hauteurs variables (titres courts et longs).
-
-Cas d'usage : galerie d'actualités, liste d'événements avec visuels optionnels, affichage de contenus éditoriaux mixtes. Le masonry permet une disposition harmonieuse malgré les hauteurs différentes.
+            story: `
+Mosaïque de cartes (spw-card) avec masonry activé en 3 colonnes desktop, 2 tablette, 1 mobile. Mélange de cartes avec et sans images, avec contenus de hauteurs variables (titres courts et longs).
+
+Cas d'usage : galerie d'actualités, liste d'événements avec visuels optionnels, affichage de contenus éditoriaux mixtes. Le masonry permet une disposition harmonieuse malgré les hauteurs différentes.
       `,
         },
     },
@@ -448,10 +448,10 @@ Cas d'usage : galerie d'actualités, liste d'événements avec visuels optionnel
 IconTiles.parameters = {
     docs: {
         description: {
-            story: `
-Mosaïque de tuiles icônes (spw-tile variant="icon") organisées en grille masonry. Chaque tuile affiche une icône FontAwesome, un titre et une description. Configuration 3/2/1 colonnes.
-
-Cas d'usage : grille d'accès rapides aux services, menu de fonctionnalités principales, portail d'outils avec icônes représentatives. Format compact et visuellement équilibré.
+            story: `
+Mosaïque de tuiles icônes (spw-tile variant="icon") organisées en grille masonry. Chaque tuile affiche une icône FontAwesome, un titre et une description. Configuration 3/2/1 colonnes.
+
+Cas d'usage : grille d'accès rapides aux services, menu de fonctionnalités principales, portail d'outils avec icônes représentatives. Format compact et visuellement équilibré.
       `,
         },
     },
@@ -459,10 +459,10 @@ Cas d'usage : grille d'accès rapides aux services, menu de fonctionnalités pri
 LightTiles.parameters = {
     docs: {
         description: {
-            story: `
-Mosaïque de tuiles légères (spw-tile variant="light") avec images de fond. Format minimaliste avec titre en overlay sur l'image. Configuration responsive 3/2/1 colonnes.
-
-Cas d'usage : galerie de catégories thématiques, navigation visuelle par sections, portfolio de projets avec aperçu visuel. L'image attire l'attention et le titre identifie le contenu.
+            story: `
+Mosaïque de tuiles légères (spw-tile variant="light") avec images de fond. Format minimaliste avec titre en overlay sur l'image. Configuration responsive 3/2/1 colonnes.
+
+Cas d'usage : galerie de catégories thématiques, navigation visuelle par sections, portfolio de projets avec aperçu visuel. L'image attire l'attention et le titre identifie le contenu.
       `,
         },
     },
@@ -470,10 +470,10 @@ Cas d'usage : galerie de catégories thématiques, navigation visuelle par secti
 BigTiles.parameters = {
     docs: {
         description: {
-            story: `
-Mosaïque de grandes tuiles (spw-tile variant="big") avec images plein format et titre en overlay. Format impactant avec icône chevron indiquant l'interactivité. Configuration 3/2/1 colonnes.
-
-Cas d'usage : mise en avant de grandes thématiques, landing pages avec sections principales, portails avec accès aux univers majeurs. Format généreux qui valorise le contenu visuel.
+            story: `
+Mosaïque de grandes tuiles (spw-tile variant="big") avec images plein format et titre en overlay. Format impactant avec icône chevron indiquant l'interactivité. Configuration 3/2/1 colonnes.
+
+Cas d'usage : mise en avant de grandes thématiques, landing pages avec sections principales, portails avec accès aux univers majeurs. Format généreux qui valorise le contenu visuel.
       `,
         },
     },
@@ -481,12 +481,12 @@ Cas d'usage : mise en avant de grandes thématiques, landing pages avec sections
 FeaturedCard.parameters = {
     docs: {
         description: {
-            story: `
-Mosaïque avec carte mise en avant utilisant l'override de colSpan. La première carte (variant="highlighted") occupe 2 colonnes en desktop et tablette grâce aux props col-span-desktop="2" et col-span-tablet="2" sur le spw-mosaic-item. Elle utilise également des ratios d'image responsifs différenciés (4/3 mobile, 16/8 tablette, 15/9 desktop). Les autres cartes occupent 1 colonne avec un ratio 16/9 standard.
-
-Cas d'usage : page d'actualités avec article principal mis en avant, galerie avec contenu featured, portail avec mise en évidence d'un événement majeur. Cette approche attire l'attention sur le contenu prioritaire tout en préservant une navigation claire vers les autres contenus.
-
-**Note technique** : Le mode masonry fonctionne mieux avec des items de largeur uniforme. L'utilisation de colSpan avec masonry peut créer des espacements inattendus. Pour des mises en page avec largeurs variables, envisager de désactiver le masonry (is-masonry="false").
+            story: `
+Mosaïque avec carte mise en avant utilisant l'override de colSpan. La première carte (variant="highlighted") occupe 2 colonnes en desktop et tablette grâce aux props col-span-desktop="2" et col-span-tablet="2" sur le spw-mosaic-item. Elle utilise également des ratios d'image responsifs différenciés (4/3 mobile, 16/8 tablette, 15/9 desktop). Les autres cartes occupent 1 colonne avec un ratio 16/9 standard.
+
+Cas d'usage : page d'actualités avec article principal mis en avant, galerie avec contenu featured, portail avec mise en évidence d'un événement majeur. Cette approche attire l'attention sur le contenu prioritaire tout en préservant une navigation claire vers les autres contenus.
+
+**Note technique** : Le mode masonry fonctionne mieux avec des items de largeur uniforme. L'utilisation de colSpan avec masonry peut créer des espacements inattendus. Pour des mises en page avec largeurs variables, envisager de désactiver le masonry (is-masonry="false").
       `,
         },
     },