Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Notre espace de noms npm a changé. Les développeurs doivent mettre à jour leurs projets pour continuer à accéder à nos composantes Web.

En-tête pour les applications

Cet en-tête est utilisé pour les applications et les sites secondaires en dehors du site Web principal ontario.ca.

  • Contenu: 
    @use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

.ontario-header.ontario-application-header {
	height: 3.125rem;
	z-index: 5;
}

.ontario-application-header__logo,
.ontario-application-header__logo a,
.ontario-application-header__lang-toggle,
.ontario-application-subheader__container,
.ontario-application-subheader__menu-container,
.ontario-application-subheader__menu {
	display: flex;
}

.ontario-application-header__logo img {
	width: 100px;
	height: 25px;
}

.ontario-application-header__lang-toggle {
	justify-content: flex-end;

	a {
		font-size: globalFunctions.px-to-rem(16);
		line-height: globalFunctions.px-to-rem(22);
		height: auto;
		padding: spacing.$spacing-2 spacing.$spacing-3;
	}
}

.ontario-application-subheader {
	padding: (spacing.$spacing-2 + spacing.$spacing-3) 0;
	background-color: darken(colours.$ontario-colour-white, 75);
	overflow: hidden;
	position: relative;
	z-index: 5;

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		z-index: zIndex.$ontario-z-index-neutral;
	}

	& > .ontario-row {
		position: relative;
	}
}

.ontario-application-subheader .ontario-header-button {
	display: flex;
}

.ontario-application-subheader .ontario-header-button {
	background-color: colours.$ontario-greyscale-70;

	.ontario-icon {
		width: 2rem;
		height: 2rem;
		margin-bottom: spacing.$spacing-0;
	}

	&:hover {
		background-color: colours.$ontario-greyscale-60;
	}

	&:active {
		background-color: colours.$ontario-colour-black;
	}
}

.ontario-application-subheader__heading {
	padding: math.div(spacing.$spacing-3, 2) spacing.$spacing-0;
	@extend %h4-styles;
	margin-bottom: spacing.$spacing-0;
	max-width: 65%;

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

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

.ontario-application-subheader__container {
	align-items: center;
	justify-content: space-between;
}

.ontario-application-subheader__menu {
	list-style: none;
	margin: spacing.$spacing-0;
	padding-left: spacing.$spacing-0;
	align-items: center;
}

.ontario-application-subheader__menu li {
	padding: spacing.$spacing-0;
	margin-left: spacing.$spacing-4;
}

.ontario-application-subheader__menu a {
	border-radius: globalVariables.$global-radius;
	color: colours.$ontario-colour-white;
	display: block;
	font-family: typography.$ontario-font-open-sans;
	font-size: globalFunctions.px-to-rem(18);
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	height: globalVariables.$standard-input-height;
	line-height: globalFunctions.px-to-rem(23);
	padding: spacing.$spacing-3;
	text-decoration: none;
	white-space: nowrap;

	&.ontario-link--active {
		border-radius: 4px 4px 0 0;
		border-bottom: 4px solid colours.$ontario-colour-white;
	}

	&:hover {
		color: colours.$ontario-colour-white;
		background-color: colours.$ontario-greyscale-60;
	}

	&:active {
		color: colours.$ontario-colour-white;
		background-color: colours.$ontario-colour-black;
	}
}

.ontario-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 100%;
	z-index: zIndex.$ontario-z-index-above-medium;
}

.ontario-navigation--open {
	.ontario-application-subheader .ontario-header-button:first-of-type {
		display: none;
	}

	.ontario-application-subheader .ontario-header-button:last-of-type {
		display: flex;
	}

	@media screen and (max-width: breakpoints.$medium-breakpoint) {
		.ontario-application-subheader-menu__container {
			position: relative;
			z-index: 3;
		}
	}

	.ontario-overlay {
		display: block;

		@media screen and (min-width: breakpoints.$medium-breakpoint) {
			display: none;
		}
	}
}
  • URL: /components/raw/application-header/application-header.scss
  • Chemin du système de fichiers: fractal/components/components/headers/application-header/application-header.scss
  • Taille: 4.6 KB
  • Contenu: 
    .ontario-application-subheader__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-application-subheader__heading{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-application-subheader__heading{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-header.ontario-application-header{height:3.125rem;z-index:5}.ontario-application-header__logo,.ontario-application-header__logo a,.ontario-application-header__lang-toggle,.ontario-application-subheader__container,.ontario-application-subheader__menu-container,.ontario-application-subheader__menu{display:flex}.ontario-application-header__logo img{width:100px;height:25px}.ontario-application-header__lang-toggle{justify-content:flex-end}.ontario-application-header__lang-toggle a{font-size:1rem;line-height:1.375rem;height:auto;padding:.5rem .75rem}.ontario-application-subheader{padding:1.25rem 0;background-color:#404040;overflow:hidden;position:relative;z-index:5}@media screen and (min-width: 73em){.ontario-application-subheader{z-index:0}}.ontario-application-subheader>.ontario-row{position:relative}.ontario-application-subheader .ontario-header-button{display:flex}.ontario-application-subheader .ontario-header-button{background-color:#4d4d4d}.ontario-application-subheader .ontario-header-button .ontario-icon{width:2rem;height:2rem;margin-bottom:0}.ontario-application-subheader .ontario-header-button:hover{background-color:#666}.ontario-application-subheader .ontario-header-button:active{background-color:#1a1a1a}.ontario-application-subheader__heading{padding:.375rem 0;margin-bottom:0;max-width:65%}.ontario-application-subheader__heading a{color:#fff;font-weight:600;text-decoration:none}.ontario-application-subheader__heading a:hover,.ontario-application-subheader__heading a:active,.ontario-application-subheader__heading a:visited{color:#fff;text-decoration:underline}.ontario-application-subheader__container{align-items:center;justify-content:space-between}.ontario-application-subheader__menu{list-style:none;margin:0;padding-left:0;align-items:center}.ontario-application-subheader__menu li{padding:0;margin-left:1rem}.ontario-application-subheader__menu a{border-radius:4px;color:#fff;display:block;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.125rem;font-weight:600;height:48px;line-height:1.4375rem;padding:.75rem;text-decoration:none;white-space:nowrap}.ontario-application-subheader__menu a.ontario-link--active{border-radius:4px 4px 0 0;border-bottom:4px solid #fff}.ontario-application-subheader__menu a:hover{color:#fff;background-color:#666}.ontario-application-subheader__menu a:active{color:#fff;background-color:#1a1a1a}.ontario-overlay{display:none;position:fixed;top:0;left:0;background:rgba(0,0,0,.6);width:100%;height:100%;z-index:2}.ontario-navigation--open .ontario-application-subheader .ontario-header-button:first-of-type{display:none}.ontario-navigation--open .ontario-application-subheader .ontario-header-button:last-of-type{display:flex}@media screen and (max-width: 73em){.ontario-navigation--open .ontario-application-subheader-menu__container{position:relative;z-index:3}}.ontario-navigation--open .ontario-overlay{display:block}@media screen and (min-width: 73em){.ontario-navigation--open .ontario-overlay{display:none}}
  • URL: /components/raw/application-header/application-header.css
  • Chemin du système de fichiers: fractal/components/components/headers/application-header/application-header.css
  • Taille: 3.5 KB

Quand utiliser cet en-tête

Cet en-tête est utilisé pour les applications et les sites secondaires qui ne font pas partie du site Web principal ontario.ca.

L’en-tête est employé pour les applications ou les sites secondaires comportant l’un ou plusieurs des éléments suivants :

  • un nom spécifique;
  • un volet de navigation ou des sous-pages;
  • sa propre fonction de recherche;
  • des comptes d’utilisateur ou son propre système d’ouverture de session.

L’en-tête reflète l’image de marque de l’Ontario sur votre produit tout en fournissant :

  • une identité claire à l’application ou au site secondaire;
  • un endroit pour les liens de l’application ou du site secondaire ou pour un menu, au besoin.

Caractéristiques

L’en-tête pour les applications comporte :

  • une barre noire avec :
    • une version plus petite du logo de l’Ontario
    • une option de bascule de langue
  • une barre grise secondaire avec :
    • le nom de l’application
    • des liens de navigation
    • le menu du site

Ne pas modifier la couleur de la barre secondaire de l’en-tête de l’application. Le gris foncé (#404040) est obligatoire. Il a été testé en ce qui a trait à l'accessibilité avec le texte et les couleurs de l'interactivité de l'état, et il offre une expérience cohérente à travers les services du gouvernement de l'Ontario.

La version plus petite du logo de l’Ontario est autorisée uniquement pour cet en-tête.

Pratiques exemplaires

À faire

  • Limiter le nombre de liens de navigation (maximum de sept) et garder les intitulés aussi concis que possible.
  • Placer la fonction de recherche ou les menus spécifiques à l’application dans la barre secondaire pour bien montrer que ces fonctions ne sont pas liées au site Web gouvernemental ontario.ca.
  • Créer un lien pour relier le nom de l’application dans la barre secondaire à la page de renvoi de l’application.
  • Créer un lien pour relier le logo de l’Ontario dans la barre noire à la page de renvoi en anglais ou en français du site ontario.ca (selon la langue de la page dans l’application).
  • S’assurer que l’option de bascule de langue se trouve dans la barre noire.
  • S’assurer que l’option de bascule de langue vous dirige vers la page miroir dans l’autre langue.

À ne pas faire

  • Utiliser les éléments de l’en-tête de l’application séparément — c’est-à-dire, ne pas utiliser la barre noire modifiée ou la barre secondaire de l’application séparément.
  • Insérer d’autres éléments de marque (logos, motifs, images) dans la barre secondaire de l’application.
  • Changer la couleur de la barre secondaire de l’application.
  • Changer la taille de la police du nom de l’application – si le nom est long, le texte sera renvoyé à la ligne automatiquement.

Exemple

Diagramme de l’en-tête pour les applications sur un ordinateur de bureau illustrant le plus petit logo de l’Ontario, l’option de bascule de langue, le nom de l’application, ainsi que les liens de navigation et le menu du site.

Exemple

Diagramme de l’en-tête pour les applications sur un ordinateur de bureau illustrant les formats survolé, en évidence, actif et page active pour les éléments dans l’en-tête.

Note technique

L’en-tête pour les applications nécessite les deux fichiers JavaScript suivants :

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