Unordered List #229

jeffreylauwers · 2024-03-13T14:39:51Z

jeffreylauwers
Mar 13, 2024
Collaborator

visuele weergave van het unordered list component

We willen graag meer leren over het Unordered List 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!

Link naar bericht in Slack

Naam

Unordered List

Doel

Opsomming waar de volgorde van items in de lijst niet van belang is.

Gerelateerde componenten

Ordered List, Rich Text Content, Task List

Onderzoek

7 Tips for Presenting Bulleted Lists in Digital Content - Nielsen Norman Group
Artikel met tips voor het presenteren van Unordered List.

jeffreylauwers · 2024-03-14T10:05:09Z

jeffreylauwers
Mar 14, 2024
Collaborator Author

Amsterdam

Screenshots / Varianten

Storybook

Default
Items of an unordered list have square markers. There is extra white space between the items. This provides better distinction between the items, especially when they consist of multiple lines of text.

Two Levels
A list can have one deeper level. In this case, an en dash is used as the list item marker. It is left-aligned with the text of the higher-level item.

Inverse Colour
Set the inverseColor prop if the List sits on a dark background. This ensures the colour of the text provides enough contrast. When nesting lists, set the prop on all lists.

Without Markers
An overview of equivalent elements is also an unordered list. In such cases, apply the list semantics while hiding markers. This helps screen readers understand and navigate the list.

Note: In this variant, each item typically contains a container with titles and other text components. Therefore, this variant does not define typography for the items and the inverseColor prop has no effect.

This example is based on the top tasks on the homepage of the website:

Figma

Notities

Storybook component biedt de mogelijkheid om de kleur om te keren bij een donkere achtergrond.
In Figma wordt het component gecombineerd met de ordered list.
In Figma de optie om een groen check of rood cross icoon te tonen in plaats van een bullet.
Documentatie beschikbaar (Storybook).