Utility header

The utility header puts a standard header at the very top of your site. Having a common header tells people that the website is an official product of the State of California, which increases user trust.

It includes:

The CA.gov logo, which links to https://www.ca.gov
The text “Official website of the State of California” (on desktop) or “State of California” (on mobile)
Optional utility header links

Example

Desktop

Mobile

HTML Source code

HTML


  
    
      
        
          
            CA.gov
            
          
        
        
          Official website of the
          State of California
        
      
      
        Web template v6.3.1

Usage

When and how to use it

The utility header is a required webpage structure component. Place it at the top of the website, above the department branding (site header) and all other content.

If you want to include a translation widget in the utility header, reach out through our Contact page .

How not to use it

Do not add other elements to or change the utility header. Use it only as designed.

Do not combine the utility header with department name or logo, navigation, or information. These are in the site header .

Accessibility

Standard accessibility review

Each time a new component version is published:

Test with the axe accessibility tool
Review with the VoiceOver or NVDA screen reader
Ensure all actionable elements are accessible by keyboard command and tab in a logical order
Check the component layout on a variety of screen sizes