Site header

The site header puts your site's name at the top of your website, under the utility header. This allows people to readily identify the site they're visiting. If they interact with the site's name, it returns them to the site's homepage.

The site name or branding must be in the header. It includes “State of California” to identify its association with the state. When selected, it returns people to the site's homepage. It must include at least one of these options:

  • Site name: This is usually the department or agency name.
  • Logo: An image of the department or agency logo.

A search box displays on the right side of the header and allows visitors to search the site. While this appears in the header, it is a separate structural element and is optional. Review Search for more information.



When and how to use it

The site header goes on all pages of your website.

If you use a logo in your site header, make sure that any text in it is legible. You may need to create a web optimized version of your logo for legibility. We recommend separating the visual elements of the logo from the text and adding the text next to the logo.

How not to use it

Do not modify the site header beyond adding the site name and a logo.

Do not use a logo with small, illegible text. Avoid using logos or state seals that are not optimized for web display.


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