Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Éléments blockquote

Utilisez l’élément blockquote pour attirer l’attention sur une citation ou un extrait.

  • Contenu: 
    @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.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
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/blockquote/blockquote.scss
  • Taille: 2.9 KB
  • Contenu: 
    .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
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/blockquote/blockquote.css
  • Taille: 1.2 KB

Quand utiliser cette composante

L’élément blockquote est utilisé pour indiquer qu’un contenu est une citation tirée d’une source ou d’un orateur. Ceci inclut souvent un attribut cite correspondant à l’URL de la source de la citation ou au nom de l’orateur, afin de fournir un contexte.

À faire :

  • rester bref, en visant un maximum de 280 caractères
  • utiliser un tiret (—) avant l’attribution
  • utiliser la balise <cite> afin de préciser la source de la citation
  • mettre l’élément blockquote entre des balises <blockquote>
  • se demander si l’élément blockquote augmente la valeur de la page
  • minimiser l’usage d’éléments blockquote sur la même page – éviter de les empiler si possible

À ne pas faire :

  • mettre des guillemets autour du texte de votre citation – les guillemets sont déjà compris dans le style de l’élément blockquote

Tailles d’éléments blockquote

  • Les éléments blockquote longs (défaut) devraient totaliser de 140 à 280 caractères, espaces compris
  • Les éléments blockquote courts devraient totaliser un maximum de 140 caractères, espaces compris

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.