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:

1. Marker: to create an indent in te page
2. 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

$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