diff --git a/pages/cards/permutations.page.tsx b/pages/cards/permutations.page.tsx index 417f1e64bb..b53ce5052e 100644 --- a/pages/cards/permutations.page.tsx +++ b/pages/cards/permutations.page.tsx @@ -28,7 +28,14 @@ function createSimpleItems(count: number) { } const cardDefinition: CardsProps.CardDefinition = { - header: item => (item.number === 2 ? {item.text} : item.text), + header: item => + item.number === 2 ? ( + + {item.text} + + ) : ( + item.text + ), sections: [ { id: 'description', diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap index 3152e5dd33..ac1d459185 100644 --- a/src/__tests__/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/__snapshots__/documenter.test.ts.snap @@ -3587,7 +3587,7 @@ add a meaningful description to the whole selection.", Object { "description": " Defines what to display in each card. It has the following properties: * \`header\` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument. - Use \`fontSize=\\"heading-m\\"\` on [link](/components/link/) components inside card header. + Use \`fontSize=\\"inherit\\"\` on [link](/components/link/) components inside card header. * \`sections\` (array) - Responsible for displaying the card content. Cards can have many sections in their body. Each entry in the array is responsible for displaying a section. An entry has the following properties: * \`id\`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) diff --git a/src/cards/interfaces.tsx b/src/cards/interfaces.tsx index 757767aa71..acc07e8a87 100644 --- a/src/cards/interfaces.tsx +++ b/src/cards/interfaces.tsx @@ -64,7 +64,7 @@ export interface CardsProps extends BaseComponentProps { /** * Defines what to display in each card. It has the following properties: * * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument. - * Use `fontSize="heading-m"` on [link](/components/link/) components inside card header. + * Use `fontSize="inherit"` on [link](/components/link/) components inside card header. * * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their * body. Each entry in the array is responsible for displaying a section. An entry has the following properties: * * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)