Subheading

[Rozerinay]

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

Subheading

Doel

Een ondersteunende tekst die direct na een kop staat.

Gerelateerde componenten

Pre-heading, Rich Text Content, Heading Group

Onderzoek

What Is A Subheading and Why Are They Important? - Mailchimp
Het artikel legt uit wat subheadings zijn en waarom ze belangrijk zijn voor zowel leesbaarheid als SEO.

Visual Hierarchy in UX: Definition - Nielsen Norman Group
Het artikel legt uit dat een duidelijke visuele hiërarchie het oog van de gebruiker naar de belangrijkste elementen op de pagina leidt. Deze hiërarchie kan worden gecreëerd door variaties in kleur en contrast, schaal en groepering. Zo wordt er specifiek genoemd dat er een verschil in schaal moet zijn tussen de Heading en Subheading om de inhoud overzichtelijk en goed leesbaar te maken.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Subtitel voor een Definitie Lijst

Subtitel voor een Heading

Subtitel voor een Paragraaf

---

Notities

• Onder de naam: Subtitel.
• Subtitel is een <p role="doc-subtitle">, wat aangeeft dat de Paragraaf de rol van Subtitel vervult binnen het document.
• Font-weight: bold.

[Rozerinay]

OpenGemeenten

• Documentatie website
• PatternLab

---

Screenshots / Varianten

Documentatie website

PatternLab

---

Notities

• Geen component gevonden.
• In de component ‘Follow-up contactpersoon’ wordt de naam van de contactpersoon weergegeven als een Heading-3, gevolgd door een Paragraph die fungeert als Subtitel.
• Font-weight: regular.

[AlineNap]

Ik vraag mij af of de subheading en pre heading een apart component zijn. Hergebruik je deze onderdelen en haar stijling op andere plekken dan de heading-group? Zo niet zou ik deze componenten onderdeel maken van de heading-group a la:

• prefix.heading-group.preheading.*
• prefix.heading-group.subheading.*

Net als een label in een button of accordion.
Of de content en attribution in de blockqoute

Zelfde opmerking bij de pre-heading

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

---

Notities

• Geen component gevonden.
• In de component 'Hero' zit een Subtitle.
• Font-weight: regular.
• Font-style: italic.

[Rozerinay]

We sluiten de Discussion voor deze component, omdat deze niet langer een zelfstandige component is maar onderdeel uitmaakt van de Heading Group.