Skip to main content

An official website of the United States government

Here's how you know

Design System

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

What's new?

View code on GitHub

Theme:

Design system switcher

Version:

Design system switcher

Healthcare.gov Header

Alert:

This component is only used for HealthCare. Please use the theme switcher to view the component with HealthCare styles.

Examples

The HealthCare.gov header component varies depending on the user's state (ie. logged-in) and context (ie. what page the user is on).

Logged-In

View interactive React examples in Storybook

Logged-Out

View interactive React examples in Storybook

Minimal

View interactive React examples in Storybook

Code

React

Preact/React documentation for Storybook

Google Analytics

Analytics event tracking is enabled by default.

On applications where the page has utag loaded, the data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.

Disabling event tracking

Import and set the setHeaderSendsAnalytics feature flag to false in your application's entry file:

import { setHeaderSendsAnalytics } from '@cmsgov/<design-system-package>';
config({ headerSendsAnalytics: false });

Component maturity

This component meets 90% of our maturity criteria.

Incomplete criteria

  • Incomplete

    Forced Colors Mode (FCM): While using FCM the components text is legible and improves readability.

What does this mean?

Each component is tested against the following items to gauge the component's maturity. When using incomplete components, consider the unmet criteria as applied to your product.

For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.

On this page

Have ideas?