Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Liste récapitulative

Utiliser une liste récapitulative pour synthétiser des renseignements comme les réponses d’un utilisateur à la fin d’un formulaire.

  • Contenu: 
    @use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

.ontario-summary-list {
	max-width: globalVariables.$standard-width;
	float: revert;
	margin-bottom: spacing.$spacing-9;

	&.summary-list-full-width {
		max-width: 100%;
	}

	dl.ontario-summary-list__container {
		margin: spacing.$spacing-0;

		// Default Ratio 1:1
		.ontario-summary-list__key,
		.ontario-summary-list__value {
			flex: 1;
		}

		// 1:2 ratio
		&.ontario-summary-list-ratio__1-2 {
			.ontario-summary-list__key {
				flex: 1;
			}

			.ontario-summary-list__value {
				flex: 2;
			}
		}

		// 1:3 ratio
		&.ontario-summary-list-ratio__1-3 {
			.ontario-summary-list__key {
				flex: 1;
			}

			.ontario-summary-list__value {
				flex: 3;
			}
		}

		// 2:1 ratio
		&.ontario-summary-list-ratio__2-1 {
			.ontario-summary-list__key {
				flex: 2;
			}

			.ontario-summary-list__value {
				flex: 1;
			}
		}

		// 2:3 ratio
		&.ontario-summary-list-ratio__2-3 {
			.ontario-summary-list__key {
				flex: 2;
			}

			.ontario-summary-list__value {
				flex: 3;
			}
		}
	}

	.ontario-summary-list__row {
		display: flex;
		flex-direction: row;
		padding: (spacing.$spacing-4 + globalFunctions.px-to-rem(3)) spacing.$spacing-0;
		border-bottom: 1px solid colours.$ontario-greyscale-20;
		align-items: flex-start;
		justify-content: space-between;
		margin: spacing.$spacing-0 !important;

		&.compact {
			padding: spacing.$spacing-3 spacing.$spacing-0;
		}

		.ontario-summary-list__key {
			@extend %h5-styles;
			margin-bottom: spacing.$spacing-0;

			@media screen and (max-width: breakpoints.$small-breakpoint) {
				padding-bottom: spacing.$spacing-1;
			}
		}

		.ontario-summary-list__value {
			padding: spacing.$spacing-0 spacing.$spacing-5;

			@media screen and (max-width: breakpoints.$small-breakpoint) {
				flex: revert;
				padding: spacing.$spacing-0;
			}
		}

		dt,
		dd {
			margin: spacing.$spacing-0 !important; // using important as fractal default styles were causing issues
			text-align: left;
		}

		.ontario-summary-list-button__container {
			text-align: right;
			flex-basis: 3.5rem;

			@media screen and (max-width: breakpoints.$small-breakpoint) {
				flex-basis: revert;
				align-self: flex-start;
			}
		}

		.ontario-summary-list-change__button {
			display: block;
			text-decoration: underline;
			cursor: pointer;
			font-size: fontSizes.$ontario-font-size-standard-body-text;
			color: colours.$ontario-colour-link;
			font-weight: fontWeights.$ontario-font-weights-normal;
			padding: spacing.$spacing-0;

			&.hidden {
				visibility: hidden;
			}

			&:hover {
				color: colours.$ontario-colour-link--hover;
			}

			&:active {
				color: colours.$ontario-colour-link--active;
			}

			@media screen and (max-width: breakpoints.$small-breakpoint) {
				margin-top: spacing.$spacing-3;
			}
		}

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			flex-direction: column;
			align-items: revert;
		}
	}

	.ontario-summary-list__row--no-actions {
		&::after {
			content: '';
			width: 3.5rem;
		}
	}

	.ontario-summary-list-heading__container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 3px solid colours.$ontario-colour-black;
		gap: spacing.$spacing-6;
		padding-bottom: spacing.$spacing-3;

		.ontario-summary-list__heading {
			@extend %h3-styles;
			margin-bottom: spacing.$spacing-0;
		}

		.ontario-summary-list-heading__buttons {
			display: flex;
			gap: 2rem;
		}

		.ontario-summary-list-change__button {
			padding: spacing.$spacing-0;
		}

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			flex-direction: column;
			align-items: flex-start;
			gap: spacing.$spacing-3;
		}
	}
}

