Blockquote

In progress

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

  • Content: 
    @import "../../../../theme/assets/styles/sass/variables-import";

.ontario-blockquote {
    border-left: 4px solid $ontario-greyscale-70;
    font-family: $ontario-font-raleway-modified;
    font-size: rem-calc(19);
    font-weight: 400;
    letter-spacing: 0.025rem;
    line-height: 1.56;
    max-width: 48rem;
    margin: $spacing-6;
    padding: $spacing-5 0 $spacing-5 $spacing-5;

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

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

    @media screen and (max-width: $small-breakpoint) {
        font-size: rem-calc(23);
        line-height: 1.43;
    }
}

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

    &::before {
        content: "\201C";
    }

    &::after {
        content: "\201D";
    }
}

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

    @media screen and (max-width: $small-breakpoint) {
        letter-spacing: 0.03rem;
        line-height: 1.5;
    }
}

.ontario-blockquote__attribution {
    font-style: normal;
    font-weight: 700;

    &::before {
        content: "\2014 \0020";
    }
}
  • URL: /components/raw/blockquote/blockquote.scss
  • Filesystem Path: fractal/components/components/alerts-highlights/blockquote/blockquote.scss
  • Size: 1.4 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:"“"}.ontario-blockquote p::after{content:"”"}.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:"— "}
  • URL: /components/raw/blockquote/blockquote.css
  • Filesystem Path: fractal/components/components/alerts-highlights/blockquote/blockquote.css
  • Size: 1.1 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

Help improve this page

If you have other suggestions or advice or any questions on blockquotes, the design system team would love to hear from you.