Ontario.ca homepage
Français

Ontario Design System

Expanded footer

This footer is an expanded version of the simple footer. It includes links to additional site-specific information.

  • Content: 
    @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/font-weights.variables' as fontWeights;

$logo-dir: '../logos' !default;

/************************************************************
    The following styles up until the next comment for
    expanded footer specific styles are shared with the
    simple footer.

    Any style updates or additions will need to be
    replicated in the simple-footer.scss file as well.
************************************************************/
.ontario-footer {
	color: colours.$ontario-colour-white;
	margin-top: spacing.$spacing-10;
	padding: spacing.$spacing-9 spacing.$spacing-0;
}

.ontario-footer {
	.ontario-columns *:last-child {
		margin-bottom: spacing.$spacing-0;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		&:not(.ontario-footer--default) .ontario-columns:first-child {
			margin-bottom: spacing.$spacing-8;
		}

		.ontario-footer__expanded-bottom-section .ontario-columns:first-child {
			margin-bottom: spacing.$spacing-0;
		}
	}
}

.ontario-footer__links-container {
	list-style: none;
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		margin-bottom: spacing.$spacing-2;
	}
}

.ontario-footer__links-container--inline {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		flex-direction: row;
	}
}

.ontario-footer__links-container li {
	padding: spacing.$spacing-1 spacing.$spacing-0;
}

.ontario-footer__link {
	color: colours.$ontario-colour-white;
	display: inline-block;
	padding: spacing.$spacing-2 spacing.$spacing-0;
	margin: spacing.$spacing-0;
	text-decoration: underline;

	&:hover,
	&:focus {
		text-decoration: none;
	}

	&:visited,
	&:active,
	&:hover {
		color: colours.$ontario-colour-white;
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		padding: spacing.$spacing-0;
		margin: spacing.$spacing-0 spacing.$spacing-8 spacing.$spacing-4 spacing.$spacing-0;
	}
}

/*************************************
    Expanded footer specific styles
**************************************/
.ontario-footer p {
	max-width: globalVariables.$standard-width;
	width: globalVariables.$full-width;

	a {
		color: colours.$ontario-colour-white;
		font-weight: fontWeights.$ontario-font-weights-semi-bold;

		&:visited {
			color: colours.$ontario-colour-white;
		}

		&:active {
			color: darken(colours.$ontario-colour-white, 10);
		}

		&:focus,
		&:hover {
			text-decoration: none;
		}
	}
}

.ontario-footer__links-container--two-column-list {
	column-count: 1;
	display: block;
	margin: spacing.$spacing-0;

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		column-count: 2;

		.ontario-footer__link {
			padding: spacing.$spacing-0;
			margin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-4 0;
		}
	}
}

.ontario-footer__links-container--social {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.ontario-footer__links-container--social .ontario-footer__link {
	background: transparent;
	border-radius: 45%;
	margin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-0;
	padding: spacing.$spacing-0;
	outline: none;

	height: (spacing.$spacing-8 + spacing.$spacing-2);
	width: (spacing.$spacing-8 + spacing.$spacing-2);

	display: flex;
	justify-content: center;
	align-items: center;

	&:hover,
	&:focus {
		background-color: darken(colours.$ontario-colour-white, 100);

		.ontario-icon {
			fill: colours.$ontario-colour-white;
		}
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		height: spacing.$spacing-8;
		width: spacing.$spacing-8;
	}
}

.ontario-footer__links-container--social .ontario-footer__link .ontario-icon {
	fill: colours.$ontario-colour-white;
	width: 36px;
	height: 36px;

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		width: 32px;
		height: 32px;
	}
}

.ontario-button.ontario-footer__button {
	background-color: colours.$ontario-colour-black;
	border: 2px solid colours.$ontario-colour-white;
	border-color: colours.$ontario-colour-white;
	color: colours.$ontario-colour-white;
	margin-bottom: spacing.$spacing-6;

	&:hover,
	&:focus {
		background-color: darken(colours.$ontario-colour-white, 70);
	}

	&:active {
		background-color: darken(colours.$ontario-colour-white, 60);
	}
}

.ontario-footer__button + .ontario-footer__links-container {
	margin-top: spacing.$spacing-5;
}

.ontario-footer__expanded-top-section:before {
	background-image: url('#{$logo-dir}/footer-expanded-supergraphic-logo.svg');
}

.ontario-footer.ontario-footer--expanded {
	padding-top: spacing.$spacing-0;
	background-color: colours.$ontario-colour-black;
	border-bottom: 4px solid colours.$ontario-greyscale-70;
}

.ontario-footer__expanded-top-section {
	background-color: darken(colours.$ontario-colour-white, 85);
	padding: spacing.$spacing-9 spacing.$spacing-0;
	position: relative;

	&:before {
		background-color: darken(colours.$ontario-colour-white, 80);
		background-repeat: no-repeat;
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: globalVariables.$full-width;
		height: 100%;
		background-size: 165rem;
		background-position: calc(50vw - 125rem) -64rem;

		@media screen and (min-width: breakpoints.$small-breakpoint) {
			background-size: 250rem;
			background-position: calc(50vw - 195rem) -106rem;
		}
		@media screen and (min-width: breakpoints.$medium-breakpoint) {
			background-size: 305rem;
			background-position: calc(50vw - 222rem) -160rem;
		}
	}
}

