Ordered List

[jeffreylauwers]

We willen graag meer leren over het Ordered 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

Ordered List

Doel

Lijst waarvan de volgorde van items betekenis heeft.

Gerelateerde componenten

Rich Text Content, Unordered List

[jeffreylauwers]

Amsterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default
The list uses ascending numbers as markers, providing enough space for numbers up to 99. Extra white space between items enhances the distinction, mainly when they consist of multiple lines of text.

Two Levels
A list may have one nested level. In this case, lowercase letters are used as markers.

Starting Number
When necessary, the list can start with a higher number. Use the HTML attribute start.

Reverse Order
The numbers can also be in reverse order. Use the HTML attribute reversed.

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 articles or search results can be presented as an ordered can be seen as an unordered list. In such cases, apply the list semantics while hiding markers. This helps screen readers understand and navigate the list.

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

For example, here are three news articles:

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).

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Storybook

Ordered List with nesting

Ordered list + Paragraph

Figma - Huidig

Figma - WIP

---

Notities

• Documentatie beschikbaar.

[jeffreylauwers]

DSO

• Storybook

---

Screenshots / Varianten

Storybook

Default

Group

Columns

Image list

Unstyled

---

Notities

• Ondergebracht bij List.
• In tegenstelling tot het type 'unordered' lijkt de icon optie niet beschikbaar voor 'ordered'.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

Decimaal
Gebruik een decimaal lijst bij een duidelijke volgorde in de lijst. Het is mogelijk om de lijst in een column te tonen.

Decimaal met achtergrond
Gebruik een decimaal lijst met achtergrond de informatie net iets belangrijker is.

---

Notities

• Ondergebracht bij Lists.
• Meerdere varianten voor Unordered list.

[jeffreylauwers]

Open Gemeenten

• Documentatie website - Stappenplan
• Patternlab

---

Screenshots / Varianten

Documentatie website

---

Notities

• Niet kunnen vinden in Patternlab. Vandaar screenshot documentatie omgeving. Vraag staat uit bij Martijn.

[jeffreylauwers]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

---

Notities

[jeffreylauwers]

RVO

• Documentatie website
• Storybook

---

Screenshots / Varianten

Storybook

Default

---

Notities

• Samengevoegd met unordered list.
• In tegenstelling tot unordered list geen andere opties als default.

[jeffreylauwers]

Utrecht

• Documentatie website
• Storybook
• Figma

---

Screenshots / Varianten

Storybook
Default

Right to left
Right-to-left text should have list item markers before the text, on the right. With CSS you can use Arabic script digits for list item numbers, instead of the default latin numbers.

Figma

---

Notities

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Ordered list op het Community bord

[Yolijn]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Ordered list op het Candidate bord