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

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

@@ -18,22 +18,22 @@ 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 Grid est un système de grille CSS avancé permettant d'organiser des éléments en colonnes et lignes responsives. Il supporte les spans (étendues) pour créer des mises en page complexes et dynamiques.
-
-## Structure
-
-Le composant se compose de deux éléments :
-- **spw-grid** : Conteneur de grille avec configuration responsive
-- **spw-grid-item** : Item individuel avec propriétés de positionnement
-
-## Cas d'usage
-
-- Grilles de tuiles ou cartes uniformes
-- Mise en avant d'un élément principal (span 2x2)
-- Sections de contenu avec hiérarchie visuelle
+                component: `
+<strong class="mr-2">Statut du composant :</strong> <spw-tag size="small" variant="green">Prêt</spw-tag>
+
+Le composant Grid est un système de grille CSS avancé permettant d'organiser des éléments en colonnes et lignes responsives. Il supporte les spans (étendues) pour créer des mises en page complexes et dynamiques.
+
+## Structure
+
+Le composant se compose de deux éléments :
+- **spw-grid** : Conteneur de grille avec configuration responsive
+- **spw-grid-item** : Item individuel avec propriétés de positionnement
+
+## Cas d'usage
+
+- Grilles de tuiles ou cartes uniformes
+- Mise en avant d'un élément principal (span 2x2)
+- Sections de contenu avec hiérarchie visuelle
         `,
             },
         },
