Code

[wartburggraaf]

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

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de 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

Code

Doel

Markeert tekst dat code vertegenwoordigt.

Gerelateerde componenten

Code block

Onderzoek

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default
Markup with the <code> element. Styling via utrecht-code class name.

Ligatures in code
“fi,” “ff,” en “fl“ zijn veelvoorkomende ligaturen. In code horen ze getoond te worden als twee karakters. Sommige ligaturen zijn beschikbaar in Unicode als een enkel karakter, zoals “fi” (U+FB01), IJ (U+0132) en ij (U+0133).

Code in link
De code die een link is moet herkenbaar zijn als link.

Code in a paragraph
Lopende tekst met code moet goed leesbaar zijn, de code moet niet zo afleidend opgemaakt zijn dat de tekst slecht leesbaar wordt.

Code in a heading 1
De lettergrootte van de code moet aanpassen aan de parent.

Code in a heading 2
De lettergrootte van de code moet aanpassen aan de parent.

---

Notities

• Documenatie beschikbaar (Storybook)
• Veel verschillende varianten beschikbaar. Ook in combinatie met headings (nu enkel H1 en H2 meegenomen in screenshots).
• Via 'Element' property kan er gekozen worden voor code of span.
• Huidige implementatie heeft geen achtergrond kleur, maar er is wel een design token voor beschikbaar.

[jeffreylauwers]

Atlassian

Documentatie website

---

Screenshots / Varianten

Documentatie website

Inline code
Formatted code can appear in a variety of contexts, increasing the legibility and contrasting it against default paragraph text.
Use inline code when you wish to highlight a short code snippet from the surrounding default text, such as when referencing variable names.

---

Notities

• Onder de naam 'Inline code'
• Lichtgrijze, transparent, achtergrond kleur. Subtiel afgeronde hoekjes.

[jeffreylauwers]

IBM

Documentatie website

---

Screenshots / Varianten

Documentatie website

Code snippet - 'Inline' variant
Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file.

---

Notities

• Onder de naam 'Code snippet' als variant 'Inline'.
• Lichtgrijze achtergrond kleur. Subtiel afgeronde hoekjes.
• Door te klikken kopieer je de code.

[jeffreylauwers]

GitHub

Documentatie website

---

Screenshots / Varianten

Documentatie website

---

Notities

• Onder de naam 'Inline code block' beschikbaar als typografisch element
• Zie ook de code weergave bij 'Propery' en 'Token' in het screenshot. Hier wordt code net even anders weergegeven en dit is niet terug te vinden als component. Bij 'Token' is er een kopieer optie aan toegevoegd.

[jeffreylauwers]

NL Design System

Documentatie website

---

Screenshots / Varianten

Documentatie website

Op de documentatie website van NL Design Sytem gebruiken we de Code component van Utrecht.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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