Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Éléments blockquote

En cours

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.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
  • 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

Pour nous joindre

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