A blockquote component
npm install @gemeente-denhaag/blockquoteA blockquote shows a highlight or quote in a page that should stand out.
Use a blockquote when there is a quote in the text you want to highlight, to tease the next alinea or highlight an important line. Mostly used in an journalistic way, to decorate the page.
- Use a note component when it’s important to highlight a warning or information.
The blockquote consists of:
1. Marker: to create an indent in te page
2. Text: to display the quote
Typography
- Text: TheMix/lg/700
Colors
- Text: text color Green/4
- Marker: text color Green/1
Structure
- Text: padding 16px
Do not use this component to indent text. Screen readers use the
element to:
Provide semantic understanding of page content by announcing blockquote as quote
Define a sectioning root in HTML5, which means that any-
element doesn't become part of the document’s outline
To make the blockquote content accessible, use the attribute with a valid URLContent guidelines
None.
Best practices
$3
Blockquotes should:
- Stand out from the text, so make sure that there is more basic text and only one or two quotes on a short page.
$3
Blockquotes should:
- Not be used in a group.
- Not be used for displaying a decorative treatment only.References
- Current blockquote: https://www.denhaag.nl/nl/in-de-stad/nieuws/arjen-kapteijns-nieuwe-wethouder-sociale-zaken-en-werk.htm
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote