Application header

This header is for applications and subsites outside of the main ontario.ca website.

  • Content:
    @use 'sass:math';
    @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/z-index.variables' as zIndex;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
    @use '@ontario-digital-service/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
  • Filesystem Path: fractal/components/components/headers/application-header/application-header.scss
  • Size: 4.8 KB
  • Content:
    .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
  • Filesystem Path: fractal/components/components/headers/application-header/application-header.css
  • Size: 3.5 KB

When to use this component

This header is used for applications or subsites that are not part of the main ontario.ca website.

The application header is used for an application or subsite that may have any of the following:

  • a specific application or subsite name
  • navigation or subpages
  • its own search
  • user accounts or its own login system

This header applies Ontario branding to your product while providing:

  • a clear application or subsite identity
  • a place for application or subsite-specific links or a menu, if needed

Features

The application header includes:

  • black bar with:
    • smaller version of the Ontario logo
    • language toggle
  • secondary grey application bar with:
    • application name
    • navigation links
    • site menu

Do not change the colour of the application header’s secondary bar. The dark grey (#404040) is mandatory. It has been tested for accessibility with the text and interactive state colours, and it provides a consistent experience across Government of Ontario services.

The smaller version of the Ontario logo is authorized for use only in this header.


Best practices

Do

  • limit the number of navigation links (maximum seven) and keep the labels concise
  • place application-specific menus or search in the secondary application bar to emphasize that the functions are not related to the enterprise ontario.ca website
  • link the application name in the secondary application bar to the application landing page
  • link the Ontario logo in the black bar to either the English or French ontario.ca landing page (depending on the language of the application page)
  • ensure the language toggle is inside the black bar
  • ensure the language toggle switches you to the other language of the page you’re on

Don’t

  • use the application header parts separately — that is, don’t use the modified black bar or the secondary application bar separately on its own
  • use the secondary application bar as an area for additional branding (logos, patterns, images)
  • change the secondary application bar colour
  • change the font size for the application name — if the name is long, the text will wrap automatically

Example


Diagram of the application header on desktop, showing the smaller Ontario logo, language toggle, application name, and navigation links and site menu

Example


Diagram of the application header on desktop, showing the hover, focus, active, and current page states for elements of the header.

Technical note

The application header requires the following two JavaScript files:

If you have any questions or feedback, please get in touch.