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
Preact/React documentation for Storybook
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
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.
- Complete
Color:Â Meets AA color contrast standards for accessibility and color blindness.
- Incomplete
Forced Colors Mode (FCM):Â While using FCM the components text is legible and improves readability.
- Complete
WCAG 2.1 Level AA Conformance:Â All Axe checks for WCAG AA compliance have passed.
- Complete
Screen readers:Â VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
- Complete
Keyboard navigation:Â Component is fully navigable with a keyboard.
Accessibility
- Complete
Storybook:Â Component has stories to cover all defined props.
- Complete
Responsive:Â Component designed to work in all responsive breakpoints.
- Complete
Spanish translations:Â Includes Spanish translations for default text content.
Code
- Complete
Code:Â Tokens implemented in code.
- Complete
Design:Â Tokens implemented in the Sketch.