Use a blockquote to draw attention to a speaker quote or excerpt.
@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: open-quote;
}
&::after {
content: close-quote;
}
}
.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";
}
}
blockquote {
quotes: "\201C" "\201D";
}
html[lang="fr"] blockquote {
quotes: "« " " »";
}
.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:"« " " »"}
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.
<cite>
tags when attributing the quote source<blockquote>
tagIf you have other suggestions or advice or any questions on blockquotes, the design system team would love to hear from you.