@@ -41,291 +41,291 @@ Le composant se compose de deux éléments :
 };
 export default meta;
 function htmlContentBasicGrid() {
-    return /* HTML */ `
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Services aux citoyens" variant="light" href="#">
-        <spw-tile-title>Services aux citoyens</spw-tile-title>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Aides et subsides" variant="light" href="#">
-        <spw-tile-title>Aides et subsides</spw-tile-title>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Emploi et formation" variant="light" href="#">
-        <spw-tile-title>Emploi et formation</spw-tile-title>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Environnement" variant="light" href="#">
-        <spw-tile-title>Environnement</spw-tile-title>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Mobilité" variant="light" href="#">
-        <spw-tile-title>Mobilité</spw-tile-title>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Patrimoine" variant="light" href="#">
-        <spw-tile-title>Patrimoine</spw-tile-title>
-      </spw-tile>
-    </spw-grid-item>
+    return /* HTML */ `
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Services aux citoyens" variant="light" href="#">
+        <spw-tile-title>Services aux citoyens</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Aides et subsides" variant="light" href="#">
+        <spw-tile-title>Aides et subsides</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Emploi et formation" variant="light" href="#">
+        <spw-tile-title>Emploi et formation</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Environnement" variant="light" href="#">
+        <spw-tile-title>Environnement</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Mobilité" variant="light" href="#">
+        <spw-tile-title>Mobilité</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Patrimoine" variant="light" href="#">
+        <spw-tile-title>Patrimoine</spw-tile-title>
+      </spw-tile>
+    </spw-grid-item>
   `;
 }
 function htmlContentWithSpans() {
-    return /* HTML */ `
-    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Titre principal" variant="big" href="#">
-        <spw-tile-title>Titre principal - Grande tuile 2x2</spw-tile-title>
-        <spw-tile-description>Cette tuile occupe 2 colonnes et 2 lignes sur desktop et tablette pour mettre en avant un contenu important</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Actualité 2" variant="light" href="#">
-        <spw-tile-title>Titre secondaire</spw-tile-title>
-        <spw-tile-description>Tuile de taille normale</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Actualité 3" variant="light" href="#">
-        <spw-tile-title>Titre secondaire</spw-tile-title>
-        <spw-tile-description>Tuile de taille normale</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Actualité 4" variant="light" href="#">
-        <spw-tile-title>Titre secondaire</spw-tile-title>
-        <spw-tile-description>Tuile de taille normale</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Actualité 5" variant="light" href="#">
-        <spw-tile-title>Titre secondaire</spw-tile-title>
-        <spw-tile-description>Tuile de taille normale</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Actualité 6" variant="light" href="#">
-        <spw-tile-title>Titre secondaire</spw-tile-title>
-        <spw-tile-description>Tuile de taille normale</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
+    return /* HTML */ `
+    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Titre principal" variant="big" href="#">
+        <spw-tile-title>Titre principal - Grande tuile 2x2</spw-tile-title>
+        <spw-tile-description>Cette tuile occupe 2 colonnes et 2 lignes sur desktop et tablette pour mettre en avant un contenu important</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Actualité 2" variant="light" href="#">
+        <spw-tile-title>Titre secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Actualité 3" variant="light" href="#">
+        <spw-tile-title>Titre secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Actualité 4" variant="light" href="#">
+        <spw-tile-title>Titre secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Actualité 5" variant="light" href="#">
+        <spw-tile-title>Titre secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="landscape" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Actualité 6" variant="light" href="#">
+        <spw-tile-title>Titre secondaire</spw-tile-title>
+        <spw-tile-description>Tuile de taille normale</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
   `;
 }
 function htmlContentSquareTiles() {
-    return /* HTML */ `
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tourisme" variant="light" href="#">
-        <spw-tile-title>Tourisme</spw-tile-title>
-        <spw-tile-description>Visitez la Wallonie</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Culture" variant="light" href="#">
-        <spw-tile-title>Culture</spw-tile-title>
-        <spw-tile-description>Événements culturels</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Économie" variant="light" href="#">
-        <spw-tile-title>Économie</spw-tile-title>
-        <spw-tile-description>Soutien aux entreprises</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Innovation" variant="light" href="#">
-        <spw-tile-title>Innovation</spw-tile-title>
-        <spw-tile-description>Projets innovants</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Éducation" variant="light" href="#">
-        <spw-tile-title>Éducation</spw-tile-title>
-        <spw-tile-description>Enseignement et écoles</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Santé" variant="light" href="#">
-        <spw-tile-title>Santé</spw-tile-title>
-        <spw-tile-description>Services de santé</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4" image-alt="Sport" variant="light" href="#">
-        <spw-tile-title>Sport</spw-tile-title>
-        <spw-tile-description>Infrastructures sportives</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Nature" variant="light" href="#">
-        <spw-tile-title>Nature</spw-tile-title>
-        <spw-tile-description>Espaces naturels</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
+    return /* HTML */ `
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tourisme" variant="light" href="#">
+        <spw-tile-title>Tourisme</spw-tile-title>
+        <spw-tile-description>Visitez la Wallonie</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Culture" variant="light" href="#">
+        <spw-tile-title>Culture</spw-tile-title>
+        <spw-tile-description>Événements culturels</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Économie" variant="light" href="#">
+        <spw-tile-title>Économie</spw-tile-title>
+        <spw-tile-description>Soutien aux entreprises</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Innovation" variant="light" href="#">
+        <spw-tile-title>Innovation</spw-tile-title>
+        <spw-tile-description>Projets innovants</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Éducation" variant="light" href="#">
+        <spw-tile-title>Éducation</spw-tile-title>
+        <spw-tile-description>Enseignement et écoles</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Santé" variant="light" href="#">
+        <spw-tile-title>Santé</spw-tile-title>
+        <spw-tile-description>Services de santé</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4" image-alt="Sport" variant="light" href="#">
+        <spw-tile-title>Sport</spw-tile-title>
+        <spw-tile-description>Infrastructures sportives</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Nature" variant="light" href="#">
+        <spw-tile-title>Nature</spw-tile-title>
+        <spw-tile-description>Espaces naturels</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
   `;
 }
 function htmlContentMixedSpans() {
-    return /* HTML */ `
-    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Mise en avant" variant="big" href="#">
-        <spw-tile-title>Contenu principal 2x2</spw-tile-title>
-        <spw-tile-description>Grande tuile occupant 2 colonnes et 2 lignes</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tuile 1" variant="light" href="#">
-        <spw-tile-title>Tuile normale</spw-tile-title>
-        <spw-tile-description>Contenu standard</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Tuile 2" variant="light" href="#">
-        <spw-tile-title>Tuile normale</spw-tile-title>
-        <spw-tile-description>Contenu standard</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Tuile 3" variant="light" href="#">
-        <spw-tile-title>Tuile normale</spw-tile-title>
-        <spw-tile-description>Contenu standard</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Tuile 4" variant="light" href="#">
-        <spw-tile-title>Tuile normale</spw-tile-title>
-        <spw-tile-description>Contenu standard</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Tuile 5" variant="light" href="#">
-        <spw-tile-title>Tuile normale</spw-tile-title>
-        <spw-tile-description>Contenu standard</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Tuile 6" variant="light" href="#">
-        <spw-tile-title>Tuile normale</spw-tile-title>
-        <spw-tile-description>Contenu standard</spw-tile-description>
-      </spw-tile>
-    </spw-grid-item>
+    return /* HTML */ `
+    <spw-grid-item col-span-desktop="2" row-span-desktop="2" col-span-tablet="2" row-span-tablet="2">
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4" image-alt="Mise en avant" variant="big" href="#">
+        <spw-tile-title>Contenu principal 2x2</spw-tile-title>
+        <spw-tile-description>Grande tuile occupant 2 colonnes et 2 lignes</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5" image-alt="Tuile 1" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab" image-alt="Tuile 2" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0" image-alt="Tuile 3" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1497366216548-37526070297c" image-alt="Tuile 4" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40" image-alt="Tuile 5" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-tile height="square" image-src="https://images.unsplash.com/photo-1531482615713-2afd69097998" image-alt="Tuile 6" variant="light" href="#">
+        <spw-tile-title>Tuile normale</spw-tile-title>
+        <spw-tile-description>Contenu standard</spw-tile-description>
+      </spw-tile>
+    </spw-grid-item>
   `;
 }
 function htmlContentCardsWithSpan() {
-    return /* HTML */ `
-    <spw-grid-item col-span-desktop="2" col-span-tablet="2">
-      <spw-card variant="highlighted" href="#">
-        <spw-card-image ratio="16/11">
-          <img
-            alt="Image"
-            src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
-          />
-        </spw-card-image>
-        <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Comment soutenir nos agricultrices et agriculteurs ?</spw-card-title>
-          <spw-card-excerpt>
-            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
-            (APAQ-W) nous propose quelques pistes pour privilégier le local.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-card full-height="true" href="#">
-        <spw-card-image>
-          <img
-            alt="Image"
-            src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
-          />
-        </spw-card-image>
-        <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Titre secondaire</spw-card-title>
-          <spw-card-excerpt>
-            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
-            (APAQ-W) nous propose quelques pistes pour privilégier le local.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-card full-height="true" href="#">
-        <spw-card-image>
-          <img
-            alt="Image"
-            src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
-          />
-        </spw-card-image>
-        <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Titre secondaire</spw-card-title>
-          <spw-card-excerpt>
-            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
-            (APAQ-W) nous propose quelques pistes pour privilégier le local.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-card full-height="true" href="#">
-        <spw-card-image>
-          <img
-            alt="Image"
-            src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
-          />
-        </spw-card-image>
-        <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Titre secondaire</spw-card-title>
-          <spw-card-excerpt>
-            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
-            (APAQ-W) nous propose quelques pistes pour privilégier le local.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-grid-item>
-
-    <spw-grid-item>
-      <spw-card full-height="true" href="#">
-        <spw-card-image>
-          <img
-            alt="Image"
-            src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
-          />
-        </spw-card-image>
-        <spw-card-content tag="Actualités" date="2024-02-09">
-          <spw-card-title>Titre secondaire</spw-card-title>
-          <spw-card-excerpt>
-            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
-            (APAQ-W) nous propose quelques pistes pour privilégier le local.
-          </spw-card-excerpt>
-        </spw-card-content>
-      </spw-card>
-    </spw-grid-item>
+    return /* HTML */ `
+    <spw-grid-item col-span-desktop="2" col-span-tablet="2">
+      <spw-card variant="highlighted" href="#">
+        <spw-card-image ratio="16/11">
+          <img
+            alt="Image"
+            src="https://images.unsplash.com/photo-1465056836041-7f43ac27dcb5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
+          />
+        </spw-card-image>
+        <spw-card-content tag="Actualités" date="2024-02-09">
+          <spw-card-title>Comment soutenir nos agricultrices et agriculteurs ?</spw-card-title>
+          <spw-card-excerpt>
+            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
+            (APAQ-W) nous propose quelques pistes pour privilégier le local.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-card full-height="true" href="#">
+        <spw-card-image>
+          <img
+            alt="Image"
+            src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
+          />
+        </spw-card-image>
+        <spw-card-content tag="Actualités" date="2024-02-09">
+          <spw-card-title>Titre secondaire</spw-card-title>
+          <spw-card-excerpt>
+            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
+            (APAQ-W) nous propose quelques pistes pour privilégier le local.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-card full-height="true" href="#">
+        <spw-card-image>
+          <img
+            alt="Image"
+            src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
+          />
+        </spw-card-image>
+        <spw-card-content tag="Actualités" date="2024-02-09">
+          <spw-card-title>Titre secondaire</spw-card-title>
+          <spw-card-excerpt>
+            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
+            (APAQ-W) nous propose quelques pistes pour privilégier le local.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-card full-height="true" href="#">
+        <spw-card-image>
+          <img
+            alt="Image"
+            src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
+          />
+        </spw-card-image>
+        <spw-card-content tag="Actualités" date="2024-02-09">
+          <spw-card-title>Titre secondaire</spw-card-title>
+          <spw-card-excerpt>
+            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
+            (APAQ-W) nous propose quelques pistes pour privilégier le local.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-grid-item>
+
+    <spw-grid-item>
+      <spw-card full-height="true" href="#">
+        <spw-card-image>
+          <img
+            alt="Image"
+            src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fGxhbmRzY2FwZXxlbnwwfHwwfHx8MA%3D%3D"
+          />
+        </spw-card-image>
+        <spw-card-content tag="Actualités" date="2024-02-09">
+          <spw-card-title>Titre secondaire</spw-card-title>
+          <spw-card-excerpt>
+            L'actualité nous invite à nous engager, à devenir chaque jour un peu plus "consom'acteur". Comment ? L'Agence wallonne pour la Promotion d'une Agriculture de Qualité
+            (APAQ-W) nous propose quelques pistes pour privilégier le local.
+          </spw-card-excerpt>
+        </spw-card-content>
+      </spw-card>
+    </spw-grid-item>
   `;
 }
 const TemplateBasic = args => {
@@ -412,10 +412,10 @@ Default.args = {
 Default.parameters = {
     docs: {
         description: {
-            story: `
-Grille de base avec 3 colonnes sur desktop, 2 sur tablette et 1 sur mobile. Toutes les tuiles ont la même taille et s'ajustent automatiquement.
-
-Cas d'usage : galerie de services, liste de catégories, ou présentation de contenus homogènes. La grille est responsive et s'adapte automatiquement selon le breakpoint.
+            story: `
+Grille de base avec 3 colonnes sur desktop, 2 sur tablette et 1 sur mobile. Toutes les tuiles ont la même taille et s'ajustent automatiquement.
+
+Cas d'usage : galerie de services, liste de catégories, ou présentation de contenus homogènes. La grille est responsive et s'adapte automatiquement selon le breakpoint.
       `,
         },
     },