diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 9a2ca553..a8a36d1b 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -235,6 +235,10 @@ const composants = [
text: 'DsfrNotice',
link: '/composants/DsfrNotice.md',
},
+ {
+ text: 'DsfrPicture',
+ link: '/composants/DsfrPicture.md',
+ },
{
text: 'DsfrRadioButton',
link: '/composants/DsfrRadioButton.md',
@@ -325,6 +329,14 @@ const composants = [
text: 'DsfrTooltip',
link: '/composants/DsfrTooltip.md',
},
+ {
+ text: 'DsfrTranscription',
+ link: '/composants/DsfrTranscription.md',
+ },
+ {
+ text: 'DsfrVideo',
+ link: '/composants/DsfrVideo.md',
+ },
{
text: 'VIcon',
link: '/composants/VIcon.md',
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index dfb11f04..9affb103 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -187,6 +187,10 @@
justify-content: center;
}
+.gap-2 {
+ gap: 0.5rem;
+}
+
.gap-4 {
gap: 1rem;
}
diff --git a/src/components/DsfrMedia/DsfrPicture.md b/src/components/DsfrMedia/DsfrPicture.md
new file mode 100644
index 00000000..e190a77f
--- /dev/null
+++ b/src/components/DsfrMedia/DsfrPicture.md
@@ -0,0 +1,64 @@
+# Image - `DsfrPicture`
+
+Les contenus médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégrés à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.
+
+🏅 La documentation sur les contenus médias sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/contenus-medias)
+
+ La story sur le contenu média image (picture) sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrpicture--docs)
+
+## 🌟 Introduction
+
+Le composant `DsfrPicture` permet d'afficher une image de manière responsive, avec une légende optionnelle. Il est conçu pour être flexible, offrant des options pour personnaliser la taille, le ratio, et le contenu de l'image. Ce composant est idéal pour intégrer des images dans une interface utilisateur tout en garantissant leur adaptabilité et accessibilité.
+
+Le `DsfrPicture` utilise une structure HTML sémantique avec `