.ontario-summary-list__title {
	margin-bottom: spacing.$spacing-6;
}
  • URL: /components/raw/summary-list/summary-list.scss
  • Chemin du système de fichiers: fractal/components/components/summary-list/summary-list.scss
  • Taille: 4.7 KB
  • Contenu: 
    .ontario-summary-list .ontario-summary-list__row .ontario-summary-list__key,.ontario-summary-list .ontario-summary-list-heading__container .ontario-summary-list__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-summary-list .ontario-summary-list-heading__container .ontario-summary-list__heading{font-size:1.4375rem;letter-spacing:.02rem;line-height:1.39;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-summary-list .ontario-summary-list-heading__container .ontario-summary-list__heading{font-size:1.75rem;letter-spacing:.02rem;line-height:1.43}}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list__key{font-size:1.125rem;letter-spacing:.03rem;line-height:1.56;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-summary-list .ontario-summary-list__row .ontario-summary-list__key{font-size:1.1875rem;letter-spacing:.025rem;line-height:1.5}}.ontario-summary-list{max-width:48rem;float:revert;margin-bottom:4rem}.ontario-summary-list.summary-list-full-width{max-width:100%}.ontario-summary-list dl.ontario-summary-list__container{margin:0}.ontario-summary-list dl.ontario-summary-list__container .ontario-summary-list__key,.ontario-summary-list dl.ontario-summary-list__container .ontario-summary-list__value{flex:1}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__1-2 .ontario-summary-list__key{flex:1}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__1-2 .ontario-summary-list__value{flex:2}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__1-3 .ontario-summary-list__key{flex:1}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__1-3 .ontario-summary-list__value{flex:3}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__2-1 .ontario-summary-list__key{flex:2}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__2-1 .ontario-summary-list__value{flex:1}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__2-3 .ontario-summary-list__key{flex:2}.ontario-summary-list dl.ontario-summary-list__container.ontario-summary-list-ratio__2-3 .ontario-summary-list__value{flex:3}.ontario-summary-list .ontario-summary-list__row{display:flex;flex-direction:row;padding:1.1875rem 0;border-bottom:1px solid #ccc;align-items:flex-start;justify-content:space-between;margin:0 !important}.ontario-summary-list .ontario-summary-list__row.compact{padding:.75rem 0}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list__key{margin-bottom:0}@media screen and (max-width: 40em){.ontario-summary-list .ontario-summary-list__row .ontario-summary-list__key{padding-bottom:.25rem}}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list__value{padding:0 1.5rem}@media screen and (max-width: 40em){.ontario-summary-list .ontario-summary-list__row .ontario-summary-list__value{flex:revert;padding:0}}.ontario-summary-list .ontario-summary-list__row dt,.ontario-summary-list .ontario-summary-list__row dd{margin:0 !important;text-align:left}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list-button__container{text-align:right;flex-basis:3.5rem}@media screen and (max-width: 40em){.ontario-summary-list .ontario-summary-list__row .ontario-summary-list-button__container{flex-basis:revert;align-self:flex-start}}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list-change__button{display:block;text-decoration:underline;cursor:pointer;font-size:1rem;color:#06c;font-weight:400;padding:0}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list-change__button.hidden{visibility:hidden}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list-change__button:hover{color:#00478f}.ontario-summary-list .ontario-summary-list__row .ontario-summary-list-change__button:active{color:#002142}@media screen and (max-width: 40em){.ontario-summary-list .ontario-summary-list__row .ontario-summary-list-change__button{margin-top:.75rem}}@media screen and (max-width: 40em){.ontario-summary-list .ontario-summary-list__row{flex-direction:column;align-items:revert}}.ontario-summary-list .ontario-summary-list__row--no-actions::after{content:"";width:3.5rem}.ontario-summary-list .ontario-summary-list-heading__container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:3px solid #1a1a1a;gap:2rem;padding-bottom:.75rem}.ontario-summary-list .ontario-summary-list-heading__container .ontario-summary-list__heading{margin-bottom:0}.ontario-summary-list .ontario-summary-list-heading__container .ontario-summary-list-heading__buttons{display:flex;gap:2rem}.ontario-summary-list .ontario-summary-list-heading__container .ontario-summary-list-change__button{padding:0}@media screen and (max-width: 40em){.ontario-summary-list .ontario-summary-list-heading__container{flex-direction:column;align-items:flex-start;gap:.75rem}}.ontario-summary-list__title{margin-bottom:2rem}
  • URL: /components/raw/summary-list/summary-list.css
  • Chemin du système de fichiers: fractal/components/components/summary-list/summary-list.css
  • Taille: 5.2 KB

Principe directeur : Respecter l’uniformité.

Dans cette page

Sauter cette navigation

Quand utiliser cette composante

Utilisez une liste récapitulative pour afficher une synthèse claire des valeurs à l’intention de l’utilisateur, par exemple :

  • pour afficher les données du formulaire (paires de valeurs clés) dans un format compact et facile à lire.
  • sur des pages de révision, pour permettre à l’utilisateur de vérifier ses réponses avant d’envoyer le formulaire.

Quand ne pas utiliser cette composante

N’utilisez pas de liste récapitulative pour des :

  • données tabulaires, utilisez plutôt un tableau.
  • listes simples, utilisez plutôt une liste ordonnée ou non ordonnée.

Caractéristiques de la composante

Chaque élément de la liste récapitulative comprend :

  • le titre de la section
  • au moins une ligne contenant :
    • la clé (une description ou une question), par exemple « Adresse courriel »
    • la valeur (une réponse), par exemple « john.doe@example.com »
    • un lien d’action facultatif

Exemple

Diagramme des caractéristiques d’une composante de liste récapitulative

Titre de la section

Le titre de section fournit une structure sémantique appropriée à votre document.

Le cas échéant, si tous les éléments d’une section peuvent être modifiés en même temps, ajoutez un lien d’action au titre de la section qui s’appliquera à tous les éléments de la liste récapitulative.

Exemple

Exemple d’une composante de liste récapitulative mettant en évidence les liens d’action dans le titre de la section

Veillez à ce que les liens d’action soient courts et n’en ajoutez pas plus de 2 ou 3 par titre de section. Si une action est difficile à annuler ou peut avoir des conséquences graves, envisagez d’ajouter un avertissement ou demandez à l’utilisateur de confirmer.

Meilleures pratiques

À faire

  • Définissez votre liste récapitulative avec les titres de section, même si une section ne contient qu’un seul élément.
  • Veillez à ce que le niveau du titre de la section suive la hiérarchie générale des titres. Évitez de sauter des niveaux de titres.
  • Reformulez la façon dont les questions apparaissent dans la liste récapitulative si nécessaire. Par exemple :
    • Utilisez une étiquette pour une adresse complète plutôt qu’une étiquette pour chaque ligne de l’adresse.
    • Reformulez les questions longues en énoncés plus courts.
  • Incluez des questions facultatives avec des réponses vides. Étiquetez les réponses vides comme «  sans objet  », «  non fourni  » ou «  pas de réponse  ».

Exemple

Exemple d’une ligne de la liste récapitulative indiquant que le « Deuxième prénom » est « Pas de réponse » et un lien « Modifier »

À ne pas faire

  • Placez des listes récapitulatives à l’intérieur d’accordéons.

Spécifications techniques

Largeur de la composante

Par défaut, la composante de la liste récapitulative s’étend sur les deux tiers (8 colonnes d’un conteneur de 12 colonnes) sur les ordinateurs de bureau.

Une mise en page aux deux tiers empêche les lignes de texte de devenir si longues que la page devient difficile à lire. Cela signifie également que les liens d’action sont plus proches du reste du contenu de la page. Les utilisateurs équipés d’une loupe d’écran risquent moins de les manquer. Si vous devez afficher des réponses plus détaillées (par exemple, la réponse dans une zone de texte), vous pouvez ajouter le modificateur summary-list-full-width à ontario-summary-list pour qu’il occupe toute la largeur de 12 colonnes de l’écran sur les ordinateurs de bureau.

Colonnes flexibles

Par défaut, la distance entre les paires de questions (« clé ») et de réponses (« valeur ») est égale sur les points d’arrêt des ordinateurs de bureau et des tablettes. Si vos questions de service sont courtes, vous pouvez ajuster le rapport pour rapprocher la réponse de la question.

Par exemple, utilisez ontario-summary-list-ratio__1-2 sur le conteneur ontario-summary-list_container pour créer une distribution de colonnes 1:2 (clé:valeur).

Les classes disponibles sont les suivantes :

  • ontario-summary-list-ratio__1-2
  • ontario-summary-list-ratio__1-3
  • ontario-summary-list-ratio__2-1
  • ontario-summary-list-ratio__2-3

Lignes sans liens d’action

Si vous affichez un mélange de lignes dont certaines comportent un lien d’action et d’autres non, ajoutez la classe modificatrice ontario-summary-list__row--no-actions à la ligne ontario-summary-list-row et supprimez le lien d’action et son conteneur <dd>.

Accessibilité

Les liens d’action contiennent du texte caché pour les rendre accessibles aux utilisateurs de lecteurs d’écran. Mettez à jour le texte caché pour décrire la fonction de chaque lien d’action.

Par exemple, un lecteur d’écran peut lire à haute voix le lien d’action « Modifier » comme « Modifiez votre réponse pour : “Quelle est votre ville de résidence principale?” ».

Vous pouvez également ajouter du texte supplémentaire aux réponses de l’utilisateur. Par exemple, l’ajout du texte « Votre réponse est » avant une réponse donne plus de contexte aux utilisateurs de lecteurs d’écran.

Exemple

Exemple d’une ligne de la liste récapitulative indiquant que le « Lieu de naissance » est « Ottawa » et un lien d’action « Modifier »

Exemple de code HTML

Dans cet exemple, le contenu complet qu’un lecteur d’écran lira à haute voix est : « Lieu de naissance : Votre réponse est “Ottawa”. Modifiez votre réponse pour “Lieu de naissance” ».

<div class="ontario-summary-list__row">
    <dt class="ontario-summary-list__key">Place of birth</dt>
    <dd class="ontario-summary-list__value"><span class="ontario-show-for-sr">Your answer is: </span>Ottawa</dd>
    <dd class="ontario-summary-list-button__container">
        <a class="ontario-summary-list-change__button" href="#">
            Change <span class="ontario-show-for-sr">your answer for: <q>Place of birth</q> </span>
        </a>
    </dd>
</div>

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