@gemeente-denhaag/blockquote
v0.1.1-alpha.300
Published
A blockquote component
Downloads
596
Readme
Blockquote
A blockquote shows a highlight or quote in a page that should stand out.
When to use
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.
Alternatives and related components
- Use a note component when it’s important to highlight a warning or information.
Anatomy
The blockquote consists of:
- Marker: to create an indent in te page
- Text: to display the quote
Design properties
Typography
- Text: TheMix/lg/700
Colors
- Text: text color Green/4
- Marker: text color Green/1
Structure
- Text: padding 16px
Accessibility
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 URL
Content guidelines
None.
Best practices
Do's
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.
Don'ts
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