Ontario.ca homepage
Français

Ontario Design System

Our npm namespace has changed. Developers should update their projects to continue accessing our components.

Summary list

Use a summary list to summarise information, for example, a user’s responses at the end of a form.

  • Content: 
    @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-0 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 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5;

			&.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
  • Filesystem Path: fractal/components/components/summary-list/summary-list.scss
  • Size: 4.8 KB
  • Content: 
    .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 0 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 0 0 1.5rem}.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
  • Filesystem Path: fractal/components/components/summary-list/summary-list.css
  • Size: 5.3 KB

Guiding principle: Be consistent.

On this page

Skip this page navigation

When to use this component

Use a summary list to display a clear summarized output of values to the user, for example:

  • to display form data (key-value pairs) in a compact and scannable format
  • on stand-alone review pages, to allow the user to check their responses before submitting a form

When not to use this component

Do not use a summary list for:

  • tabular data, use a table instead
  • simple lists, use an ordered or unordered list instead

Component features

Each summary list component includes:

  • section heading
  • at least one row containing:
    • the key (a description or question), for example “Email address”
    • the value (a response), for example “john.doe@example.com”
    • an optional action link

Example

Diagram of the features that make up a summary list component

Section heading

The section heading provides proper semantic structure to your document.

If appropriate, If all the items in a section can be modified at once, add an action link to the section heading that will apply to all items in the summary list.

Example

Example of a summary list component highlighting action links in the section heading

Keep the action links short and don’t add more than 2 or 3 per section heading.

If an action is difficult to undo or might have serious consequences, consider adding a warning or asking the user for confirmation.

Best practices

Do

  • Define your summary list with section headings, even if a section contains only a single item.
  • Ensure that the section heading level follows the overall heading hierarchy. Avoid skipping heading levels.
  • Rephrase how questions appear in the summary list if you need to. For example:
    • Use one label for a full address instead of multiple labels for each line of an address.
    • Rewrite long questions as shorter statements.
  • Include optional questions with empty responses. Label empty responses as “not applicable”, “not provided” or “not answered.”

Example

Example of a summary list row showing "Middle name" as "Not answered" and a "Change" link

Don’t

  • Put summary lists inside of accordions.

Technical specifications

Component width

By default, the summary list component will span to two-thirds (8 columns of a 12-column container) on desktop devices.

A two-thirds layout stops lines of text getting so long that the page becomes difficult to read. It also means the action links are closer to the other content on the page. Users with screen magnifiers are less likely to miss them.

If you need to display more detailed answers (for example, the response to a text area), you may add the summary-list-full-width modifier to ontario-summary-list to take up the full 12-column width of the screen on desktop devices.

Flex columns

By default, the distance between the question (“key”) and answer (“value”) pairs will be an even ratio on desktop and tablet breakpoints. If your service questions are short, you may adjust the ratio to bring the answer closer to the question.

For example, use ontario-summary-list-ratio__1-2 on the ontario-summary-list_container to create a 1:2 (key:value) column distribution.

The available classes are:

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

If you’re showing a mix of rows where some rows include an action link and some do not, add the ontario-summary-list__row--no-actions modifier class to the ontario-summary-list-row and remove the action link and its <dd> container.

Accessibility

Action links contain hidden text to make them accessible to screen reader users. Update the hidden text to describe what each action link is for.

For example, a screen reader may read aloud the action link "Change" as "Change your answer for: ‘What is your primary city of residence?.’ “

You can also add additional text to the user’s responses. For example, adding the text “Your answer is” before a response gives more context for screen reader users.

Example

Example of a summary list row showing 'Place of Birth' as 'Ottawa' and a 'Change' link

Example HTML code

In this example, the full content that a screen reader will read aloud is: “Place of birth: Your answer is ‘Ottawa.’ Change your answer for ‘Place of birth.’”

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

If you have any questions or feedback, please get in touch.