Skip to content

The Beta Design System is no longer being updated.

It remains online for reference only. Maintenance, bug fixes, and security updates will continue through July 1, 2026 and are tracked in the Beta GitHub repository.

For active development, head over to California's next design system in our new GitHub repository.

Statewide header

Readme Changelog

Development stage

1
In research
2
Alpha
3
Beta
4
Production

Alpha components have not been thoroughly tested by developers. Learn more about component maturity.

2.0.1

  • Removed redundant package-lock.json (due to workspaces config in monorepo). This fixes vulnerability in the npm ip package.

2.0.0

  • Moved built CSS to dist folder.

1.0.15

  • Updated color variables to go inline with new CEILAB color palette.

1.0.14

  • Moved screen reader announcement to CA.gov SVG.

1.0.13

  • Changed CA.gov logo dimensions to 33px by 24px to make it consistent with statewide-footer's icon.

1.0.12

  • Made CA.gov logo linked to CA.gov website.
  • Added aria-hidden=”true” attribute to the CA.gov svg icon, so it is hidden from assistive technologies.

1.0.11

  • Linted and formatted code per root eslint/prettier settings.
  • Added unit test.

1.0.10

  • Updated statewide header container's left and right padding to 16px.

1.0.9

  • Removed sticky header feature until it's fully developed. Decrease spacing between CA.gov icon and tagline to 8px.

1.0.8

  • Added script and styles that toggles official header display on scroll.

1.0.7

  • Making sure that CA.gov logo have CA.gov colors, not the colors of the department/agency. And removed link form CA.gov logo because people might click the CA.gov logo thinking they are going to the homepage

1.0.6

  • Renamed .ofiicial-logo to .official-logo. Should help prevent naming conflicts within existing markup.

1.0.5

  • Removed -15px padding left from the .official-header selector since we we do not need that padding anymore because we removed header-container with its padding properties from the base css.