Developer assets

The assets section of the HealthCare.gov Styleguide contains Section 508 compliant, cross-browser compatible UI components that developers can use in their development process.

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.

Download the core assets package

How to get started with the assets library

You’ll need to use the required HTML, grid system framework, JavaScript, and CSS.

HTML

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>

Grid system

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.

Javascript

JQuery-1.11.2.js
Bootstrap-3.1.1.js

CSS

Required CSS Files

css/style.css

Cross-browser compatibility

Each UI component has been tested for browser compatibility. The assets library is compatible with Firefox, Chrome, Safari, Opera, and IE 8+.

Accessibility

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.