.ontario-footer__expanded-top-section .ontario-footer__link {
	text-decoration: underline;

	&:hover,
	&:focus {
		text-decoration: none;
	}

	&:active {
		color: darken(colours.$ontario-colour-white, 10);
	}
}

.ontario-footer__expanded-top-section ul {
	margin-bottom: 0;
}

.ontario-expanded-footer__one-third-block {
	margin-bottom: spacing.$spacing-0;

	&:first-of-type,
	&:nth-child(2) {
		margin-bottom: spacing.$spacing-8;
	}

	@media screen and (min-width: breakpoints.$small-breakpoint) {
		margin-bottom: spacing.$spacing-0;

		&:first-of-type {
			margin-bottom: spacing.$spacing-8;
		}

		&:nth-child(2) {
			margin-bottom: spacing.$spacing-0;
		}
	}

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		margin-bottom: spacing.$spacing-0;

		&:first-of-type {
			margin-bottom: spacing.$spacing-0;
		}
	}
}

.ontario-footer__expanded-bottom-section {
	background-color: colours.$ontario-colour-black;
	padding-top: spacing.$spacing-9;
}
  • URL: /components/raw/expanded-footer/expanded-footer.scss
  • Filesystem Path: fractal/components/components/footers/expanded-footer/expanded-footer.scss
  • Size: 7.2 KB
  • Content: 
    .ontario-footer{color:#fff;margin-top:5rem;padding:4rem 0}.ontario-footer .ontario-columns *:last-child{margin-bottom:0}@media screen and (max-width: 40em){.ontario-footer:not(.ontario-footer--default) .ontario-columns:first-child{margin-bottom:3rem}.ontario-footer .ontario-footer__expanded-bottom-section .ontario-columns:first-child{margin-bottom:0}}.ontario-footer__links-container{list-style:none;margin:0 0 1rem 0}@media screen and (min-width: 73em){.ontario-footer__links-container{margin-bottom:.5rem}}.ontario-footer__links-container--inline{display:flex;flex-direction:column;flex-wrap:wrap}@media screen and (min-width: 40em){.ontario-footer__links-container--inline{flex-direction:row}}.ontario-footer__links-container li{padding:.25rem 0}.ontario-footer__link{color:#fff;display:inline-block;padding:.5rem 0;margin:0;text-decoration:underline}.ontario-footer__link:hover,.ontario-footer__link:focus{text-decoration:none}.ontario-footer__link:visited,.ontario-footer__link:active,.ontario-footer__link:hover{color:#fff}@media screen and (min-width: 40em){.ontario-footer__link{padding:0;margin:0 3rem 1rem 0}}.ontario-footer p{max-width:48rem;width:100%}.ontario-footer p a{color:#fff;font-weight:600}.ontario-footer p a:visited{color:#fff}.ontario-footer p a:active{color:#e6e6e6}.ontario-footer p a:focus,.ontario-footer p a:hover{text-decoration:none}.ontario-footer__links-container--two-column-list{-webkit-column-count:1;-moz-column-count:1;column-count:1;display:block;margin:0}@media screen and (min-width: 40em){.ontario-footer__links-container--two-column-list{-webkit-column-count:2;-moz-column-count:2;column-count:2}.ontario-footer__links-container--two-column-list .ontario-footer__link{padding:0;margin:0 1rem 1rem 0}}.ontario-footer__links-container--social{display:flex;flex-direction:row;flex-wrap:wrap}.ontario-footer__links-container--social .ontario-footer__link{background:transparent;border-radius:45%;margin:0 1rem .75rem 0;padding:0;outline:none;height:3.5rem;width:3.5rem;display:flex;justify-content:center;align-items:center}.ontario-footer__links-container--social .ontario-footer__link:hover,.ontario-footer__links-container--social .ontario-footer__link:focus{background-color:#000}.ontario-footer__links-container--social .ontario-footer__link:hover .ontario-icon,.ontario-footer__links-container--social .ontario-footer__link:focus .ontario-icon{fill:#fff}@media screen and (min-width: 40em){.ontario-footer__links-container--social .ontario-footer__link{height:3rem;width:3rem}}.ontario-footer__links-container--social .ontario-footer__link .ontario-icon{fill:#fff;width:36px;height:36px}@media screen and (min-width: 40em){.ontario-footer__links-container--social .ontario-footer__link .ontario-icon{width:32px;height:32px}}.ontario-button.ontario-footer__button{background-color:#1a1a1a;border:2px solid #fff;border-color:#fff;color:#fff;margin-bottom:2rem}.ontario-button.ontario-footer__button:hover,.ontario-button.ontario-footer__button:focus{background-color:#4d4d4d}.ontario-button.ontario-footer__button:active{background-color:#666}.ontario-footer__button+.ontario-footer__links-container{margin-top:1.5rem}.ontario-footer__expanded-top-section:before{background-image:url("../logos/footer-expanded-supergraphic-logo.svg")}.ontario-footer.ontario-footer--expanded{padding-top:0;background-color:#1a1a1a;border-bottom:4px solid #4d4d4d}.ontario-footer__expanded-top-section{background-color:#262626;padding:4rem 0;position:relative}.ontario-footer__expanded-top-section:before{background-color:#333;background-repeat:no-repeat;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-size:165rem;background-position:calc(50vw - 125rem) -64rem}@media screen and (min-width: 40em){.ontario-footer__expanded-top-section:before{background-size:250rem;background-position:calc(50vw - 195rem) -106rem}}@media screen and (min-width: 73em){.ontario-footer__expanded-top-section:before{background-size:305rem;background-position:calc(50vw - 222rem) -160rem}}.ontario-footer__expanded-top-section .ontario-footer__link{text-decoration:underline}.ontario-footer__expanded-top-section .ontario-footer__link:hover,.ontario-footer__expanded-top-section .ontario-footer__link:focus{text-decoration:none}.ontario-footer__expanded-top-section .ontario-footer__link:active{color:#e6e6e6}.ontario-footer__expanded-top-section ul{margin-bottom:0}.ontario-expanded-footer__one-third-block{margin-bottom:0}.ontario-expanded-footer__one-third-block:first-of-type,.ontario-expanded-footer__one-third-block:nth-child(2){margin-bottom:3rem}@media screen and (min-width: 40em){.ontario-expanded-footer__one-third-block{margin-bottom:0}.ontario-expanded-footer__one-third-block:first-of-type{margin-bottom:3rem}.ontario-expanded-footer__one-third-block:nth-child(2){margin-bottom:0}}@media screen and (min-width: 73em){.ontario-expanded-footer__one-third-block{margin-bottom:0}.ontario-expanded-footer__one-third-block:first-of-type{margin-bottom:0}}.ontario-footer__expanded-bottom-section{background-color:#1a1a1a;padding-top:4rem}
  • URL: /components/raw/expanded-footer/expanded-footer.css
  • Filesystem Path: fractal/components/components/footers/expanded-footer/expanded-footer.css
  • Size: 5.1 KB

Guiding principle: Be consistent.

When to use this component

The expanded footer applies Ontario branding to your product while providing mandatory links to important Ontario government information.

It also has a secondary section for additional information, such as:

  • approved section-specific branding
  • site-specific navigation links
  • social media links.

In most cases, you should use the simple footer. Only consider using the expanded footer if you have additional content that adds value for users.

Features

The expanded footer contains the same information as the simple footer:

  • black bar with supergraphic branding
  • mandatory links:
  • optional link:
    • Terms of use (link to the ontario.ca Terms of use or specific terms of use for your service, if applicable)

It also has a secondary section that may include:

  • a brief sentence about the service or application
  • other contact links
  • social media links
  • subscription/sign-up links
  • highlighted navigation (most visited topics, quick links)

We recommend working with a content designer to develop footer content that adds value for users.

Variations

The expanded footer area is flexible.

Depending on how much content you need to fit in the footer, you may use either a:

  • default two-column layout (adjust grid columns to ontario-small-12 ontario-medium-6)
  • three-column layout (using grid-4 with ontario-expanded-footer__one-third-block)

Note: the examples on this page use placeholder content. When you’re designing your footer, write content that makes sense for your application or site.

Two-column example

Example of an expanded footer with content arranged in two columns.

Three-column examples

Version one
Example of an expanded footer with content arranged in three columns, including most visited topics.
Version two
Example of an expanded footer with content arranged in three columns, including social media sections.

Best practices

Do

  • only include content that is based on user and stakeholder needs
  • update the “contact us” link to your own site/application’s contact information (for example, a contact form or email address)

Technical Note

The footer is the last element on the page, so it’s important to make sure it is situated at the bottom of the content.

If the content is shorter than the viewport, then make sure the footer is situated at the bottom of the viewport.

If the content is shorter than the viewport, sometimes the footer rides up and gets stuck to the bottom of the main content, instead of staying at the bottom of the viewport. With some CSS, you can manipulate the layout to avoid this issue.

Do this:

Illustration of a web page with the footer anchored to the bottom of the viewport.

Don't do this:

Illustration of a web page with the footer floating above the bottom of the viewport.

Option 1

To start, here is an example of an index.html set-up:

<div class="“ontario-container”">
    <div class="“ontario-content-wrapper”">
        <h1>Lorem Ipsum</h1>
        <p>
            What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
            1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
            recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
    <footer class="ontario-footer">
        <p>Hey this is a footer</p>
    </footer>
</div>

Then, in your CSS, add the following styles to your elements:

.ontario-container {
    position: relative;
    min-height: 100vh;
}

.ontario-content-wrapper {
    padding-bottom: 2.5rem; /* Footer height */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Footer height */
}

Visit freeCodeCamp to learn about what each style rule achieves.


Option 2

If you’re using a Flexbox layout, you may need to apply margin-top: auto to the footer element.

This automatically extends the footer’s margin to take up the remaining space in its parent container, as long as it is displayed using Flexbox.

Check out CSS-Tricks to determine if this option is right for you.

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