Components
Accordion
(accordion)
An accordion is a list of headers that hide or reveal additional content when selected.
Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.
Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.
Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.
Mollis pretium lorem primis senectus habitasse lectus scelerisque donec, ultricies tortor suspendisse adipiscing fusce morbi volutpat pellentesque, consectetur mi risus molestie curae malesuada cum. Dignissim lacus convallis massa mauris enim ad mattis magnis senectus montes, mollis taciti phasellus accumsan bibendum semper blandit suspendisse faucibus nibh est, metus lobortis morbi cras magna vivamus per risus fermentum.
(Accordion item)
(accordion_item)
Internal: to be used in the 'Accordion' component.
Alert
(alert)
An alert keeps users informed of important and sometimes time-sensitive changes.
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Banner
(banner)
Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.
Official websites use .gov
A <strong>.gov</strong> website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS
A <strong>lock</strong> (
) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
Button
(button)
A button draws attention to important actions with a large selectable surface.
Button Group
(button_group)
A button group collects similar or related actions.
Close button
(close_button)
A generic close button for dismissing content like modals and alerts.
Card
(card)
Cards contain content and actions about a single subject.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Card Layout
(card_layout)
Cards contain content and actions about a single subject.
-
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Collection
(collection)
A collection displays a compact list of multiple related items like articles or events. The list links each item to its original source.
-
Gears of Government President’s Award winners
Today, the Administration announces the winners of the Gears of Government President’s Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.
Collection Item
(collection_item)
Internal: to be used in the 'Collection' component.
Gears of Government President’s Award winners
Today, the Administration announces the winners of the Gears of Government President’s Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.
Combo box
(combo_box)
A combo box helps users select an item from a large list of options.
Date Picker
(date_picker)
A date picker helps users select a single date.
mm/dd/yyyy
Range Slider
(range_slider)
A range slider allows users to choose an approximate number from a range.
Time Picker
(time_picker)
A time picker helps users select a specific time.
mm/dd/yyyy
Language Selector
(language_selector)
The consistent placement, interface, and behavior of the language selection component allows users to easily find and access content in the language the user is most comfortable in.
Footer
(footer)
A footer serves site visitors who arrive at the bottom of a page without finding what they want.
(Graphic list item)
(graphic_list_item)
An variation of 'media block' component. To be used with 'Graphic list' component. Not found in the upstream documentation, but found in the USWDS examples.
Graphic headings can vary.
Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.
Grid Row
(grid_row)
Use our flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Featured
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Header
(header)
Helps users identify where they are and provides a quick, organized way to reach the main sections of a website.
Hero
(hero)
A big eye-catching image with info, usually in the above-the-fold zone of the page right below the header.
Hero callout: Bring attention to a project priority
Support the callout with some short explanatory text. You don’t need more than a couple of sentences.
Call to action
Logo
(logo)
Site logo.
My site name
My site slogan
Media block
(media_block)
Not found in the upstream documentation, but found in the USWDS examples.
Graphic headings can vary.
Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.
Section
(section)
Not found in the upstream documentation, but found in the USWDS examples.
Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.
Call to actionEverything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.
Call to actionEverything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use an active verb on the button below. “Get in touch,” “Learn more,” and so on.
Call to action
Icon List
(icon_list)
An icon list reinforces the meaning and visibility of individual list items with a leading icon.
Icon List Item
(icon_list_item)
Internal: Meant to be used by 'Icon List' pattern.
Process List
(process_list)
A process list displays the steps or stages of important instructions or processes.
-
Start a process
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Proceed to the second step
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
-
Complete the step-by-step process
Process List Item
(process_list_item)
Internal: Meant to be used by 'Process List' pattern.
Step Indicator
(step_indicator)
A step indicator updates users on their progress through a multi-step process.
- First Completed
- Second Completed
- Third Completed
- Fourth Not completed
- Fifth Not completed
Step 3 of 5 Support documents
- First Completed
- Second Completed
- Third Completed
- Fourth Not completed
- Fifth Not completed
Step 3 of 5 Support documents
- First Completed
- Second Completed
- Third Completed
- Fourth Not completed
- Fifth Not completed
Step 3 of 5 Support documents
- First Completed
- Second Completed
- Third Completed
- Fourth Not completed
- Fifth Not completed
Step 3 of 5 Support documents
- First Completed
- Second Completed
- Third Completed
- Fourth Not completed
- Fifth Not completed
Step 3 of 5 Support documents
Breadcrumb
(breadcrumb)
Breadcrumbs provide secondary navigation to help users understand where they are in a website.
In page navigation
(in_page_nav)
The in-page navigation allows navigation to specific sections on a lengthy content page.
Navigation
(nav)
Hierarchical, horizontal navigation to place. To be used inside a header component.
Pagination
(pagination)
Pagination is navigation for paginated content.
Side Navigation
(side_navigation)
Hierarchical, vertical navigation to place at the side of a page.
Icon
(icon)
Icons help communicate meaning, actions, status, or feedback.
Table
(table)
A table shows information in columns and rows.
| Table head A | Table head B | Table head C | Table head D | Table head E | Table head F | Table head G | Table head H |
|---|---|---|---|---|---|---|---|
| Cell A1 | Cell A2 | Cell A3 | Cell A4 | Cell A5 | Cell A6 | Cell A7 | Cell A8 |
| Cell B1 | Cell B2 | Cell B3 | Cell B4 | Cell B5 | Cell B6 | Cell B7 | Cell B8 |
| Cell C1 | Cell C2 | Cell C3 | Cell C4 | Cell C5 | Cell C6 | Cell C7 | Cell C8 |
| Cell D1 | Cell D2 | Cell D3 | Cell D4 | Cell D5 | Cell D6 | Cell D7 | Cell D8 |
| Footer | Footer | Footer | Footer | Footer | Footer | Footer | Footer |
Tag
(tag)
A tag draws attention to new or categorized content elements.
Tooltip
(tooltip)
Search
(search)
Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation.
Social link
(social_link)
A single uswds social link.
Social Links Group
(social_links_group)
Collection of social links.
Summary box
(summary_box)
A summary box highlights key information from a longer page or displays next steps.
Key information
Lorem ipsum dolor sit amet consectetur adipiscing elit vestibulum, feugiat sollicitudin nunc facilisis hendrerit nascetur a odio, mauris litora imperdiet dictumst purus leo suscipit.