Components

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

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

Banners indicate official websites of U.S. government organizations. They also help visitors determine if a website is legitimate and secure.

Breadcrumbs offer secondary navigation that helps users understand their location within a website.

Body Text is the main content area of a webpage, which can be formatted into 1, 2, 3, or 4 columns.

A button highlights important actions with a prominent, clickable surface and is often used as a call to action.

A button group organizes similar or related actions together

A "By the Numbers" component displays a few blocks with large numbers and brief descriptions beneath them, highlighting important statistics or data.

The Calendar component provides a visual representation of dates and events, allowing users to easily navigate and view scheduled activities.

Cards present content and actions related to a single topic, and they come in a wide variety of configurations.

A carousel component lets users cycle through a series of images, cards or content panels, using navigation controls. It's ideal for showcasing multiple items in a compact space.

Checkboxes let users select one or more options from a list. 

Radio buttons let users select exactly one option from a group.

Character count informs users of the remaining number of characters they can enter when a limit is set.

A combo box allows users to select an item from a large list of options.

The CTA component is a card featuring a button that prompts users to take a specific action.

A date picker allows users to choose a specific date.

A date range picker enables users to select a period between two dates.

File input enables users to upload one or multiple files.

The Files List component displays a list of uploaded files, allowing users to view and manage attachments.

A footer assists site visitors who reach the bottom of a page without finding what they need.

A form enables users to input information on a page.

Use our flexible grid system to structure website content. The grid is based on a 12-column system and designed for desktop, tablet, and mobile devices.

A Hero Banner prominently displays key content on a website’s homepage, drawing users' attention to important information or features.

An icon list enhances the meaning and visibility of each list item by including a leading icon.

The placement, interface, and behavior of the language selection component enable users to easily find and access content in their preferred language.

A link directs users to another page or additional information.

A list organizes information into discrete sequential sections.

The easiest way for users to enter most dates is by using a month dropdown followed by two text fields.

A modal disables the page content and directs the user's focus to a single task or message.

Hierarchical, vertical navigation designed to be placed along the side of a page.

Pagination provides navigation for content that is divided into multiple pages.

A process list outlines the steps or stages of important instructions or procedures.

Format a block of continuous text.

The Pull Quote component highlights a significant quote or excerpt from the content, drawing attention to key information or impactful statements.

A range slider lets users select an approximate value within a specified range.

Search enables users to find specific content by entering search terms, particularly if they can't locate the desired content through the main navigation.

A summary box highlights key information from a longer page or outlines the next steps.

The Switch component allows users to toggle between two states, such as on/off or enable/disable, providing a clear and interactive way to change settings.

A Tab component organizes content into separate sections, allowing users to switch between them by clicking on tab labels.

A table displays information in rows and columns.

A tag highlights new or categorized content elements.

The Testimonial component showcases quotes or feedback from satisfied users, providing credibility and social proof.

Text fields enable users to enter combinations of letters, numbers, or symbols. These input boxes can be single-line or multi-line.

A time picker allows users to choose a specific time.

A tooltip is a brief descriptive message that appears when a user hovers over or focuses on an element.

Government websites require clear and consistent headings, highly legible body paragraphs, precise labels, and user-friendly input fields. Our default typefaces are designed for readability and can adapt to various visual styles.

Presenting validation requirements upfront and providing live feedback ensures users are not left guessing.