Follow the directions below to get up and running with the HealthCare.gov design asset library. Add additional styles as needed to a separate, application-specific style sheet. This will ensure you are able to easily update to future versions of the asset library.
Selecting the "Download the core assets" button below will download the files you need to get started from the master branch of the repository. If you would like to make contributions to this repository, please follow the guidelines on our contributing page.
How to get started with the assets library
Use the provided example HTML page, as well as a sample of the 12 column grid HTML, to get up and running with the required HTML. Additional files may be needed for some components. Review the UI components pages for instructions for including each component individually.
Example & Code
<html> <head> <title>Healthcare.gov Example Site</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://assets.healthcare.gov/resources/libs/jquery/1.11/js/jquery.min.js"></script> <script src="https://assets.healthcare.gov/resources/libs/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body id="hc-gov-assets"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="lite-card"> <h1>Hello World</h1> <button class="btn btn-green btn-sm">This is a button.</button> </div> </div> </div> </div> </div> </body> </html>
HealthCare.gov utilizes the Bootstrap responsive, mobile-first fluid grid system. The grid scales up to 12 columns as the device or viewport size increases. For more information on Bootstrap CSS please visit getbootstrap.com/css.
Required CSS Files
Each UI component has been tested for browser compatibility. The assets library is compatible with Firefox, Chrome, Safari, Opera, and IE 8+.
All components must meet Section 508 Level 2 (AA) compliance, however Section 508 level 3 (AAA) is preferred. All additional UI components created must also meet at least this same standard of accessibility.