Encadrés et apartés

Utilisez les encadrés et apartés pour mettre en évidence le contenu des pages.

  • Contenu:
    @use 'sass:meta';
    @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/2-tools/mixins/global.mixins' as globalMixins;
    
    .ontario-callout,
    .ontario-aside {
    	border-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;
    	padding: spacing.$spacing-5;
    
    	* {
    		max-width: globalVariables.$standard-width;
    
    		&:last-child {
    			margin-bottom: spacing.$spacing-2;
    		}
    	}
    }
    
    .ontario-callout {
    	margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;
    	background-color: colours.$ontario-greyscale-5;
    }
    
    .ontario-aside {
    	margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;
    }
    
    @media screen and (max-width: breakpoints.$small-breakpoint) {
    	.ontario-aside {
    		margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;
    	}
    }
    
    .ontario-callout__title,
    .ontario-aside__title {
    	margin-bottom: spacing.$spacing-4;
    }
    
    // -----------------------------------
    //   Callout & Aside border variants
    // -----------------------------------
    $highlight-colours: (
    	'teal': colours.$ontario-colour-dark-teal,
    	'gold': colours.$ontario-colour-dark-gold,
    	'yellow': colours.$ontario-colour-dark-yellow,
    	'taupe': colours.$ontario-colour-dark-taupe,
    	'green': colours.$ontario-colour-dark-green,
    	'lime': colours.$ontario-colour-dark-lime,
    	'sky': colours.$ontario-colour-dark-sky,
    	'blue': colours.$ontario-colour-dark-blue,
    	'purple': colours.$ontario-colour-dark-purple,
    );
    
    @each $color-name, $hex in $highlight-colours {
    	.ontario-border-highlight--#{$color-name} {
    		border-color: $hex !important;
    	}
    }
    
  • URL: /components/raw/callouts-asides/callouts-asides.scss
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/callouts-asides/callouts-asides.scss
  • Taille: 2.3 KB
  • Contenu:
    .ontario-margin-top-0-\!{margin-top:0}.ontario-padding-top-0-\!{padding-top:0}.ontario-margin-bottom-0-\!{margin-bottom:0}.ontario-padding-bottom-0-\!{padding-bottom:0}.ontario-margin-left-0-\!{margin-left:0}.ontario-padding-left-0-\!{padding-left:0}.ontario-margin-right-0-\!{margin-right:0}.ontario-padding-right-0-\!{padding-right:0}.ontario-margin-top-4-\!{margin-top:0.25rem}.ontario-padding-top-4-\!{padding-top:0.25rem}.ontario-margin-bottom-4-\!{margin-bottom:0.25rem}.ontario-padding-bottom-4-\!{padding-bottom:0.25rem}.ontario-margin-left-4-\!{margin-left:0.25rem}.ontario-padding-left-4-\!{padding-left:0.25rem}.ontario-margin-right-4-\!{margin-right:0.25rem}.ontario-padding-right-4-\!{padding-right:0.25rem}.ontario-margin-top-8-\!{margin-top:0.5rem}.ontario-padding-top-8-\!{padding-top:0.5rem}.ontario-margin-bottom-8-\!{margin-bottom:0.5rem}.ontario-padding-bottom-8-\!{padding-bottom:0.5rem}.ontario-margin-left-8-\!{margin-left:0.5rem}.ontario-padding-left-8-\!{padding-left:0.5rem}.ontario-margin-right-8-\!{margin-right:0.5rem}.ontario-padding-right-8-\!{padding-right:0.5rem}.ontario-margin-top-12-\!{margin-top:0.75rem}.ontario-padding-top-12-\!{padding-top:0.75rem}.ontario-margin-bottom-12-\!{margin-bottom:0.75rem}.ontario-padding-bottom-12-\!{padding-bottom:0.75rem}.ontario-margin-left-12-\!{margin-left:0.75rem}.ontario-padding-left-12-\!{padding-left:0.75rem}.ontario-margin-right-12-\!{margin-right:0.75rem}.ontario-padding-right-12-\!{padding-right:0.75rem}.ontario-margin-top-16-\!{margin-top:1rem}.ontario-padding-top-16-\!{padding-top:1rem}.ontario-margin-bottom-16-\!{margin-bottom:1rem}.ontario-padding-bottom-16-\!{padding-bottom:1rem}.ontario-margin-left-16-\!{margin-left:1rem}.ontario-padding-left-16-\!{padding-left:1rem}.ontario-margin-right-16-\!{margin-right:1rem}.ontario-padding-right-16-\!{padding-right:1rem}.ontario-margin-top-24-\!{margin-top:1.5rem}.ontario-padding-top-24-\!{padding-top:1.5rem}.ontario-margin-bottom-24-\!{margin-bottom:1.5rem}.ontario-padding-bottom-24-\!{padding-bottom:1.5rem}.ontario-margin-left-24-\!{margin-left:1.5rem}.ontario-padding-left-24-\!{padding-left:1.5rem}.ontario-margin-right-24-\!{margin-right:1.5rem}.ontario-padding-right-24-\!{padding-right:1.5rem}.ontario-margin-top-32-\!{margin-top:2rem}.ontario-padding-top-32-\!{padding-top:2rem}.ontario-margin-bottom-32-\!{margin-bottom:2rem}.ontario-padding-bottom-32-\!{padding-bottom:2rem}.ontario-margin-left-32-\!{margin-left:2rem}.ontario-padding-left-32-\!{padding-left:2rem}.ontario-margin-right-32-\!{margin-right:2rem}.ontario-padding-right-32-\!{padding-right:2rem}.ontario-margin-top-40-\!{margin-top:2.5rem}.ontario-padding-top-40-\!{padding-top:2.5rem}.ontario-margin-bottom-40-\!{margin-bottom:2.5rem}.ontario-padding-bottom-40-\!{padding-bottom:2.5rem}.ontario-margin-left-40-\!{margin-left:2.5rem}.ontario-padding-left-40-\!{padding-left:2.5rem}.ontario-margin-right-40-\!{margin-right:2.5rem}.ontario-padding-right-40-\!{padding-right:2.5rem}.ontario-margin-top-48-\!{margin-top:3rem}.ontario-padding-top-48-\!{padding-top:3rem}.ontario-margin-bottom-48-\!{margin-bottom:3rem}.ontario-padding-bottom-48-\!{padding-bottom:3rem}.ontario-margin-left-48-\!{margin-left:3rem}.ontario-padding-left-48-\!{padding-left:3rem}.ontario-margin-right-48-\!{margin-right:3rem}.ontario-padding-right-48-\!{padding-right:3rem}.ontario-margin-top-64-\!{margin-top:4rem}.ontario-padding-top-64-\!{padding-top:4rem}.ontario-margin-bottom-64-\!{margin-bottom:4rem}.ontario-padding-bottom-64-\!{padding-bottom:4rem}.ontario-margin-left-64-\!{margin-left:4rem}.ontario-padding-left-64-\!{padding-left:4rem}.ontario-margin-right-64-\!{margin-right:4rem}.ontario-padding-right-64-\!{padding-right:4rem}.ontario-padding-top-0-\!{padding-top:0 !important}.ontario-padding-bottom-0-\!{padding-bottom:0 !important}.ontario-padding-right-0-\!{padding-right:0 !important}.ontario-padding-left-0-\!{padding-left:0 !important}.ontario-padding-top-4-\!{padding-top:.25rem !important}.ontario-padding-bottom-4-\!{padding-bottom:.25rem !important}.ontario-padding-right-4-\!{padding-right:.25rem !important}.ontario-padding-left-4-\!{padding-left:.25rem !important}.ontario-padding-top-8-\!{padding-top:.5rem !important}.ontario-padding-bottom-8-\!{padding-bottom:.5rem !important}.ontario-padding-right-8-\!{padding-right:.5rem !important}.ontario-padding-left-8-\!{padding-left:.5rem !important}.ontario-padding-top-12-\!{padding-top:.75rem !important}.ontario-padding-bottom-12-\!{padding-bottom:.75rem !important}.ontario-padding-right-12-\!{padding-right:.75rem !important}.ontario-padding-left-12-\!{padding-left:.75rem !important}.ontario-padding-top-16-\!{padding-top:1rem !important}.ontario-padding-bottom-16-\!{padding-bottom:1rem !important}.ontario-padding-right-16-\!{padding-right:1rem !important}.ontario-padding-left-16-\!{padding-left:1rem !important}.ontario-padding-top-24-\!{padding-top:1.5rem !important}.ontario-padding-bottom-24-\!{padding-bottom:1.5rem !important}.ontario-padding-right-24-\!{padding-right:1.5rem !important}.ontario-padding-left-24-\!{padding-left:1.5rem !important}.ontario-padding-top-32-\!{padding-top:2rem !important}.ontario-padding-bottom-32-\!{padding-bottom:2rem !important}.ontario-padding-right-32-\!{padding-right:2rem !important}.ontario-padding-left-32-\!{padding-left:2rem !important}.ontario-padding-top-40-\!{padding-top:2.5rem !important}.ontario-padding-bottom-40-\!{padding-bottom:2.5rem !important}.ontario-padding-right-40-\!{padding-right:2.5rem !important}.ontario-padding-left-40-\!{padding-left:2.5rem !important}.ontario-padding-top-48-\!{padding-top:3rem !important}.ontario-padding-bottom-48-\!{padding-bottom:3rem !important}.ontario-padding-right-48-\!{padding-right:3rem !important}.ontario-padding-left-48-\!{padding-left:3rem !important}.ontario-padding-top-64-\!{padding-top:4rem !important}.ontario-padding-bottom-64-\!{padding-bottom:4rem !important}.ontario-padding-right-64-\!{padding-right:4rem !important}.ontario-padding-left-64-\!{padding-left:4rem !important}.ontario-padding-top-80-\!{padding-top:5rem !important}.ontario-padding-bottom-80-\!{padding-bottom:5rem !important}.ontario-padding-right-80-\!{padding-right:5rem !important}.ontario-padding-left-80-\!{padding-left:5rem !important}.ontario-margin-top-0-\!{margin-top:0 !important}.ontario-margin-bottom-0-\!{margin-bottom:0 !important}.ontario-margin-right-0-\!{margin-right:0 !important}.ontario-margin-left-0-\!{margin-left:0 !important}.ontario-margin-top-4-\!{margin-top:.25rem !important}.ontario-margin-bottom-4-\!{margin-bottom:.25rem !important}.ontario-margin-right-4-\!{margin-right:.25rem !important}.ontario-margin-left-4-\!{margin-left:.25rem !important}.ontario-margin-top-8-\!{margin-top:.5rem !important}.ontario-margin-bottom-8-\!{margin-bottom:.5rem !important}.ontario-margin-right-8-\!{margin-right:.5rem !important}.ontario-margin-left-8-\!{margin-left:.5rem !important}.ontario-margin-top-12-\!{margin-top:.75rem !important}.ontario-margin-bottom-12-\!{margin-bottom:.75rem !important}.ontario-margin-right-12-\!{margin-right:.75rem !important}.ontario-margin-left-12-\!{margin-left:.75rem !important}.ontario-margin-top-16-\!{margin-top:1rem !important}.ontario-margin-bottom-16-\!{margin-bottom:1rem !important}.ontario-margin-right-16-\!{margin-right:1rem !important}.ontario-margin-left-16-\!{margin-left:1rem !important}.ontario-margin-top-24-\!{margin-top:1.5rem !important}.ontario-margin-bottom-24-\!{margin-bottom:1.5rem !important}.ontario-margin-right-24-\!{margin-right:1.5rem !important}.ontario-margin-left-24-\!{margin-left:1.5rem !important}.ontario-margin-top-32-\!{margin-top:2rem !important}.ontario-margin-bottom-32-\!{margin-bottom:2rem !important}.ontario-margin-right-32-\!{margin-right:2rem !important}.ontario-margin-left-32-\!{margin-left:2rem !important}.ontario-margin-top-40-\!{margin-top:2.5rem !important}.ontario-margin-bottom-40-\!{margin-bottom:2.5rem !important}.ontario-margin-right-40-\!{margin-right:2.5rem !important}.ontario-margin-left-40-\!{margin-left:2.5rem !important}.ontario-margin-top-48-\!{margin-top:3rem !important}.ontario-margin-bottom-48-\!{margin-bottom:3rem !important}.ontario-margin-right-48-\!{margin-right:3rem !important}.ontario-margin-left-48-\!{margin-left:3rem !important}.ontario-margin-top-64-\!{margin-top:4rem !important}.ontario-margin-bottom-64-\!{margin-bottom:4rem !important}.ontario-margin-right-64-\!{margin-right:4rem !important}.ontario-margin-left-64-\!{margin-left:4rem !important}.ontario-margin-top-80-\!{margin-top:5rem !important}.ontario-margin-bottom-80-\!{margin-bottom:5rem !important}.ontario-margin-right-80-\!{margin-right:5rem !important}.ontario-margin-left-80-\!{margin-left:5rem !important}.ontario-callout,.ontario-aside{border-left:.25rem solid #367a76;padding:1.5rem}.ontario-callout *,.ontario-aside *{max-width:48rem}.ontario-callout *:last-child,.ontario-aside *:last-child{margin-bottom:.5rem}.ontario-callout{margin:2rem 0 2.5rem 0;background-color:#f2f2f2}.ontario-aside{margin:2rem 0 2.5rem 2rem}@media screen and (max-width: 40em){.ontario-aside{margin:2rem 0 2.5rem 1rem}}.ontario-callout__title,.ontario-aside__title{margin-bottom:1rem}.ontario-border-highlight--teal{border-color:#367a76 !important}.ontario-border-highlight--gold{border-color:#86743d !important}.ontario-border-highlight--yellow{border-color:#8a600d !important}.ontario-border-highlight--taupe{border-color:#7b725c !important}.ontario-border-highlight--green{border-color:#2b8737 !important}.ontario-border-highlight--lime{border-color:#5f8129 !important}.ontario-border-highlight--sky{border-color:#1080a6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278f !important}
  • URL: /components/raw/callouts-asides/callouts-asides.css
  • Chemin du système de fichiers: fractal/components/components/alerts-highlights/callouts-asides/callouts-asides.css
  • Taille: 9.8 KB

Quand utiliser cette composante

Les encadrés et apartés sont des passages ou des renseignements connexes qui ont été extraits d’un contenu plus important et qui ont été modifiés visuellement pour attirer l’attention des utilisateurs. Ils peuvent être utilisés pour :

  • des renseignements importants
  • des exemples
  • des précisions à propos de la page

Encadré

Un encadré est utilisé pour mettre l’accent sur un extrait important d’information du contenu d’une page. Le contenu d’un encadré doit être un élément de la page que vous souhaitez mettre en évidence, mais il ne s’agit pas d’une information cruciale.


Aparté

Un aparté doit inclure le contenu qui n’est pas directement lié au contenu présent sur la page. Le contenu d’un aparté pourrait être considéré comme distinct du reste du contenu de la page.

Utilisez un aparté plutôt qu’un encadré lorsque le contenu peut être ignoré sans nuire au reste du contenu. Les apartés sont codés autrement que les encadrés afin de ne pas perturber le contenu pour les lecteurs d’écran.


Pratiques exemplaires

À faire :

  • rester bref, en visant un maximum de 280 caractères
  • réduire au minimum l’utilisation des encadrés et des apartés; éviter si possible d’en avoir plusieurs par page
  • choisir un maximum de deux couleurs d’accent qui correspondent à la stratégie de marque

À ne pas faire :

  • utiliser un encadré ou un aparté pour remplacer les alertes critiques ou les alertes de page
  • mettre un paragraphe entier de contenu (plutôt qu’un court extrait) dans un encadré ou un aparté

Options de couleur

Vous pouvez vous servir des couleurs dédiées pour la ligne d’accentuation dans les encadrés et apartés. Ajoutez le nom de classe suivant aux divisions d’encadrés et d’apartés qu’il faut appliquer.

Couleur Nom de la couleur Hex code SCSS variable Nom de catégorie
Sarcelle foncé (défaut) #367A76 $ontario-colour-dark-teal ontario-border-highlight--teal
Doré foncé #86743D $ontario-colour-dark-gold ontario-border-highlight--gold
Jaune foncé #8A600D $ontario-colour-dark-yellow ontario-border-highlight--yellow
Taupe foncé #7B725C $ontario-colour-dark-taupe ontario-border-highlight--taupe
Lime foncé #5F8129 $ontario-colour-dark-lime ontario-border-highlight--lime
Ciel foncé #1080A6 $ontario-colour-dark-sky ontario-border-highlight--sky
Mauve foncé #92278F $ontario-colour-dark-purple ontario-border-highlight--purple

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