Ontario.ca homepage
Français

Ontario Design System

Simple footer

This footer is for most applications and subsites. It includes links to accessibility, privacy and copyright 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;

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

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

    Any style updates or additions will need to be
    replicated in the expanded-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: 0;
		margin: spacing.$spacing-0 spacing.$spacing-8 spacing.$spacing-4 spacing.$spacing-0;
	}
}

/*************************************
    Simple footer specific styles
*************************************/
/* Supergraphic background */
.ontario-footer--default {
	position: relative;
	background-color: colours.$ontario-colour-black;
	border-bottom: 4px solid colours.$ontario-greyscale-70;

	&:before {
		background-image: url('#{$logo-dir}/footer-default-supergraphic-logo.svg');
		background-size: 112.5rem;
		background-position: calc(50vw - 73.5rem) -64rem;
		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%;

		@media screen and (min-width: breakpoints.$small-breakpoint) {
			background-size: 180rem;
			background-position: calc(50vw - 120rem) -106rem;
		}

		@media screen and (min-width: breakpoints.$medium-breakpoint) {
			background-size: 275rem;
			background-position: calc(50vw - 187rem) -160rem;
		}
	}
}
  • URL: /components/raw/simple-footer/simple-footer.scss
  • Filesystem Path: fractal/components/components/footers/simple-footer/simple-footer.scss
  • Size: 3.5 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--default{position:relative;background-color:#1a1a1a;border-bottom:4px solid #4d4d4d}.ontario-footer--default:before{background-image:url("../logos/footer-default-supergraphic-logo.svg");background-size:112.5rem;background-position:calc(50vw - 73.5rem) -64rem;background-color:#333;background-repeat:no-repeat;content:"";position:absolute;top:0;left:0;width:100%;height:100%}@media screen and (min-width: 40em){.ontario-footer--default:before{background-size:180rem;background-position:calc(50vw - 120rem) -106rem}}@media screen and (min-width: 73em){.ontario-footer--default:before{background-size:275rem;background-position:calc(50vw - 187rem) -160rem}}
  • URL: /components/raw/simple-footer/simple-footer.css
  • Filesystem Path: fractal/components/components/footers/simple-footer/simple-footer.css
  • Size: 1.8 KB

Guiding principle: Be consistent.

When to use this component

All Ontario applications and subsites must, at minimum, include the simple footer at the bottom of every page.

The simple footer is standard across all Ontario digital services. It applies Ontario branding to your product and provides mandatory links to important Ontario government information.

Use the expanded footer if you need to include additional links to approved site-specific navigation or social media.

Features

The simple footer should include:

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

Best practices

Do

  • update the “contact us” link to point to the contact information for your specific service (for example, a contact form or email address)
  • ensure the footer is anchored to the bottom of the screen

Don’t

  • add additional links to the footer ⁠— if you need to add more information, use the expanded footer

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.