diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx index cbd34eb0f8..a833eb424b 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx +++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx @@ -16,12 +16,16 @@ import README from "../../../../packages/css/src/components/description-list/REA ### Multiple descriptions -A term may have multiple descriptions. In the case of multiple terms for a description -you may use an inline style to define the row of the first term to prevent the description -from skipping a lines. +A term may have multiple descriptions. +### Multiple terms + +In the case of multiple consequtive terms for a description, the terms are wrapped in a div element. + + + ### Rich description A description can include rich content such as inline formatting, links, paragraphs, and even lists. diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx index 4f3e95c742..eaf29fec85 100644 --- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx +++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx @@ -46,17 +46,24 @@ export const MultipleDescriptions: Story = { args: { children: [ Blinde, slechtziende, - Persoon met een visuele beperking, - Persoon met een visuele handicap, - Persoon die blind is, - Persoon die slechtziend is, - Doof, - Slechthorend, - - Persoon die niet of slecht hoort - , - Dyslexie, - Moeite met lezen en schrijven, + Persoon met een visuele beperking, + Persoon met een visuele handicap, + Persoon die blind is, + Persoon die slechtziend is, + ], + }, +} + +export const MultipleTerms: Story = { + args: { + children: [ +
+ Naam + Voornaam + Roepnaam + Bijnaam +
, + De naam waarmee een persoon wordt aangesproken, ], }, }