diff --git a/content/fr/awesome/index.njk b/content/fr/awesome/index.njk
index c1f70cc4..fd377084 100644
--- a/content/fr/awesome/index.njk
+++ b/content/fr/awesome/index.njk
@@ -14,7 +14,8 @@ eleventyNavigation:
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-mb-3w">
   {% asyncAll filename, project in awesome.dist %}
   <div class="fr-col-12 fr-col-md-3">
-    {% set card = {
+    {% from "components/component.njk" import component with context %}
+    {{ component("card", {
       url: false,
       externalUrl: project.landingURL or project.url,
       title: project.name,
@@ -24,8 +25,7 @@ eleventyNavigation:
         alt: "Logo du projet"
       },
       detail: '<a class="fr-link link-no-style" href="https://github.com/codegouvfr/awesome-codegouvfr#awesome-codegouvfr-score" target="_blank"><img src="' + project.awesomeShield + '" alt="Badge Awesome CodeGouvFr du projet"></a>'
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>
diff --git a/content/fr/bluehats/bsoc/2022/contributions.njk b/content/fr/bluehats/bsoc/2022/contributions.njk
index e7c02c86..e5b59d00 100644
--- a/content/fr/bluehats/bsoc/2022/contributions.njk
+++ b/content/fr/bluehats/bsoc/2022/contributions.njk
@@ -12,7 +12,8 @@ permalink: /fr/bluehats/bsoc-contributions-2022/
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-mb-3w">
   {% asyncAll project in projects %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {% from "components/component.njk" import component with context %}
+    {{ component("card", {
       url: project.url,
       title: project.title,
       description: project.description,
@@ -20,8 +21,7 @@ permalink: /fr/bluehats/bsoc-contributions-2022/
         path: project.imagePath,
         alt: project.title
       }
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>
diff --git a/content/fr/bluehats/bsoc/2022/promotion.njk b/content/fr/bluehats/bsoc/2022/promotion.njk
index 49b66cb6..ef7551de 100644
--- a/content/fr/bluehats/bsoc/2022/promotion.njk
+++ b/content/fr/bluehats/bsoc/2022/promotion.njk
@@ -12,7 +12,8 @@ permalink: /fr/bluehats/bsoc-promotion-2022/
 <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">
   {% asyncAll person in people %}
   <div class="fr-col-12">
-    {% set card = {
+    {% from "components/component.njk" import component with context %}
+    {{ component("card", {
       url: person.projectUrl,
       urlDescription: "En savoir plus sur " + person.projectName,
       title: person.name,
@@ -22,8 +23,7 @@ permalink: /fr/bluehats/bsoc-promotion-2022/
         alt: person.name
       },
       orientation: "horizontal"
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>
diff --git a/content/fr/communs/index.njk b/content/fr/communs/index.njk
index cf60f240..40fe4d5d 100644
--- a/content/fr/communs/index.njk
+++ b/content/fr/communs/index.njk
@@ -6,10 +6,10 @@ eleventyNavigation:
   parent: Ressources
   order: 7
 ---
-{% set callout = {
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
   description: "Cette page vise à valoriser les démarches de communs numériques engagées par les administrations.  Elle référence aussi des communs numériques libres et collaboratifs auxquels le secteur public contribue déjà.  Les références proposées sur cette page sont appelées à évoluer au fil du temps."
-} %}
-{% include "components/callout.njk" %}
+}) }}
 <h2>Des communs numériques déjà utilisés dans le secteur public</h2>
 <p>On ne présente plus les projets Wikimédia, OpenStreetMap ou Open Food Facts. Ces communs numériques libres et
   collaboratifs font déjà l'objet de contributions de la part de l'administration et nous vous encourageons à y
@@ -17,13 +17,12 @@ eleventyNavigation:
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-py-3w">
   {% asyncAll communNumerique in communsNumeriques %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {{ component("card", {
       url: false,
       externalUrl: communNumerique.url,
       title: communNumerique.title,
       description: communNumerique.description
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>
@@ -33,7 +32,7 @@ eleventyNavigation:
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-py-3w">
   {% asyncAll communNumerique in admCommunsNumeriques %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {{ component("card", {
       url: false,
       externalUrl: communNumerique.url,
       title: communNumerique.title,
@@ -42,8 +41,7 @@ eleventyNavigation:
         path: communNumerique.imagePath,
         alt: communNumerique.title
       }
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>
diff --git a/content/fr/explicabilite/index.njk b/content/fr/explicabilite/index.njk
index 603604b6..7f3c967d 100644
--- a/content/fr/explicabilite/index.njk
+++ b/content/fr/explicabilite/index.njk
@@ -6,22 +6,21 @@ eleventyNavigation:
   parent: Ressources
   order: 9
 ---
-{% set callout = {
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
   description: "Cette page recense les outils logiciels pouvant aider les administrations à mettre en œuvre l'explication des décisions administratives lorsque celles-ci reposent sur des algorithmes opérés par des programmes informatiques"
-} %}
-{% include "components/callout.njk" %}
+}) }}
 
 <h2>Différents outils, différentes finalités</h2>
 
 <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--center fr-py-3w">
   {% asyncAll outilExplicabilite in outilsExplicabilite %}
   <div class="fr-col-12 fr-col-md-4">
-    {% set card = {
+    {{ component("card", {
       url: outilExplicabilite.url,
       title: outilExplicabilite.title,
       description: outilExplicabilite.description
-    } %}
-    {% include "components/card.njk" %}
+    }) }}
   </div>
   {% endall %}
 </div>
diff --git a/content/fr/utiliser/index.njk b/content/fr/utiliser/index.njk
index e8684434..3fd05efe 100644
--- a/content/fr/utiliser/index.njk
+++ b/content/fr/utiliser/index.njk
@@ -10,11 +10,11 @@ showBreadcrumb: true
     </div>
   {% endfor %}
 </div>
-{% set callout = {
+{% from "components/component.njk" import component with context %}
+{{ component("callout", {
   description: "Le <strong>SILL</strong> est publié depuis 2012 : chaque logiciel présent est utilisé par au moins une administration.  En tant qu'agent public inscrit au SILL, vous pouvez solliciter les référents de chaque logiciel qui pourront répondre à vos questions et vous aider dans l'appropriation de ces solutions.",
   link: {
     url: "https://code.gouv.fr/sill/add-software",
     title: "Inscrivez-vous !"
   }
-} %}
-{% include "components/callout.njk" %}
\ No newline at end of file
+}) }}
\ No newline at end of file