Details

[jeffreylauwers]

We willen graag meer leren over het Details component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

---

Naam

Details

Doel

Biedt de mogelijkheid om meer gedetailleerde informatie te tonen en weer te verbergen.

Gerelateerde componenten

Accordion

Onderzoek

<details>: The Details disclosure element - MDN
Documentatie van Mozilla Developers Network over het <details> HTML element.

Zie comment van Mike Alders bij Accordion component. In een prototype voor Erfpacht werd enkel Toon/Verberg niet altijd begrepen. Onderzoek zal geplaatst worden op gebruikersonderzoeken.nl maar vooralsnog te vinden via Slack bericht van Nico Druif.

Details - GOV.UK
Onder 'Research on this component' worden bevindingen genoteerd. Er is ook een link naar de Details Github discussion waar meer informatie onderzoek en aanpassingen worden gedeeld.

In de Discussion wordt vermeld dat uit onderzoek blijkt dat men de Details compont als Link ziet. Let wel: de Details component bij GOV heeft voorafgaand aan de tekst een icoon in de vorm van een gevulde driehoek die met de punt naar de tekst wijst. Daarnaast wordt er een screenshot toegevoegd waarbij er meerdere Detail componenten onder elkaar staan.

Ook wordt er vermeld dat de component niet door elke screenreader goed wordt voorgelezen. Daar op aanhakend wordt de volgende url gedeeld: https://u-elements.github.io/u-elements/elements/u-details

[jeffreylauwers]

Amsterdam

• Figma

---

Screenshots / Varianten

Figma bibliotheek

Prototype Erfpacht

---

Notities

• Zie 'Onderzoek' in initieel discussion bericht voor meer informatie

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Collapse zonder achtergrond
In een applicatie met minder ruimte of wanneer er minder focus vereist is, kan de kleinere collapse zonder achtergrond gebruikt worden.

---

Notities

• Onder de naam: Collapse (als variant zonder achtergrond). Collapse als geheel opgenomen in Accordion discussion.

[jeffreylauwers]

RVO

• Storybook
• Figma

---

Screenshots / Varianten

---

Notities

• Onder de naam: Expandable text