Component Library

The Component Library provides standard components for the design and development of websites. Those components have been combined into common patterns and templates to ensure a consistent look and feel across your portfolio.

Library Sections

• Components are the basic building blocks of the design system.
• Patterns combine multiple components to solve common user tasks or interface needs.
• Templates arrange components and patterns into full-page layouts to address specific use cases.

Form Inputs & Controls

Build forms and provide interactive data entry

• Button

  Buttons allow users to take actions and make choices with a single click.

• Button group

  Button groups organize related actions together for easier access.

• Character count (Text input)

  Character count displays the number of characters entered in a text field.

• Checkbox

  Checkboxes allow users to select one or more options from a list.

• Combo box

  Combo boxes combine a text input with a list of selectable options.

• Date picker

  Date pickers allow users to select a date from a calendar interface.

• Date range picker

  Date range pickers let users select a start and end date.

• File input

  File inputs allow users to upload files from their device.

• Input mask

  Input masks format user input as it is entered, such as phone numbers.

• Input prefix/suffix

  Prefixes and suffixes add context to input fields, such as currency or units.

• Memorable date

  Memorable date fields help users enter dates that are easy to remember.

• Radio buttons

  Radio buttons let users select one option from a group.

• Range slider

  Range sliders let users select a value or range by sliding a handle.

• Search

  Search components help users find content quickly.

• Select dropdown

  Select menus let users choose one option from a dropdown list.

• Text input

  Text inputs let users enter single lines of text.

• Time picker

  Time pickers let users select a time from a list or clock interface.

• Validation

  Validation provides feedback to users about the correctness of their input.

Navigation & Wayfinding

Help users move through pages, sections, and processes

• Breadcrumb

  Breadcrumbs provide secondary navigation to help users understand where they are in a website.

• Header

  Headers display branding, navigation, and a search box at the top of pages.

• In-page navigation

  In-page navigation helps users jump to sections within a page.

• Link

  Links navigate users to other pages or resources.

• Pagination

  Pagination divides content into pages and lets users navigate between them.

• Side navigation

  Side navigation provides links to sections or pages in a sidebar.

Content Display & Layout

Present information, data, and content in a readable, organized way

• Accordion

  An accordion is a list of headers that hide or reveal additional content when selected.

• Card

  Cards display content and actions on a single topic in a concise format.

• Collection

  Collections display groups of related items in a structured format.

• Icon list

  Icon lists display items with associated icons for clarity.

• List

  Lists organize items vertically for easy reading.

• Process list

  Process lists show the steps in a process or workflow.

• Prose

  Prose styles text for readability and accessibility.

• Step indicator

  Step indicators show progress through a series of steps.

• Table

  Tables organize data into rows and columns for easy comparison.

• Typography

  Typography styles text for clarity, hierarchy, and accessibility.

Feedback & Messaging

Communicate status, warnings, confirmations, and contextual help

• Alert

  An alert keeps users informed of important and sometimes time-sensitive changes.

• Modal

  Modals display content in a layer above the main page, requiring user interaction.

• Site alert

  Site alerts display important messages at the top of a page.

• Summary box

  Summary boxes highlight key information for users.

• Tag

  Tags label and categorize content for quick identification.

• Tooltip

  Tooltips display brief, helpful information when users hover over an element.

Branding

Display consistent branding and agency identification

• Banner

  Banners identify official websites of government organizations in the United States.

• Header

  Headers display branding, navigation, and a search box at the top of pages.

• Footer

  Footers provide navigation and information at the bottom of pages.

• Identifier

  Identifiers display agency information and important links at the bottom of pages.

Patterns

• Establish trust

  Help users feel confident that your site is official, secure, and trustworthy.

• Keep a record

  Provide users with ways to save, print, or download records of their activity.

• Language selector

  Language selectors allow users to choose their preferred language.

• Select a language

  Help users select their language for a better experience.

Templates

• 404 page

  A template for displaying a "page not found" error to users.

• Authentication pages

  Templates for login, registration, and authentication flows.

• Complex form

  A template for multi-step or advanced forms with validation.

• Documentation page

  A template for technical documentation and guides.

• Landing page

  A template for introductory or main entry pages.