Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Pied de page développé

Ce pied de page est une version plus étoffée du pied de page simple. Il comporte des liens vers des renseignements supplémentaires sur différents sites.

  • Contenu: 
    @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
  • Chemin du système de fichiers: fractal/components/components/footers/expanded-footer/expanded-footer.scss
  • Taille: 7.2 KB
  • Contenu: 
    .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
  • Chemin du système de fichiers: fractal/components/components/footers/expanded-footer/expanded-footer.css
  • Taille: 5.1 KB

Principe directeur: Être cohérent.

Quand utiliser cette composante

Le pied de page développé associe l’image de marque de l’Ontario à votre produit tout en fournissant des liens obligatoires vers des pages contenant des renseignements essentiels sur le gouvernement ontarien.

Il contient également une section secondaire qui fournit de l’information telle que :

  • mention de marque spécifique au site approuvé
  • liens de navigation spécifique au site
  • liens de réseaux sociaux

Le pied de page simple doit être utilisé dans la plupart des cas. Servez-vous du pied de page développé uniquement lorsque vous proposez du contenu supplémentaire qui représente une valeur ajoutée pour les internautes.

Caractéristiques

Le pied de page développé comporte les mêmes renseignements que le pied de page simple :

Il contient aussi une section secondaire pouvant inclure :

  • une courte phrase sur le service ou l’application
  • d’autres liens vers des personnes-ressources
  • des liens de réseaux sociaux
  • liens d’abonnement ou d’inscription
  • une navigation surlignée (rubriques les plus consultées, liens rapides)

Nous recommandons de travailler avec un concepteur de contenu pour élaborer un pied de page qui représente une valeur ajoutée pour les internautes.

Variations

Le pied de page développé dispose d’un espace flexible.

Selon la taille du contenu nécessaire à insérer dans le pied de page, vous pouvez utiliser soit :

  • la disposition à deux colonnes par défaut (ajuster les colonnes à l’aide de la ontario-small-12 ontario-medium-6)
  • une disposition à trois colonnes (utiliser la grille-4 avec pied de page développé de ontario-expanded-footer__one-third-block)

Remarque : Les exemples de cette page utilisent du contenu à espace réservé. Lorsque vous concevez votre pied de page, rédigez du contenu adapté à votre application ou site.

Exemple à deux colonnes

exemple d’un pied de page développé avec le contenu disposé en deux colonnes.

Exemples à trois colonnes

Version un
Exemple d’un pied de page développé avec le contenu disposé en trois colonnes, y compris des sections pour les pages les plus consultées.
Version deux
Exemple d’un pied de page développé avec le contenu disposé en trois colonnes, y compris les réseaux sociaux.

Pratiques exemplaires

À faire

  • Utiliser uniquement du contenu qui répond aux besoins des internautes et des parties prenantes.
  • Mettre à jour le lien « Contactez-nous » pour le diriger vers la personne-ressource de votre propre site ou application (p. ex., un formulaire ou une adresse de courriel).

Note technique

Le pied de page est le dernier élément de la page; d’où l’importance de le placer tout au bas du contenu.

Si le contenu est plus court que la taille de la clôture, placer le pied de page tout au bas de la clôture.

Lorsque le contenu est plus court que la taille de la clôture, il arrive que le pied de page remonte et reste coincé au bas du contenu principal, au lieu de demeurer ancré dans la partie inférieure de la clôture. Quelques manipulations avec CSS pourraient prévenir ce genre de problème.

À faire :

Illustration d’une page web où le pied de page est ancré au bas de la clôture.

À ne pas faire :

Illustration d’une page web où le pied de page flotte au-dessus de la clôture.

Option 1

Pour commencer, voici un exemple de document index.html :

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

Dans votre CSS, ajoutez ensuite les styles suivants pour vos différentes composantes :

.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 */
}

Visitez le site freeCodeCamp (en anglais) pour savoir si cette option vous convient.


Option 2

Si vous utilisez un module Flexbox, vous devrez peut-être appliquer le code margin-top: auto à la composante pied de page.

Cela permet d’agrandir automatiquement la marge du pied de page de manière à ce qu’il occupe l’espace restant du conteneur parent, à condition qu’il soit affiché au moyen de Flexbox.

Consultez le site CSS-Tricks (en anglais) pour savoir si cette option vous convient.

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.