USWDS: The United States Web Design System | U.S. Web Design System (USWDS)

<!DOCTYPE html>  <html lang="en"> <head>    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HBYXWFP794"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-HBYXWFP794'); </script>  <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-48605964-43', 'gsa.gov'); ga('send', 'pageview'); // anonymize user IPs (chops off the last IP triplet) ga('set', 'anonymizeIp', true); // forces SSL even if the page were somehow loaded over http:// ga('set', 'forceSSL', true); ga('send', 'pageview'); </script> <script async src='https://www.google-analytics.com/analytics.js'></script>  <script async type="text/javascript" id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA&subagency=TTS"></script>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>USWDS: The United States Web Design System | U.S. Web Design System (USWDS)</title> <meta name="generator" content="Jekyll v4.3.4" /> <meta property="og:title" content="USWDS: The United States Web Design System" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="USWDS makes it easier to build accessible, mobile-friendly government websites." /> <meta property="og:description" content="USWDS makes it easier to build accessible, mobile-friendly government websites." /> <link rel="canonical" href="https://designsystem.digital.gov/" /> <meta property="og:url" content="https://designsystem.digital.gov/" /> <meta property="og:site_name" content="U.S. Web Design System (USWDS)" /> <meta property="og:image" content="https://designsystem.digital.gov/img/uswds-logo/lg-black.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://designsystem.digital.gov/img/uswds-logo/lg-black.png" /> <meta property="twitter:title" content="USWDS: The United States Web Design System" /> <meta name="twitter:site" content="@USWDS" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","description":"USWDS makes it easier to build accessible, mobile-friendly government websites.","headline":"USWDS: The United States Web Design System","image":"https://designsystem.digital.gov/img/uswds-logo/lg-black.png","name":"U.S. Web Design System (USWDS)","url":"https://designsystem.digital.gov/"}</script>    <link rel="shortcut icon" type="image/ico" href="/assets/img/favicons/favicon.ico"> <link rel="icon" type="image/png" href="/assets/img/favicons/favicon.png">  <link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicons/favicon-192.png">  <link rel="apple-touch-icon-precomposed" href="/assets/img/favicons/favicon-57.png">  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/img/favicons/favicon-72.png">  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/img/favicons/favicon-114.png">  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/img/favicons/favicon-144.png">   <link rel="stylesheet" href="/assets/css/styles.css">  <script src="/assets/js/vendor/uswds-init.min.js"></script> <link rel="preload" href="/assets/js/vendor/uswds.min.js" as="script"> </head> <body class="page-uswds-the-united-states-web-design-system layout-landing page-home"> <a class="usa-skipnav" href="#main-content">Skip to main content</a> <section class="usa-banner site-banner" aria-label="Official website of the United States government,,,,,," > <div class="usa-accordion"> <header class="usa-banner__header"> <div class="usa-banner__inner"> <div class="grid-col-auto"> <img aria-hidden="true" class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="" /> </div> <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true"> <p class="usa-banner__header-text"> An official website of the United States government </p> <p class="usa-banner__header-action">Here鈥檚 how you know</p> </div> <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner" > <span class="usa-banner__button-text">Here鈥檚 how you know</span> </button> </div> </header> <div class="usa-banner__content usa-accordion__content" id="gov-banner" > <div class="grid-row grid-gap-lg"> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States. </p> </div> </div> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> ( <span class="icon-lock" ><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false" > <title id="banner-lock-title">Lock</title> <desc id="banner-lock-description">Locked padlock icon</desc> <path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" /> </svg> </span >) or <strong>https://</strong> means you鈥檝e safely connected to the .gov website. Share sensitive information only on official, secure websites. </p> </div> </div> </div> </div> </div> </section> <header class="usa-header usa-header--extended site-header site-header--dark" role="banner"> <div class="usa-navbar site-header__navbar"> <div class="usa-logo site-logo" id="logo"> <em class="usa-logo__text site-logo__text"> <a href="/" title="U.S. Web Design System (USWDS) Home"> <span aria-hidden="true" class="site-title--short">USWDS</span> <span class="site-title--long">U.S. Web Design System (USWDS)</span> </a> </em> </div> <button type="button" class="usa-menu-btn">Menu</button> </div> </header> <nav aria-label="Primary navigation" class="usa-nav site-nav sticky"> <div class="usa-nav__inner site-nav__inner"> <button type="button" class="usa-nav__close"> <img src="/assets/img/usa-icons/close.svg" role="img" alt="Close"> </button>  <ul class="usa-nav__primary usa-nav__primary--mobile usa-accordion"> <li class="usa-nav__primary-item"> <button type="button" class="usa-accordion__button usa-nav__link" aria-controls="nav-how-to-use-uswds" aria-expanded="false" > <span> How to use USWDS </span> </button> <ul id="nav-how-to-use-uswds" class="usa-nav__submenu"> <li class="usa-nav__submenu-item"> <a href="/how-to-use-uswds/"> <span> How to use USWDS </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/getting-started-for-developers/"> <span> Getting started for developers </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/getting-started-for-designers/"> <span> Getting started for designers </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/developers/"> <span> Documentation </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/settings/"> <span> Settings </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/maturity-model/"> <span> USWDS maturity model </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/accessibility/"> <span> Accessibility </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/performance/"> <span> Performance guidelines </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/code-guidelines/"> <span> Code guidelines </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/migration/"> <span> Migrating to USWDS 3.0 </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/migration-v2/"> <span> Migrating to USWDS 2.0 </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/implementations/"> <span> Implementations </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/showcase/"> <span> Showcase </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/documentation/sample-contract-language/"> <span> Sample contract language for 21st Century IDEA </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/website-standards/"> <span> Website standards </span> </a> </li> </ul> </li> <li class="usa-nav__primary-item"> <a href="/design-principles/"> <span> Design principles </span> </a> </li> <li class="usa-nav__primary-item"> <button type="button" class="usa-accordion__button usa-nav__link" aria-controls="nav-components" aria-expanded="false" > <span> Components </span> </button> <ul id="nav-components" class="usa-nav__submenu"> <li class="usa-nav__submenu-item"> <a href="/components/"> <span> Components </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/accordion/"> <span> Accordion </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/alert/"> <span> Alert </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/banner/"> <span> Banner </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/breadcrumb/"> <span> Breadcrumb </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/button/"> <span> Button </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/button-group/"> <span> Button group </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/card/"> <span> Card </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/character-count/"> <span> Character count </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/checkbox/"> <span> Checkbox </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/collection/"> <span> Collection </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/combo-box/"> <span> Combo box </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/data-visualizations/"> <span> Data visualizations </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/date-picker/"> <span> Date picker </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/date-range-picker/"> <span> Date range picker </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/file-input/"> <span> File input </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/footer/"> <span> Footer </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/form/"> <span> Form </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/layout-grid/"> <span> Grid </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/header/"> <span> Header </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/icon/"> <span> Icon </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/icon-list/"> <span> Icon list </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/identifier/"> <span> Identifier </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/in-page-navigation/"> <span> In-page navigation </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/input-mask/"> <span> Input mask </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/input-prefix-suffix/"> <span> Input prefix or suffix </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/language-selector/"> <span> Language selector </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/link/"> <span> Link </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/list/"> <span> List </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/memorable-date/"> <span> Memorable date </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/modal/"> <span> Modal </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/pagination/"> <span> Pagination </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/process-list/"> <span> Process list </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/prose/"> <span> Prose </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/radio-buttons/"> <span> Radio buttons </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/range-slider/"> <span> Range slider </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/search/"> <span> Search </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/select/"> <span> Select </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/side-navigation/"> <span> Side navigation </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/site-alert/"> <span> Site alert </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/step-indicator/"> <span> Step indicator </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/summary-box/"> <span> Summary box </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/table/"> <span> Table </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/tag/"> <span> Tag </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/text-input/"> <span> Text input </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/time-picker/"> <span> Time picker </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/tooltip/"> <span> Tooltip </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/typography/"> <span> Typography </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/validation/"> <span> Validation </span> </a> </li> </ul> </li> <li class="usa-nav__primary-item"> <button type="button" class="usa-accordion__button usa-nav__link" aria-controls="nav-patterns" aria-expanded="false" > <span> Patterns </span> </button> <ul id="nav-patterns" class="usa-nav__submenu"> <li class="usa-nav__submenu-item"> <a href="/patterns/"> <span> Patterns </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/patterns/intro/"> <span> Introducing patterns </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/patterns/create-a-user-profile/"> <span> Create a user profile </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/patterns/complete-a-complex-form/"> <span> Complete a complex form </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/patterns/select-a-language/"> <span> Select a language </span> </a> </li> </ul> </li> <li class="usa-nav__primary-item"> <button type="button" class="usa-accordion__button usa-nav__link" aria-controls="nav-design-tokens" aria-expanded="false" > <span> Design tokens </span> </button> <ul id="nav-design-tokens" class="usa-nav__submenu"> <li class="usa-nav__submenu-item"> <a href="/design-tokens/"> <span> Design tokens </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/color/"> <span> Color </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/typesetting/"> <span> Typesetting </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/flex/"> <span> Flex </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/opacity/"> <span> Opacity </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/order/"> <span> Order </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/shadow/"> <span> Shadow </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/spacing-units/"> <span> Spacing units </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/z-index/"> <span> Z-index </span> </a> </li> </ul> </li> <li class="usa-nav__primary-item"> <button type="button" class="usa-accordion__button usa-nav__link" aria-controls="nav-utilities" aria-expanded="false" > <span> Utilities </span> </button> <ul id="nav-utilities" class="usa-nav__submenu"> <li class="usa-nav__submenu-item"> <a href="/utilities/"> <span> Utilities </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/layout-grid/"> <span> Layout grid </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/color/"> <span> Color </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/height-and-width/"> <span> Height and width </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/margin-and-padding/"> <span> Margin and padding </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/border/"> <span> Border </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/outline/"> <span> Outline </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/font-size-and-family/"> <span> Font size and family </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/text-styles/"> <span> Text styles </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/paragraph-styles/"> <span> Paragraph styles </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/display/"> <span> Display </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/flex/"> <span> Flex </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/shadow/"> <span> Shadow </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/float/"> <span> Float </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/clearfix/"> <span> Clearfix </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/list-reset/"> <span> List reset </span> </a> </li> </ul> </li> <li class="usa-nav__primary-item"> <button type="button" class="usa-accordion__button usa-nav__link" aria-controls="nav-templates" aria-expanded="false" > <span> Templates </span> </button> <ul id="nav-templates" class="usa-nav__submenu"> <li class="usa-nav__submenu-item"> <a href="/templates/"> <span> Templates </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/templates/404-page/"> <span> 404 page </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/templates/documentation-page/"> <span> Documentation page </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/templates/landing-page/"> <span> Landing page </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/templates/authentication-pages/"> <span> Authentication pages </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/templates/form-templates/"> <span> Form templates </span> </a> </li> </ul> </li> <li class="usa-nav__primary-item"> <button type="button" class="usa-accordion__button usa-nav__link" aria-controls="nav-about" aria-expanded="false" > <span> About </span> </button> <ul id="nav-about" class="usa-nav__submenu"> <li class="usa-nav__submenu-item"> <a href="/about/"> <span> About </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/key-benefits/"> <span> Key benefits </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/product-values/"> <span> Product values </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/contribute/"> <span> Contribute </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/community/"> <span> Community </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/whats-new/"> <span> What鈥檚 new </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/monthly-calls/"> <span> Monthly calls </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/product-roadmap/"> <span> Product roadmap </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/research/"> <span> Research </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/security/"> <span> Security </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/website-policies-notices/"> <span> Website policies and notices </span> </a> </li> </ul> </li> </ul>   <ul class="usa-nav__primary usa-nav__primary--desktop"> <li class="usa-nav__submenu-item"> <a href="/how-to-use-uswds/"> <span> How to use USWDS </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-principles/"> <span> Design principles </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/components/"> <span> Components </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/patterns/"> <span> Patterns </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/design-tokens/"> <span> Design tokens </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/utilities/"> <span> Utilities </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/templates/"> <span> Templates </span> </a> </li> <li class="usa-nav__submenu-item"> <a href="/about/"> <span> About </span> </a> </li> </ul>  <div class="usa-nav__secondary"> <form id="search_form-mobile" class="site-search usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get"> <input name="utf8" type="hidden" value="✓" /> <input type="hidden" name="affiliate" id="affiliate-mobile" value="uswds" /> <div role="search"> <label class="usa-sr-only" for="query-mobile">Search</label> <input id="query-mobile" class="usa-input usagov-search-autocomplete" name="query" type="search" autocomplete="off" /> <button class="site-search__button usa-button margin-top-0" type="submit" name="commit"> <img src="/assets/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" > </button> </div> </form> <div class="site-cta-buttons buttons"> <a class="usa-button site-button-outline-secondary site-button-standards margin-x-0 desktop:margin-right-1 padding-x-05 desktop:padding-left-1 desktop:padding-right-05 desktop-lg:padding-left-205 desktop-lg:padding-right-2 font-lang-sm" href="/website-standards/" onclick="ga('send', 'event', 'Read website standards', 'Clicked Read website standards from inside site');" > Read website standards </a> <a class="usa-button site-button-outline-secondary site-button-download margin-x-0 desktop:margin-right-1 desktop:padding-left-1 desktop:padding-right-05 desktop-lg:padding-left-205 desktop-lg:padding-right-2 font-lang-sm" href="/download/" onclick="ga('send', 'event', 'Downloaded code and design files', 'Clicked Download code and design files from inside site');" > Download <span class="version desktop:display-none desktop-lg:display-inline">v3.10.0</span> </a> <a class="usa-button site-button-github margin-x-0 font-lang-sm" href="https://github.com/uswds/uswds" onclick="ga('send', 'event', 'Viewed on Github', 'Clicked View on Github from inside site');" > <?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" class="logo" > <title>Github logo</title> <path fill="#161514" fill-rule="evenodd" d="M16.288 0C7.294 0 0 7.293 0 16.29c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311 1.044 1.138 1.674 2.593 1.674 4.371 0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455C32.579 7.293 25.285 0 16.288 0" /> </svg> <span class="text">View on GitHub</span> </a> </div> </div> </div> </nav> <div class="usa-overlay"></div> <main id="main-content"> <section class="site-hero"> <div class="grid-container"> <div class="maxw-mobile-lg"> <h1 class="hero--heading margin-y-0 line-height-sans-3 text-thin font-lang-13" > A design system for the federal government. </h1> <p class="hero--content font-lang-10 text-thin line-height-sans-4 margin-top-205 margin-bottom-105" > We make it easier to build accessible, mobile-friendly government websites. </p> <a class="usa-button bg-secondary hover:bg-secondary-dark text-normal font-lang-sm margin-top-1" href="/whats-new/updates/2022/04/28/introducing-uswds-3-0/" >Introducing USWDS 3.0</a > <a class="usa-button hover:bg-primary-darker text-normal font-lang-sm bg-primary-vivid margin-top-1" href="/documentation/migration/"> Migrating to USWDS 3.0 </a> </div> </div> </section> <section class="usa-section usa-graphic-list grid-container"> <div class=""> <div class="grid-row grid-gap"> <div class="desktop:grid-col-3 tablet:grid-col-6 usa-media-block margin-bottom-3 desktop:margin-bottom-0" > <img class="usa-media-block__img" src="/img/home/ui-component.svg" alt="" width="72" height="72" /> <div class="usa-media-block__body"> <h2>Components</h2> <p>Browse all USWDS components, and get UX, accessibility, and implementation guidance.</p> <p> <a href="/components/" >Browse components</a > </p> </div> </div> <div class="desktop:grid-col-3 tablet:grid-col-6 usa-media-block margin-bottom-3 desktop:margin-bottom-0" > <img class="usa-media-block__img" src="/img/home/page-templates.svg" alt="" width="72" height="72" /> <div class="usa-media-block__body"> <h2>Patterns</h2> <p>Use our guidance to craft effective and inclusive user experiences.</p> <p> <a href="/patterns/" >Explore pattern guidance</a > </p> </div> </div> <div class="desktop:grid-col-3 tablet:grid-col-6 usa-media-block margin-bottom-3 desktop:margin-bottom-0" > <img class="usa-media-block__img" src="/img/home/design-tokens.svg" alt="" width="72" height="72" /> <div class="usa-media-block__body"> <h2>Design tokens</h2> <p>Learn how to get started using design tokens, the building blocks of USWDS component design.</p> <p> <a href="/design-tokens/" >View design tokens</a > </p> </div> </div> <div class="desktop:grid-col-3 tablet:grid-col-6 usa-media-block margin-bottom-3 desktop:margin-bottom-0" > <img class="usa-media-block__img" src="/img/home/utilities.svg" alt="" width="72" height="72" /> <div class="usa-media-block__body"> <h2>Utilities</h2> <p>Adapt your designs and deliver prototypes quickly and consistently without touching a line of CSS.</p> <p> <a href="/utilities/" >Build with utilities</a > </p> </div> </div> </div> </div> </section> <section class="usa-section bg-base-lightest showcase"> <div class="grid-container"> <h2 class="font-lang-xl margin-y-0 line-height-serif-2">Sites built with USWDS</h2> <div class="grid-row grid-gap tablet:margin-top-3"> <div class="tablet:grid-col"> <img src="/img/webp/home/showcase/nih.webp" alt="" width="960" height="540" /> <a href="https://www.nihlibrary.nih.gov/">National Institutes of Health Library</a> </div> <div class="tablet:grid-col"> <img src="/img/webp/home/showcase/va-healthcare.webp" alt="" width="960" height="540" /> <a href="https://www.va.gov/">U.S. Department of Veterans Affairs</a> </div> <div class="tablet:grid-col"> <img src="/img/webp/home/showcase/nasa.webp" alt="" width="960" height="540" /> <a href="https://www1.grc.nasa.gov/">NASA Glenn Research Center</a> </div> </div> </div> <div class="grid-container tablet:margin-top-6"> <div class="grid-row grid-gap"> <div class="tablet:grid-col"> <img src="/img/webp/home/showcase/pubmed.webp" alt="" width="960" height="540" /> <a class="font-lang-md" href="https://www.ncbi.nlm.nih.gov/labs/pubmed/">PubMed Labs | U.S. National Library of Medicine</a> </div> <div class="tablet:grid-col"> <img src="/img/webp/home/showcase/vote.webp" alt="" width="960" height="540" /> <a href="https://vote.gov/">vote.gov</a> </div> <div class="tablet:grid-col"> <img src="/img/webp/home/showcase/seedfund.webp" alt="" width="960" height="540" /> <a href="https://seedfund.nsf.gov/">America鈥檚 Seed Fund</a> </div> </div> </div> </section> </main> <footer class="usa-footer site-footer"> <div class="usa-footer__secondary-section"> <div class="grid-container footer-content"> <h2>Become part of the community</h2> <p> USWDS is an active open source community of government engineers, content specialists, and designers. Our contributors both in and out of government support dozens of agencies and nearly 200 sites. </p> <div class="grid-row footer-contact-links"> <div class="tablet:grid-col"> <div class="usa-media-block"> <div class="usa-media-block__img circle-5 bg-accent-cool display-flex flex-row flex-align-center flex-justify-center text-white"> <svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img" focusable="false"> <use xlink:href="/assets/img/sprite.svg#help"></use> </svg> </div> <div class="usa-media-block__body"> <h3>Have an idea or an issue?</h3> <a href="https://github.com/uswds/uswds/issues/new/choose">Reach out in GitHub</a> </div> </div> </div> <div class="tablet:grid-col"> <div class="usa-media-block"> <div class="usa-media-block__img circle-5 bg-accent-cool display-flex flex-row flex-align-center flex-justify-center text-white"> <svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img" focusable="false"> <use xlink:href="/assets/img/sprite.svg#people"></use> </svg> </div> <div class="usa-media-block__body"> <h3>Engage with the community</h3> <a href="https://designsystem.digital.gov/about/community/">Find a channel that works for you</a> </div> </div> </div> <div class="tablet:grid-col"> <div class="usa-media-block"> <div class="usa-media-block__img circle-5 bg-accent-cool display-flex flex-row flex-align-center flex-justify-center text-white"> <svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img" focusable="false"> <use xlink:href="/assets/img/sprite.svg#mail"></use> </svg> </div> <div class="usa-media-block__body"> <h3>Subscribe to our newsletter</h3> <a href="https://public.govdelivery.com/accounts/USGSATTS/subscriber/new?qsp=GSA_TTS">Sign up for USWDS updates</a> </div> </div> </div> <div class="tablet:grid-col"> <div class="usa-media-block"> <div class="usa-media-block__img circle-5 bg-accent-cool display-flex flex-row flex-align-center flex-justify-center text-white"> <svg class="usa-icon usa-icon--size-3" aria-hidden="true" role="img" focusable="false"> <use xlink:href="/assets/img/sprite.svg#support"></use> </svg> </div> <div class="usa-media-block__body"> <h3>Get support</h3> <a href="mailto:uswds@gsa.gov">Email the USWDS team</a> </div> </div> </div> </div> </div> <div class="bg-base-light padding-y-1 line-height-sans-3 font-lang-4"> <div class="grid-container"> Looking for USWDS v1 documentation? <a href="https://v1.designsystem.digital.gov" class="text-ink text-bold hover:text-no-underline" >Visit v1.designsystem.digital.gov</a > </div> </div> </div> </footer> <div class="usa-identifier site-identifier"> <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier,,,,,," > <div class="usa-identifier__container"> <div class="usa-identifier__logos"><a href="javascript:void(0);" class="usa-identifier__logo"> <img class="usa-identifier__logo-img" src="/img/gsa-logo.svg" alt="GSA Logo" role="img" width="48" height="48" > </a></div> <section class="usa-identifier__identity" aria-label="Agency description"> <p class="usa-identifier__identity-domain">designsystem.digital.gov</p> <p class="usa-identifier__identity-disclaimer"><span aria-hidden="true">An </span>official website of the <a href=https://gsa.gov>General Services Administration</a></p> </section> </div> </section> <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links"> <div class="usa-identifier__container"> <ul class="usa-identifier__required-links-list"><li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link">About GSA</a> </li><li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/accessibility-statement" class="usa-identifier__required-link">Accessibility statement</a> </li><li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link">FOIA requests</a> </li><li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link">No FEAR Act data</a> </li><li class="usa-identifier__required-links-item"> <a href="https://www.gsaig.gov/" class="usa-identifier__required-link">Office of the Inspector General</a> </li><li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link">Performance reports</a> </li><li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link">Privacy policy</a> </li></ul> </div> </nav> <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="Government information and services"> <div class="usa-identifier__container"> <div class="usa-identifier__usagov-description"> Looking for U.S. government information and services? </div> <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a> </div> </section> </div> <script src="/assets/js/styleguide.js"></script> <script src="/assets/js/vendor/uswds.min.js"></script>  </body> </html>

CINXE.COM

USWDS: The United States Web Design System | U.S. Web Design System (USWDS)