You are viewing the CDN resource index for v18.2.0 of the @cmsgov/ds-healthcare-gov package. These resources are currently loaded on this page. To understand how to use these resources, check out this page's source or the code snippets in the sections below.
See also:
Place the following HTML in your head tag:
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/css/index.css" />
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/css/healthcare-theme.css" />
The fonts load automatically when you include the CSS above — no extra setup
needed. If you use your own stylesheet and only want our font files, add these
@font-face declarations, which point at the fonts hosted on this CDN:
@font-face {
font-display:swap;
font-family:Bitter;
font-style:normal;
font-weight:400;
src:url(https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/bitter-regular.woff2) format("woff2");
}@font-face {
font-display:swap;
font-family:Bitter;
font-style:normal;
font-weight:700;
src:url(https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/bitter-bold.woff2) format("woff2");
}@font-face {
font-display:swap;
font-family:Bitter;
font-style:italic;
font-weight:400;
src:url(https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/bitter-italic.woff2) format("woff2");
}@font-face {
font-display:swap;
font-family:Open Sans;
font-style:normal;
font-weight:400;
src:url(https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/opensans-regular-webfont.woff2) format("woff2");
}@font-face {
font-display:swap;
font-family:Open Sans;
font-style:italic;
font-weight:400;
src:url(https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/opensans-italic-webfont.woff2) format("woff2");
}@font-face {
font-display:swap;
font-family:Open Sans;
font-style:normal;
font-weight:600;
src:url(https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/opensans-semibold-webfont.woff2) format("woff2");
}@font-face {
font-display:swap;
font-family:Open Sans;
font-style:normal;
font-weight:700;
src:url(https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/opensans-bold-webfont.woff2) format("woff2");
}
Preload only the specific font faces you need.
Learn more about preloading at MDN.
Every font preload must also include crossorigin, or the
browser downloads the file twice. For example:
<link rel="preload" href="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/fonts/bitter-regular.woff2" as="font" type="font/woff2" crossorigin>To import all web components, place the following code at the end of your body tag:
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/all.js"></script>To import a select set of web components, place the following code at the end of your body tag and remove the script tags for the components that you do not need:
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/base.js"></script>
<!-- Remove any of the following component imports that you do not need -->
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-accordion.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-alert.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-autocomplete.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-badge.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-button.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-choice.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-date-field.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-drawer.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-dropdown.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-filter-chip.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-hint.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-icons.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-inline-error.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-label.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-modal-dialog.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-month-picker.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-pagination.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-review.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-skip-nav.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-spinner.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-step-list.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-tabs.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-text-field.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-third-party-external-link.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-tooltip.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/web-components/bundle/ds-usa-banner.js"></script>Place the following HTML in your head tag:
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/preact-components/bundle/preact.min.umd.js"></script>
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/18.2.0/preact-components/bundle/preact-components.js"></script>