Government of Ontario
Français

Design System

Blockquote

In progress

Use a blockquote to draw attention to a speaker quote or excerpt.

  • Content: 
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

.ontario-blockquote {
	border-left: 4px solid colours.$ontario-greyscale-70;
	font-family: typography.$ontario-font-raleway-modified;
	font-size: globalFunctions.rem-calc(19);
	font-weight: fontWeights.$ontario-font-weights-normal;
	letter-spacing: 0.025rem;
	line-height: lineheight.$ontario-line-height-8;
	max-width: globalVariables.$standard-width;
	margin: spacing.$spacing-6;
	padding: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-5;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: globalFunctions.rem-calc(18);
		letter-spacing: 0.03rem;
		line-height: lineheight.$ontario-line-height-7;
		margin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;
	}
}

.ontario-blockquote--short {
	font-size: globalFunctions.rem-calc(28);
	letter-spacing: 0.02rem;
	line-height: lineheight.$ontario-line-height-7;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: globalFunctions.rem-calc(23);
		line-height: lineheight.$ontario-line-height-6;
	}
}

.ontario-blockquote p {
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;

	&::before {
		content: open-quote;
	}

	&::after {
		content: close-quote;
	}
}

.ontario-blockquote__attribution,
.ontario-blockquote__byline {
	display: block;
	font-size: globalFunctions.rem-calc(16);
	letter-spacing: 0.025rem;
	line-height: lineheight.$ontario-line-height-8;
	text-align: right;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		letter-spacing: 0.03rem;
		line-height: lineheight.$ontario-line-height-7;
	}
}

.ontario-blockquote__attribution {
	font-style: normal;
	font-weight: fontWeights.$ontario-font-weights-bold;

	&::before {
		content: '\2014 \0020';
	}
}

blockquote {
	quotes: '\201C''\201D';
}

html[lang='fr'] blockquote {
	quotes: '« ' ' »';
}
  • URL: /components/raw/blockquote/blockquote.scss
  • Filesystem Path: fractal/components/components/alerts-highlights/blockquote/blockquote.scss
  • Size: 2.9 KB
  • Content: 
    .ontario-blockquote{border-left:4px solid #4d4d4d;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.1875rem;font-weight:400;letter-spacing:.025rem;line-height:1.56;max-width:48rem;margin:2rem;padding:1.5rem 0 1.5rem 1.5rem}@media screen and (max-width: 40em){.ontario-blockquote{font-size:1.125rem;letter-spacing:.03rem;line-height:1.5;margin:1.5rem 0 2rem 0}}.ontario-blockquote--short{font-size:1.75rem;letter-spacing:.02rem;line-height:1.5}@media screen and (max-width: 40em){.ontario-blockquote--short{font-size:1.4375rem;line-height:1.43}}.ontario-blockquote p{margin:0 0 1.5rem 0}.ontario-blockquote p::before{content:open-quote}.ontario-blockquote p::after{content:close-quote}.ontario-blockquote__attribution,.ontario-blockquote__byline{display:block;font-size:1rem;letter-spacing:.025rem;line-height:1.56;text-align:right}@media screen and (max-width: 40em){.ontario-blockquote__attribution,.ontario-blockquote__byline{letter-spacing:.03rem;line-height:1.5}}.ontario-blockquote__attribution{font-style:normal;font-weight:700}.ontario-blockquote__attribution::before{content:"— "}blockquote{quotes:"“" "”"}html[lang=fr] blockquote{quotes:"« " " »"}
  • URL: /components/raw/blockquote/blockquote.css
  • Filesystem Path: fractal/components/components/alerts-highlights/blockquote/blockquote.css
  • Size: 1.2 KB

When to use this component

Blockquotes are used to indicate that a piece of content is a quotation from a source or speaker. This often includes a cite attribute for the URL of the quote’s source or the speaker’s name, to provide context.

Do:

  • keep text brief - aim for a maximum of 280 characters
  • use an em-dash (—) before the attribution.
  • use <cite> tags when attributing the quote source
  • put the blockquote in a <blockquote> tag
  • consider if the blockquote adds value to the page
  • minimize the use of blockquotes on a page - avoid stacking them if possible

Do not:

  • include quotation marks in your blockquote copy – the blockquote style will add the quotation marks for you

Blockquote sizes

  • Long blockquotes (default) should be between 140 and 280 characters including spaces
  • Short blockquotes should be a maximum of 140 characters including spaces

Contact us

If you have any questions or feedback, please get in touch.