Skip to main content

Important Disclaimer:
This is an open source template project and is not an official project of the United States Government. This was created as a weekend project to help developers build federally compliant websites more easily.

About this template:
This template helps developers create websites that follow the U.S. Web Design System (USWDS) standards. It provides a starting point for building accessible, mobile-friendly government websites. The template is released under the CC0 license, making it free to use, modify, and distribute.

View on GitHub: https://github.com/williamzujkowski/uswds-11ty-template

Components

Browse all available U.S. Web Design System components with live examples and code snippets.

USWDS Components

This page demonstrates all major USWDS components available in this template. Each example includes the code you need to implement it in your own pages.

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<!-- etc. -->

Lead Paragraph

This is a lead paragraph. It's larger than regular body text and is typically used for introductions or key messages.

<p class="usa-intro">Lead paragraph text...</p>

Body Text

Regular paragraph text appears like this. It uses the Public Sans font family and is optimized for readability.

Bold text and italic text are styled consistently throughout the system.

Buttons

Default Buttons 

<button class="usa-button">Default</button>
<button class="usa-button usa-button--secondary">Secondary</button>
<button class="usa-button usa-button--accent-cool">Accent Cool</button>

Outline Buttons 

<button class="usa-button usa-button--outline">Outline</button>

Button Sizes 

<button class="usa-button usa-button--big">Big Button</button>

Alerts

Information Alert

Informational Status

This alert provides helpful information or context.

Success Alert

Success Status

This alert confirms a successful action or positive outcome.

Warning Alert

Warning Status

This alert warns about a potential issue.

Error Alert

Error Status

This alert indicates an error or problem.

<div class="usa-alert usa-alert--info">
  <div class="usa-alert__body">
    <h4 class="usa-alert__heading">Alert Heading</h4>
    <p class="usa-alert__text">Alert message text.</p>
  </div>
</div>

Cards

Basic Card

Card Heading

Card body content goes here. Cards are great for organizing related information.

<div class="usa-card">
  <div class="usa-card__container">
    <div class="usa-card__header">
      <h3 class="usa-card__heading">Card Heading</h3>
    </div>
    <div class="usa-card__body">
      <p>Card content...</p>
    </div>
    <div class="usa-card__footer">
      <button class="usa-button">Action</button>
    </div>
  </div>
</div>

Forms

Text Input 


<label class="usa-label" for="input-text">Text input label</label>
<input class="usa-input" id="input-text" name="input-text" type="text">

Select Dropdown

Tables

Basic Table

Sample data table
Name Department Email Phone
Jane Smith Administration jane.smith@agency.gov 555-0100
John Doe Operations john.doe@agency.gov 555-0101
Sarah Johnson Communications sarah.johnson@agency.gov 555-0102 
<table class="usa-table">
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row header</th>
      <td>Data cell</td>
    </tr>
  </tbody>
</table>

Accordion

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

Lists

Icon List

  • Completed item

    This item has been completed successfully.

  • Cancelled item

    This item has been cancelled or rejected.

Process List

  1. Start your application

    Fill out the online form with your basic information.

  2. Submit documentation

    Upload required documents to support your application.

  3. Review and approval

    We'll review your application and notify you of our decision.

Summary Box

Key Information

This summary box highlights important information that users should pay attention to. It's useful for:

  • Key takeaways
  • Important dates or deadlines
  • Quick reference information

Tags

Default Big Tag Accent Warm Accent Cool Error Success 
<span class="usa-tag">Default</span>
<span class="usa-tag usa-tag--big">Big Tag</span>

Step Indicator

  1. Personal information
  2. Household information
  3. Supporting documents
  4. Review and submit

2 of 4 Household information

Grid System

The USWDS uses a 12-column grid system with responsive breakpoints:

.tablet:grid-col-4
.tablet:grid-col-4
.tablet:grid-col-4 
<div class="grid-row grid-gap">
  <div class="tablet:grid-col-4">Column 1</div>
  <div class="tablet:grid-col-4">Column 2</div>
  <div class="tablet:grid-col-4">Column 3</div>
</div>

Utility Classes

USWDS includes many utility classes for spacing, colors, and more:

Spacing

  • margin-top-2 - Adds top margin
  • padding-3 - Adds padding on all sides
  • margin-x-auto - Centers horizontally

Colors

  • text-primary - Primary text color
  • bg-base-lightest - Light background
  • border-error - Error border color

Display

  • display-none - Hides element
  • display-block - Block display
  • flex-justify-center - Centers flex items

More Resources

Note: This page shows a subset of available components. Visit the official USWDS documentation for the complete component library.