-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add USWDS theme and customizations for...
* Color * Accordion * Buttons
- Loading branch information
1 parent
e1713c3
commit 6f35c8f
Showing
2,606 changed files
with
11,956 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,259 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
|
|
||
| <meta name="robots" content="noindex, nofollow" /> | ||
|
|
||
| <title>Design Tokens Test</title> | ||
|
|
||
| <link href="uswds/css/styles.css" rel="stylesheet"> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <a class="usa-skipnav" href="#main-content">Skip to main content</a> | ||
|
|
||
| <section class="usa-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="uswds/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">Not an official website of the United States government</p> | ||
|
|
||
| <p class="usa-banner__header-action">Here’s how you know</p> | ||
| </div> | ||
|
|
||
| <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner-default"> | ||
| <span class="usa-banner__button-text">Here’s how you know</span> | ||
| </button> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div class="usa-banner__content usa-accordion__content" id="gov-banner-default"> | ||
| <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="uswds/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="uswds/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’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
|
|
||
|
|
||
| <div class="usa-overlay"></div> | ||
|
|
||
| <header class="usa-header usa-header--basic"> | ||
| <div class="usa-nav-container"> | ||
| <div class="usa-navbar"> | ||
| <div class="usa-logo" id="-logo"> | ||
| <em class="usa-logo__text"><a href="/" title="Design Tokens Test">Design Tokens Test</a> <a href="git+https://github.com/codeforamerica/design-tokens-test.git" target="_blank" rel="noopener nofollow">v0.0.0-1</a></em> | ||
| </div> | ||
|
|
||
| <button type="button" class="usa-menu-btn">Menu</button> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| </header> | ||
|
|
||
| <div class="usa-section"> | ||
| <div class="grid-container"> | ||
| <div class="grid-row grid-gap"> | ||
| <div class="usa-layout-docs__sidenav desktop:grid-col-3"> | ||
| <nav aria-label="Secondary navigation"> | ||
| <ul class="usa-sidenav"> | ||
| <li class="usa-sidenav__item"><a href="#section_10">Accordion</a></li> | ||
|
|
||
|
|
||
|
|
||
| <li class="usa-sidenav__item"><a href="#section_20">Button</a></li> | ||
|
|
||
| <li class="usa-sidenav__item"><a href="#section_21">Color</a></li> | ||
|
|
||
| <li class="usa-sidenav__item"><a href="#section_30">Typesetting</a></li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
|
|
||
| <main class="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs" id="main-content"> | ||
| <div class="styleguide-content usa-prose site-prose"> | ||
| <h1></h1> | ||
|
|
||
| <p class="usa-intro"></p> | ||
|
|
||
| </div> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <footer class="usa-footer"> | ||
| <div class="grid-container usa-footer__return-to-top"> | ||
| <a href="#">Return to top</a> | ||
| </div> | ||
|
|
||
| <div class="usa-footer__primary-section"> | ||
| <nav class="usa-footer__nav" aria-label="Footer navigation"> | ||
| <ul class="grid-row grid-gap"> | ||
| <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"> | ||
| <a class="usa-footer__primary-link" href="javascript:void(0);"><Primary link></a> | ||
| </li> | ||
|
|
||
| <li class=" mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"> | ||
| <a class="usa-footer__primary-link" href="javascript:void(0);" ><Primary link></a> | ||
| </li> | ||
|
|
||
| <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"> | ||
| <a class="usa-footer__primary-link" href="javascript:void(0);"><Primary link></a> | ||
| </li> | ||
|
|
||
| <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"> | ||
| <a class="usa-footer__primary-link" href="javascript:void(0);"><Primary link></a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
|
|
||
| <div class="usa-footer__secondary-section"> | ||
| <div class="grid-container"> | ||
| <div class="grid-row grid-gap"> | ||
| <div class=" usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"> | ||
| <div class="mobile-lg:grid-col-auto"> | ||
| <img class="usa-footer__logo-img" src="uswds/img/logo-img.png" alt=""/> | ||
| </div> | ||
|
|
||
| <div class="mobile-lg:grid-col-auto"> | ||
| <p class="usa-footer__logo-heading"><Name of Agency></p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="usa-footer__contact-links mobile-lg:grid-col-6"> | ||
| <div class="usa-footer__social-links grid-row grid-gap-1"> | ||
| <div class="grid-col-auto"> | ||
| <a class="usa-social-link" href="javascript:void(0);"><img class="usa-social-link__icon" src="uswds/img/usa-icons/facebook.svg" alt="Facebook" /></a> | ||
| </div> | ||
|
|
||
| <div class="grid-col-auto"> | ||
| <a class="usa-social-link" href="javascript:void(0);"><img class="usa-social-link__icon" src="uswds/img/usa-icons/twitter.svg" alt="Twitter" /></a> | ||
| </div> | ||
|
|
||
| <div class="grid-col-auto"> | ||
| <a class="usa-social-link" href="javascript:void(0);"><img class="usa-social-link__icon" src="uswds/img/usa-icons/youtube.svg" alt="YouTube" /></a> | ||
| </div> | ||
|
|
||
| <div class="grid-col-auto"> | ||
| <a class="usa-social-link" href="javascript:void(0);"><img class="usa-social-link__icon" src="uswds/img/usa-icons/instagram.svg" alt="Instagram" /></a> | ||
| </div> | ||
|
|
||
| <div class="grid-col-auto"> | ||
| <a class="usa-social-link" href="javascript:void(0);"><img class="usa-social-link__icon" src="uswds/img/usa-icons/rss_feed.svg" alt="RSS"/></a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p class="usa-footer__contact-heading"><Agency Contact Center></p> | ||
|
|
||
| <address class="usa-footer__address"> | ||
| <div class="usa-footer__contact-info grid-row grid-gap"> | ||
| <div class="grid-col-auto"> | ||
| <a href="tel:1-800-555-5555"><(800) 555-GOVT></a> | ||
| </div> | ||
|
|
||
| <div class="grid-col-auto"> | ||
| <a href="mailto:info@agency.gov"><info@agency.gov></a> | ||
| </div> | ||
| </div> | ||
| </address> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <div class="usa-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="uswds/img/circle-gray-20.svg" alt="<Parent agency> logo" role="img" /></a> | ||
| </div> | ||
|
|
||
| <section class="usa-identifier__identity" aria-label="Agency description"> | ||
| <p class="usa-identifier__identity-domain">domain.gov</p> | ||
|
|
||
| <p class="usa-identifier__identity-disclaimer">An official website of the <a href=""><Parent agency></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="javascript:void(0)" class="usa-identifier__required-link usa-link">About <Parent shortname></a> | ||
| </li> | ||
|
|
||
| <li class="usa-identifier__required-links-item"> | ||
| <a href="" class="usa-identifier__required-link usa-link">Accessibility support</a> | ||
| </li> | ||
|
|
||
| <li class="usa-identifier__required-links-item"> | ||
| <a href="" class="usa-identifier__required-link usa-link">FOIA requests</a> | ||
| </li> | ||
|
|
||
| <li class="usa-identifier__required-links-item"> | ||
| <a href="" class="usa-identifier__required-link usa-link">No FEAR Act data</a> | ||
| </li> | ||
|
|
||
| <li class="usa-identifier__required-links-item"> | ||
| <a href="" class="usa-identifier__required-link usa-link">Office of the Inspector General</a> | ||
| </li> | ||
|
|
||
| <li class="usa-identifier__required-links-item"> | ||
| <a href="" class="usa-identifier__required-link usa-link">Performance reports</a> | ||
| </li> | ||
|
|
||
| <li class="usa-identifier__required-links-item"> | ||
| <a href="" class="usa-identifier__required-link usa-link">Privacy policy</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. 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="uswds/js/uswds.js"></script> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.