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.
@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;
}
.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}
Guiding principle: Be consistent.
The footer provides:
There are three footer options to choose from:
All Ontario web pages and applications must include the default footer.
The default footer should include:
The partnership footer includes:
The expanded footer contains a secondary section above the default footer that can include:
If you have other suggestions or advice or any questions on footers, the design system team would love to hear from you.