Mark

[wartburggraaf]

We willen graag meer leren over de Mark 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

Mark

Doel

Markeert tekst, zodat je ernaar kan verwijzen vanuit een andere context of omdat de tekst relevant is voor de huidige activiteit.

Ook bekend als

Highlight

Gerelateerde componenten

Strong

Richtlijnen

Acceptatiecriteria: NL Design System Acceptatiecriteria voor Mark

Onderzoek

<mark>: The Mark Text element - MDN
Documentatie van Mozilla Developers Network over <mark> HTML element.

Tweaking Text Level Styles - Adrian Roselli
Adrian Roselli beschrijft waar je zoal rekening mee moet houden bij de Mark component.

Short note on making your mark (more accessible)
Steve Faulkner beschreef wat je kun doen om de HTML5 mark component toegankelijker te maken. Maar inmiddels lijkt deze betere support te hebben waardoor dit wellicht niet meer nodig is.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

---

Notities

• Gele achtergrondkleur.
• Documentatie beschikbaar (Storybook).

[jeffreylauwers]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

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

Alternate markup
With the <span> element the styling should work too. Note: using the <mark> element is preferred, because it works better when CSS can not be loaded.

Appearance in print
Print styling for the mark component. This styling is automatic via a media query, but for testing it can be simulated using the utrecht-mark--print class name.

Windows High Contrast mode
High contrast styling for the mark component. This styling is automatic via a media query, but for testing it can be simulated using the utrecht-mark--windows-high-contrast class name.

---

Notities

• Gele achtergrondkleur.
• Verschillende varianten.
• Documentatie beschikbaar (Storybook).

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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

[jeffreylauwers]

✨ Dit component is nu Community ✨

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

[jeffreylauwers]

✨ Dit component is nu Candidate ✨

Help je mee hem door de Hall of Fame stappen te krijgen?
Mark op het Hall of Fame bord