ServiceOntario header

This header is for ServiceOntario applications 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-service-header {
    	height: 3.125rem;
    	z-index: 5;
    }
    
    .ontario-service-header__logo,
    .ontario-service-header__logo a,
    .ontario-service-header__lang-toggle,
    .ontario-service-subheader__container,
    .ontario-service-subheader__menu-container,
    .ontario-service-subheader__menu {
    	display: flex;
    }
    
    .ontario-service-header__logo img {
    	width: 100px;
    	height: 25px;
    }
    
    .ontario-service-header__lang-toggle {
    	justify-content: flex-end;
    
    	a {
    		font-size: globalFunctions.rem-calc(16);
    		line-height: globalFunctions.rem-calc(22);
    		height: auto;
    		padding: spacing.$spacing-2 spacing.$spacing-3;
    	}
    }
    
    .ontario-service-subheader {
    	padding: spacing.$spacing-4 0;
    	background-color: colours.$ontario-colour-service-ontario-header-brand;
    	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-service-subheader .ontario-header-button {
    	display: flex;
    }
    
    .ontario-service-subheader .ontario-header-button {
    	background-color: colours.$ontario-colour-service-ontario-header-brand;
    
    	.ontario-icon {
    		width: 2rem;
    		height: 2rem;
    		margin-bottom: spacing.$spacing-0;
    	}
    
    	&:hover {
    		background-color: colours.$ontario-colour-service-ontario-header-hover;
    	}
    
    	&:active {
    		background-color: colours.$ontario-colour-service-ontario-header-active;
    	}
    
    	&:focus {
    		box-shadow: 0 0 0 4px colours.$ontario-colour-service-ontario-header-focus;
    	}
    }
    
    .ontario-service-subheader__link {
    	text-decoration: none;
    }
    
    .ontario-service-subheader__heading-container {
    	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;
    		}
    
    		&:focus {
    			box-shadow: 0 0 0 4px colours.$ontario-colour-service-ontario-header-focus;
    		}
    	}
    }
    
    .ontario-service-subheader__heading {
    	@extend %h3-styles;
    	font-weight: fontWeights.$ontario-font-weights-semi-bold;
    	padding: spacing.$spacing-0 spacing.$spacing-0 math.div(spacing.$spacing-1, 2) spacing.$spacing-0;
    	margin-bottom: spacing.$spacing-0;
    	text-decoration: none;
    }
    
    .ontario-service-subheader__description {
    	padding: math.div(spacing.$spacing-1, 2) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;
    	@extend %h5-styles;
    	margin-bottom: spacing.$spacing-0;
    	color: colours.$ontario-colour-white;
    	font-weight: fontWeights.$ontario-font-weights-semi-bold;
    	text-decoration: none;
    }
    
    .ontario-service-subheader__container {
    	align-items: center;
    	justify-content: space-between;
    }
    
    .ontario-service-subheader__menu {
    	list-style: none;
    	margin: spacing.$spacing-0;
    	padding-left: spacing.$spacing-0;
    	align-items: center;
    }
    
    .ontario-service-subheader__menu li {
    	padding: spacing.$spacing-0;
    	margin-left: spacing.$spacing-4;
    }
    
    .ontario-service-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.rem-calc(18);
    	font-weight: fontWeights.$ontario-font-weights-semi-bold;
    	height: globalVariables.$standard-input-height;
    	line-height: globalFunctions.rem-calc(23);
    	padding: spacing.$spacing-3;
    	text-decoration: none;
    	white-space: nowrap;
    
    	&.ontario-link--active {
    		border-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;
    		border-bottom: globalFunctions.rem-calc(4) solid colours.$ontario-colour-white;
    	}
    
    	&:hover {
    		color: colours.$ontario-colour-white;
    		background-color: colours.$ontario-colour-service-ontario-header-hover;
    	}
    
    	&:active {
    		color: colours.$ontario-colour-white;
    		background-color: colours.$ontario-colour-service-ontario-header-active;
    	}
    
    	&:focus {
    		box-shadow: 0 0 0 4px colours.$ontario-colour-service-ontario-header-focus;
    	}
    }
    
    .ontario-overlay {
    	display: none;
    	position: fixed;
    	top: 0;
    	left: 0;
    	background: rgba(colours.$ontario-colour-black, 0.6);
    	width: 100%;
    	height: 100%;
    	z-index: zIndex.$ontario-z-index-above-medium;
    }
    
    .ontario-navigation--open {
    	.ontario-service-subheader .ontario-header-button:first-of-type {
    		display: none;
    	}
    
    	.ontario-service-subheader .ontario-header-button:last-of-type {
    		display: flex;
    	}
    
    	@media screen and (max-width: breakpoints.$medium-breakpoint) {
    		.ontario-service-subheader-menu__container {
    			position: relative;
    			z-index: 3;
    		}
    	}
    
    	.ontario-overlay {
    		display: block;
    
    		@media screen and (min-width: breakpoints.$medium-breakpoint) {
    			display: none;
    		}
    	}
    }
    
    .ontario-colour-service-ontario-header-brand {
    	background-color: colours.$ontario-colour-service-ontario-header-brand;
    }
    
    .ontario-colour-service-ontario-header-focus {
    	background-color: colours.$ontario-colour-service-ontario-header-focus;
    }
    
    .ontario-colour-service-ontario-header-hover {
    	background-color: colours.$ontario-colour-service-ontario-header-hover;
    }
    
    .ontario-colour-service-ontario-header-active {
    	background-color: colours.$ontario-colour-service-ontario-header-active;
    }
    
  • URL: /components/raw/service-ontario-header/service-ontario-header.scss
  • Filesystem Path: fractal/components/components/headers/service-ontario-header/service-ontario-header.scss
  • Size: 6.2 KB
  • Content:
    .ontario-service-subheader__description,.ontario-service-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-service-subheader__heading{font-size:1.4375rem;letter-spacing:.02rem;line-height:1.39;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-service-subheader__heading{font-size:1.75rem;letter-spacing:.02rem;line-height:1.43}}.ontario-service-subheader__description{font-size:1.125rem;letter-spacing:.03rem;line-height:1.56;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-service-subheader__description{font-size:1.1875rem;letter-spacing:.025rem;line-height:1.5}}.ontario-header.ontario-service-header{height:3.125rem;z-index:5}.ontario-service-header__logo,.ontario-service-header__logo a,.ontario-service-header__lang-toggle,.ontario-service-subheader__container,.ontario-service-subheader__menu-container,.ontario-service-subheader__menu{display:flex}.ontario-service-header__logo img{width:100px;height:25px}.ontario-service-header__lang-toggle{justify-content:flex-end}.ontario-service-header__lang-toggle a{font-size:1rem;line-height:1.375rem;height:auto;padding:.5rem .75rem}.ontario-service-subheader{padding:1rem 0;background-color:#03713d;overflow:hidden;position:relative;z-index:5}@media screen and (min-width: 73em){.ontario-service-subheader{z-index:0}}.ontario-service-subheader>.ontario-row{position:relative}.ontario-service-subheader .ontario-header-button{display:flex}.ontario-service-subheader .ontario-header-button{background-color:#03713d}.ontario-service-subheader .ontario-header-button .ontario-icon{width:2rem;height:2rem;margin-bottom:0}.ontario-service-subheader .ontario-header-button:hover{background-color:#048b4b}.ontario-service-subheader .ontario-header-button:active{background-color:#024122}.ontario-service-subheader .ontario-header-button:focus{box-shadow:0 0 0 4px #42c7ff}.ontario-service-subheader__link{text-decoration:none}a .ontario-service-subheader__heading-container{color:#fff;font-weight:600;text-decoration:none}a .ontario-service-subheader__heading-container:hover,a .ontario-service-subheader__heading-container:active,a .ontario-service-subheader__heading-container:visited{color:#fff;text-decoration:underline}a .ontario-service-subheader__heading-container:focus{box-shadow:0 0 0 4px #42c7ff}.ontario-service-subheader__heading{font-weight:600;padding:0 0 .125rem 0;margin-bottom:0;text-decoration:none}.ontario-service-subheader__description{padding:.125rem 0 .25rem 0;margin-bottom:0;color:#fff;font-weight:600;text-decoration:none}.ontario-service-subheader__container{align-items:center;justify-content:space-between}.ontario-service-subheader__menu{list-style:none;margin:0;padding-left:0;align-items:center}.ontario-service-subheader__menu li{padding:0;margin-left:1rem}.ontario-service-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-service-subheader__menu a.ontario-link--active{border-radius:4px 4px 0 0;border-bottom:.25rem solid #fff}.ontario-service-subheader__menu a:hover{color:#fff;background-color:#048b4b}.ontario-service-subheader__menu a:active{color:#fff;background-color:#024122}.ontario-service-subheader__menu a:focus{box-shadow:0 0 0 4px #42c7ff}.ontario-overlay{display:none;position:fixed;top:0;left:0;background:rgba(26,26,26,.6);width:100%;height:100%;z-index:2}.ontario-navigation--open .ontario-service-subheader .ontario-header-button:first-of-type{display:none}.ontario-navigation--open .ontario-service-subheader .ontario-header-button:last-of-type{display:flex}@media screen and (max-width: 73em){.ontario-navigation--open .ontario-service-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}}.ontario-colour-service-ontario-header-brand{background-color:#03713d}.ontario-colour-service-ontario-header-focus{background-color:#42c7ff}.ontario-colour-service-ontario-header-hover{background-color:#048b4b}.ontario-colour-service-ontario-header-active{background-color:#024122}
  • URL: /components/raw/service-ontario-header/service-ontario-header.css
  • Filesystem Path: fractal/components/components/headers/service-ontario-header/service-ontario-header.css
  • Size: 4.5 KB

When to use this component

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

An application may have any of the following elements as part of its header:

  • an application name
  • navigation or subpages
  • its own search
  • a user account or its own login system

Features

The ServiceOntario header is a variation of the standard Application header. It includes:

  • black bar with:

    • smaller version of the Ontario logo
    • language toggle
  • secondary application bar with:

    • ServiceOntario green brand colour (#03713D)
    • ServiceOntario name
    • application name
    • navigation links (if needed)
    • site menu (if needed)
    • modified hover and active state colours that have sufficient contrast on the green background

The use of the green brand colour for the secondary application bar is a unique exception to support the official, established ServiceOntario brand. Other services must use the standard Application header as designed and must not change the colour of the secondary application bar.


Component-specific colours

Colour Colour name Hex code SCSS variable
ServiceOntario brand green #03713D $ontario-colour-service-ontario-header-brand
ServiceOntario focus #42C7FF $ontario-colour-service-ontario-header-focus
ServiceOntario hover #048B4B $ontario-colour-service-ontario-header-hover
ServiceOntario active #024122 $ontario-colour-service-ontario-header-active

Best practices

Follow the best practices described in the Application header guidance.


Technical note

The ServiceOntario header requires the following two JavaScript files:

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