Blockquote

[jeffreylauwers]

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

Blockquote

Doel

Toont een citaat dat afwijkt van de hoofdtekst.

Gerelateerde componenten

Rich Text Content

Onderzoek

Niet veel onderzoek kunnen vinden. Enkel deze comment in de 'Pull quote' Github discussion van gov.uk.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Inverse colour

Figma

---

Notities

• Storybook component biedt de mogelijkheid om de kleur om te keren bij een donkere achtergrond.
• Richtlijnen beschikbaar.
• Figma component biedt de mogelijkheid voor attribution.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• Github

---

Screenshots / Varianten

Storybook

Default

With attribution

---

Notities

• Richtlijnen beschikbaar.
• Border inline-start.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Documentatie website

Default

Met afbeelding
Gebruik een quote met afbeelding, als je bij een uitspraak wat speelsheid / visualisatie wil toevoegen. Alleen foto‘s die de gequote persoon afbeelden zijn toegestaan.

---

Notities

• Onder de naam: Quote.
• Richtlijnen beschikbaar.
• Optie voor een afbeelding.

[jeffreylauwers]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

With attribution

Distanced

In another language

Figma

---

Notities

• Verschil tussen Figma en Storybook. Kleur rood vs donkergrijs. Attribution in Figma een andere kleur als quote.

[jeffreylauwers]

RVO

• Demo pagina - Storybook

---

Screenshots / Varianten

Storybook

---

Notities

• Niet als los component, maar bij toeval gevonden op een demo pagina.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

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

[jeffreylauwers]

✨ Dit component is nu Community ✨

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

[MarjonBakker]

Ik heb net het artikel van Heydon Pickering zitten lezen: The blockquote element.

Een blockquote hoort volgens de HTML-specificatie alleen gebruikt te worden voor quotes uit een externe bron. Maar een veelgeziene use case is de 'pull quote', waarin een citaat van een geïnterviewde wordt uitgelicht om extra aandacht te trekken. Dit is een erfenis uit kranten-/tijdschriften, waar het nodig was om de aandacht te trekken, zodat de lezer stopt met bladeren en begint met lezen. Dit heeft online een andere functie gekregen. Het breekt de pagina op en maakt hem visueel aantrekkelijker.

Voor toegankelijkheid is het een lastige. Aan de ene kant wil je semantische HTML gebruiken, maar bij een pull quote is een blockquote niet gepast. Als je niet-semantische HTML gebruikt, wordt voor een screenreadergebruiker een stukje content gedubbeld, zonder dat duidelijk is hoezo en waarom. Dan is dat een fout onder 1.3.1 Info en relaties.

Wat te doen? Pickering zou zelf voor pull quotes een aside gebruiken, in combinatie met arialabelledby.

Maar wat is handig voor NL Design System?