Page Template: Header

Applications and Embedded apps that are under the site hierarchy must use the same header.

Must match corporate branding (look and feel)

Desktop

Header includes:

• City Logo
• Search
  • Must search toronto.ca not application content
• I want to
  
  • Must include button to I want to page url
• Main Navigation
  • Must include first level link to page url
• Breadcrumb
  • Must include: City of Toronto / {any-page-title}
  • Where possible include first level
  • "City of Toronto" links to toronto.ca

Mobile

Header Same Features as Desktop:

• City Logo
• Search
• I want to
• Main Navigation (menu button)
• Breadcrumb

Toronto Logo Only Version

• We need to define when to use the blue band without navigation.
  • for example, payment
  • external site that has own logo that will be placed below the blue band
  • has own navigation below the blue band etc
• Review existing applications. 
  • search result page should have included top navigation: https://find.toronto.ca/searchblox/servlet/SearchServlet?query=parking%20ticket&cname=www1&typeahead=on
• Set a process:  request - review - approved by DTS/DC
• Build a simple template including font style, navigation below blue band, breadcrumb, buttons etc

• The top band should only feature the City of Toronto logo, aligned left
  • Top & footer band height - 80px (mobile - 56px)
  • White Toronto logo width  - 160px (mobile - 112px)
  • Band colour is blue - #165788
• The City of Toronto logo must link back to home page ( https://www.toronto.ca/ ).
• The footer band should only include copyright details linked to the City's copyright web page. © City of Toronto 1998 – 2022 ( https://www.toronto.ca/home/copyright-information/ )
• No content should be placed above the top band.