Heading Group

[jeffreylauwers]

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

Heading Group

Doel

Combinatie van een koptekst en ondersteunende tekst.

Gerelateerde componenten

Rich Text Content, Subheading, Pre-heading

Onderzoek

<hgroup>: The Heading Group element
Documentatie van Mozilla Developers Network over het <hgroup> HTML element.

Accessible heading structure - The a11y project
Artikel door Rian Rietveld waarin ook wordt geschreven over het gebruik van hgroup. Rian geeft ook een voorbeeld in code van het toegankelijk opzetten van een Heading Group.

Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt - NL Design System
Richtlijnen van NL Design System rondom het tonen van voortgang binnen een meerstappenformulier. Ook hier wordt een voorbeeld gegeven waarbij gebruik wordt gemaakt van <hgroup>.

[jeffreylauwers]

DSO

Heading Group niet als component gevonden. Maar de 'Application Heading' component komt in de buurt.

Storybook

---

Screenshots / Varianten

Storybook

Application Heading met Subtitle en Step

---

Notities

Combinatie van h1 met h2. De h2 bevat een span. De span heeft visueel een andere stijling.

[jeffreylauwers]

DSO

Heading Group niet als component gevonden. Maar de tekstopmaak binnen de 'Hero' component komt in de buurt.

Storybook

---

Screenshots / Varianten

Storybook

Hero

---

Notities

h1 met daarbinnen een span. De span heeft visueel een andere stijling.

[jeffreylauwers]

Utrecht

• Storybook
• GitHub

---

Screenshots / Varianten

Storybook

Default

Pre-heading

---

Notities

• Documentatie beschikbaar.
• <hgroup> HTML element met daarbinnen een h1 en een p.
• Bij de 'pre-heading' variant komt in code de 'p' na de 'h1'. Visueel wordt de p dan boven de h1 getoond. Hierdoor mist men geen informatie wanneer zij via Headings navigeren.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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

[Rozerinay]

✨ Dit component is nu Community ✨

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