Blockquote

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

  • Content:
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
    @use '@ongov/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.px-to-rem(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.px-to-rem(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.px-to-rem(28);
    	letter-spacing: 0.02rem;
    	line-height: lineheight.$ontario-line-height-7;
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		font-size: globalFunctions.px-to-rem(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.px-to-rem(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.8 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

Don’t:

  • 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

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