This component is only used for HealthCare. Please use the theme switcher to view the component with HealthCare styles.
In keeping with our theme of trust, the HealthCare.gov identity marker establishes a universal signature across all HealthCare.gov communications. We treat the marker the same across all media. See the rules to follow when using the HealthCare.gov identity marker below.
The Health Insurance Marketplace, the authenticated application where consumers buy insurance, uses a separate and distinct logo. This logo appears in the HealthCare.gov footer.
To ensure that our identity marker is clearly discernable, it requires space as shown below, free of type, graphics, and other elements that might cause visual clutter. There is also a Spanish version of the marker.
Examples
English
Spanish
Variations
There are two variations of the HealthCare.gov identity marker that should be used sparingly. The first is a white logo against black. The second is a gray version. Both are intended to be used as "tags" in areas such as a footer where subtle use of the mark is appropriate.
White logo on black
Grey logo
Favicon
A dark blue HealthCare.gov favicon appears on all HealthCare.gov web pages.
Code
React
See Storybook for React guidance of this component.
Style customization
Customize the colors of the logo using CSS.
Available classes:
.hc-c-logo__health
.hc-c-logo__care
.hc-c-logo__gov
Guidance
Usage
- The HealthCare.gov identity marker should only be used against a white background. It shouldn’t be placed against any other background color or modified in any way.
Incorrect usage
Style | Example |
---|---|
Color background | |
Photographic background | |
White against color | |
Drop shadow | |
Other colors | |
Outlined | |
Squeezed |
Component maturity
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.