diff --git a/src/Card.tsx b/src/Card.tsx index da3fc421b..5f27db7c3 100644 --- a/src/Card.tsx +++ b/src/Card.tsx @@ -15,6 +15,7 @@ export type CardProps = { id?: string; className?: string; title: ReactNode; + titleAs?: `h${2 | 3 | 4 | 5 | 6}`; desc?: ReactNode; imageUrl?: string; imageAlt?: string; @@ -81,6 +82,7 @@ export const Card = memo( id: props_id, className, title, + titleAs: HtmlTitleTag = "h3", linkProps, desc, imageUrl, @@ -146,7 +148,7 @@ export const Card = memo( >
{desc}
)} diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx index 1d35f9c76..0aac7a002 100644 --- a/stories/Card.stories.tsx +++ b/stories/Card.stories.tsx @@ -18,6 +18,15 @@ const { meta, getStory } = getStoryFactory({ - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Card.tsx)`, "argTypes": { "title": { "description": `Required.` }, + titleAs: { + "description": `Heading level`, + "options": (() => { + const headings = ["h2", "h3", "h4", "h5", "h6"] as const; + assert