Footer

In progress

The Ontario footer is mandatory for all web pages and applications in the Ontario ecosystem. It shows users that they are on an official Ontario site and provides consistent access to accessibility, privacy, copyright, and contact links.

  • Content: 
    @import "../../../theme/assets/styles/sass/variables-import";
@import '../../../theme/assets/styles/sass/utilities/text-utilities';

.ontario-footer {
    color: $ontario-colour-white;
    padding: $spacing-9 $spacing-0;
}

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

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

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

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

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

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

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

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

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

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

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

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

.ontario-footer__copyright a {
    margin: 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-0 $spacing-4 $spacing-3 $spacing-0;
    padding: $spacing-0;
    outline: none;

	height: calc(#{$spacing-8} + #{$spacing-2});
    width: calc(#{$spacing-8} + #{$spacing-2});

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

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

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

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

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

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

.ontario-footer p {
    max-width: 48rem;
    width: 100%;

    a {
        color: $ontario-colour-white;
        font-weight: 600;

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

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

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

.ontario-footer__ministry-logo {
    width: 100%;
    max-width: 255px;
}

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

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

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

/* Supergraphic background */
.ontario-footer--default,
.ontario-footer--partnernship,
.ontario-footer__expanded-top-section {
    position: relative;

    &:before {
        background-color: darken($ontario-colour-white, 80);
        background-repeat: no-repeat;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.ontario-footer--default:before {
    background-image: url("#{$logo-dir}/footer-default-supergraphic-logo.svg");
}

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


//////////////////////////
//  Footer variations  //
/////////////////////////

/* Default footer */
.ontario-footer--default {
    background-color: $ontario-colour-black;
    border-bottom: 4px solid $ontario-greyscale-70;

    &:before {
        background-size: 112.5rem;
        background-position: calc(50vw - 73.5rem) - 64rem;

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

        @media screen and (min-width: $medium-breakpoint) {
            background-size: 275rem;
            background-position: calc(50vw - 187rem) -160rem;
        }

    }
}

/* Partnership footer */
.ontario-footer--partnership {
    background-color: $ontario-colour-black;
}

.ontario-footer__partnership-logo-container {
    text-align: right;

    @media screen and (max-width: $small-breakpoint) {
        margin-top: $spacing-7;
        text-align: left;
    }
}

.ontario-footer__ontario-logo {
    display: inline-block;
    height: 46px;
    margin-bottom: $spacing-5;
    margin-top: $spacing-0;



    @media screen and (min-width: $medium-breakpoint) {
        margin-top: -5px;
    }
}


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

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

    &:before {
        background-size: 165rem;
        background-position: calc(50vw - 125rem) - 64rem;

        @media screen and (min-width: $small-breakpoint) {
            background-size: 250rem;
            background-position: calc(50vw - 195rem) -106rem;
        }
        @media screen and (min-width: $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($ontario-colour-white, 10);
    }
}

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

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

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

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

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

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

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

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

.ontario-footer__expanded-bottom-section {
    background-color: $ontario-colour-black;
    padding-top: $spacing-9;
}
  • URL: /components/raw/footers/footers.scss
  • Filesystem Path: fractal/components/components/footers/footers.scss
  • Size: 7.1 KB
  • Content: 
    .ontario-nbsp{white-space:nowrap}.ontario-footer{color:#fff;padding:4rem 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:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 40em){.ontario-footer__links-container--inline{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row}}.ontario-footer__links-container--two-column-list{-webkit-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;column-count:2}.ontario-footer__links-container--two-column-list .ontario-footer__link{padding:0;margin:0 1rem 1rem 0}}.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__copyright a{margin:0}.ontario-footer__links-container--social{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;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:calc(3rem + 0.5rem);width:calc(3rem + 0.5rem);display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items: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-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__ministry-logo{width:100%;max-width:255px}.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--default,.ontario-footer--partnernship,.ontario-footer__expanded-top-section{position:relative}.ontario-footer--default:before,.ontario-footer--partnernship:before,.ontario-footer__expanded-top-section:before{background-color:#333;background-repeat:no-repeat;content:"";position:absolute;top:0;left:0;width:100%;height:100%}.ontario-footer--default:before{background-image:url("../logos/footer-default-supergraphic-logo.svg")}.ontario-footer__expanded-top-section:before{background-image:url("../logos/footer-expanded-supergraphic-logo.svg")}.ontario-footer--default{background-color:#1a1a1a;border-bottom:4px solid #4d4d4d}.ontario-footer--default:before{background-size:112.5rem;background-position:calc(50vw - 73.5rem)-64rem}@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}}.ontario-footer--partnership{background-color:#1a1a1a}.ontario-footer__partnership-logo-container{text-align:right}@media screen and (max-width: 40em){.ontario-footer__partnership-logo-container{margin-top:2.5rem;text-align:left}}.ontario-footer__ontario-logo{display:inline-block;height:46px;margin-bottom:1.5rem;margin-top:0}@media screen and (min-width: 73em){.ontario-footer__ontario-logo{margin-top:-5px}}.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}.ontario-footer__expanded-top-section:before{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/footers/footers.css
  • Filesystem Path: fractal/components/components/footers/footers.css
  • Size: 6.5 KB

Guiding principle: Be consistent.

The footer provides:

  • mandatory legal links
  • supplementary information

There are three footer options to choose from:

All Ontario web pages and applications must include the default footer.

Types of footers

The default footer should include:

  • the black bar with supergraphic branding
  • Mandatory legal links:
    • Accessibility
    • Privacy
    • Queen’s printer
    • Contact us

The partnership footer includes:

  • the black bar
  • Ontario logo
  • Language at the bottom of logo (if necessary):
    • “Licensed by Government of Ontario”
    • “In partnership with Government of Ontario”
    • “Funded by Government of Ontario”
    • “Sponsored by Government of Ontario”

The expanded footer contains a secondary section above the default footer that can include:

  • approved site-specific logo/branding
  • about blurb
  • contact links
  • social media links
  • subscription/sign-up
  • highlighted navigation (most visited topics, quick links)

Help improve this page

If you have other suggestions or advice or any questions on footers, the design system team would love to hear from you.