| title | intro | core | healthcare | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
Healthcare.gov Logo |
Renders the HealthCare.gov logo in English (default) or Spanish. |
|
|
import { Alert } from '@cmsgov/design-system'; import { CloseIconThin, SvgIcon } from '@cmsgov/design-system'; import colorBackground from '../../../src/images/HCgov-logo/4_ColorBackground.png'; import photoBackground from '../../../src/images/HCgov-logo/5_PhotoBackground.png'; import reversed from '../../../src/images/HCgov-logo/6_Reversed.png'; import dropshadow from '../../../src/images/HCgov-logo/7_Dropshadow.png'; import differentColors from '../../../src/images/HCgov-logo/8_DifferentColors.png'; import outlined from '../../../src/images/HCgov-logo/9_Outlined.png'; import squeezed from '../../../src/images/HCgov-logo/10_Squeezed.png'; import hcgovFavicon from '../../../src/images/HCgov-logo/favicon.ico'; import blackLogoTag from '../../../src/images/HCgov-logo/BlackLogoTag.png'; import greyLogoTag from '../../../src/images/HCgov-logo/GreyLogoTag.png';
<ThemeContent neverThemes={['healthcare']}>
{ '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.
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.
A dark blue HealthCare.gov favicon appears on all HealthCare.gov web pages.
<SeeStorybookForGuidance storyId={'healthcare-logo--docs'} />
Customize the colors of the logo using CSS.
Available classes:
.hc-c-logo__health.hc-c-logo__care.hc-c-logo__gov
- 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.
| Style | Example |
|---|---|
| Color background | |
| Photographic background | |
| White against color | |
| Drop shadow | |
| Other colors | |
| Outlined | |
| Squeezed |