diff --git a/src/components/DsfrCard/DsfrCard.md b/src/components/DsfrCard/DsfrCard.md
index cbf330ed..f0dd1901 100644
--- a/src/components/DsfrCard/DsfrCard.md
+++ b/src/components/DsfrCard/DsfrCard.md
@@ -61,7 +61,7 @@ cf. DSFR : [Composant - Carte](https://www.systeme-de-design.gouv.fr/elements-d-
## đ Exemples
-### đ Exemple avec tags sans actions
+### đ Exemple avec tags et badges dans lâen-tĂȘte sans actions
::: code-group
diff --git a/src/components/DsfrCard/DsfrCard.spec.ts b/src/components/DsfrCard/DsfrCard.spec.ts
index edcd3172..1421edb3 100644
--- a/src/components/DsfrCard/DsfrCard.spec.ts
+++ b/src/components/DsfrCard/DsfrCard.spec.ts
@@ -33,6 +33,16 @@ describe('DsfrCard', () => {
de contenu similaires. La carte nâest jamais prĂ©sentĂ©e de maniĂšre isolĂ©e.`
const imgSrc = 'https://loremflickr.com/300/200/cat'
const altImg = 'Alternative text for image'
+ const badges = [
+ {
+ label: 'Badge info',
+ type: 'info',
+ },
+ {
+ label: 'Badge success',
+ type: 'success',
+ },
+ ]
// When
@@ -50,6 +60,7 @@ describe('DsfrCard', () => {
description,
imgSrc,
link,
+ badges,
},
})
@@ -66,5 +77,6 @@ describe('DsfrCard', () => {
expect(getByTestId('fr-card')).toHaveClass('fr-card')
expect(getByTestId('card-img')).toHaveAttribute('src', imgSrc)
expect(getByTestId('card-img')).toHaveAttribute('alt', altImg)
+ expect(getByTestId('card-badges')).toHaveClass('fr-badges-group')
})
})
diff --git a/src/components/DsfrCard/DsfrCard.types.ts b/src/components/DsfrCard/DsfrCard.types.ts
index 218ad195..c2fdd271 100644
--- a/src/components/DsfrCard/DsfrCard.types.ts
+++ b/src/components/DsfrCard/DsfrCard.types.ts
@@ -1,6 +1,7 @@
import type { RouteLocationRaw } from 'vue-router'
import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'
+import type { DsfrBadgeProps } from '../DsfrBadge/DsfrBadge.types'
import type { CustomizeIconType } from 'oh-vue-icons'
export type DsfrCardDetailProps = {
@@ -19,6 +20,7 @@ export type DsfrCardProps = {
endDetailIcon?: DsfrCardDetailProps['icon']
altImg?: string
titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+ badges?: DsfrBadgeProps[]
buttons?: DsfrButtonProps[]
linksGroup?: {
label: string
diff --git a/src/components/DsfrCard/DsfrCard.vue b/src/components/DsfrCard/DsfrCard.vue
index 1e058a4a..553cb9f2 100644
--- a/src/components/DsfrCard/DsfrCard.vue
+++ b/src/components/DsfrCard/DsfrCard.vue
@@ -1,6 +1,7 @@
@@ -44,6 +57,7 @@ const exampleTags = [
:end-detail="endDetail"
:end-detail-icon="endDetailIcon"
:alt-img="altImg"
+ :badges="exampleBadges"
title="Titre de la carte"
size="large"
ratio-img="large"