1 USWDS USWDS

1.1 USWDS.accordion Accordion

Accordions are a list of headers that can be clicked to hide or reveal additional content.

Example
Borderless

  • Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

  • A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

  • No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

  • The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

  • No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.

Bordered

  • Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

  • A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

  • No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

  • The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

  • No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation. 

<h6>Borderless</h6>
  <ul class="usa-accordion">
    <li>
      <button class="usa-accordion-button"
        aria-expanded="true" aria-controls="amendment-1">
        First Amendment
      </button>
      <div id="amendment-1" class="usa-accordion-content">
        <p>
        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
        aria-controls="amendment-2">
        Second Amendment
      </button>
      <div id="amendment-2" class="usa-accordion-content">
        <p>
        A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
          aria-controls="amendment-3">
        Third Amendment
      </button>
      <div id="amendment-3" class="usa-accordion-content">
        <p>
        No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
        aria-controls="amendment-4">
        Fourth Amendment
      </button>
      <div id="amendment-4" class="usa-accordion-content">
        <p>
        The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
        aria-controls="amendment-5">
        Fifth Amendment
      </button>
      <div id="amendment-5" class="usa-accordion-content">
        <p>
        No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.
        </p>
      </div>
    </li>
  </ul>

  <h6>Bordered</h6>

  <ul class="usa-accordion-bordered">
    <li>
      <button class="usa-accordion-button"
        aria-expanded="true" aria-controls="amendment-b-1">
        First Amendment
      </button>
      <div id="amendment-b-1" class="usa-accordion-content">
        <p>
        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
        aria-controls="amendment-b-2">
        Second Amendment
      </button>
      <div id="amendment-b-2" class="usa-accordion-content">
        <p>
        A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
          aria-controls="amendment-b-3">
        Third Amendment
      </button>
      <div id="amendment-b-3" class="usa-accordion-content">
        <p>
        No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
        aria-controls="amendment-b-4">
        Fourth Amendment
      </button>
      <div id="amendment-b-4" class="usa-accordion-content">
        <p>
        The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.
        </p>
      </div>
    </li>
    <li>
      <button class="usa-accordion-button"
        aria-controls="amendment-b-5">
        Fifth Amendment
      </button>
      <div id="amendment-b-5" class="usa-accordion-content">
        <p>
        No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.
        </p>
      </div>
    </li>
  </ul>
Source: accordion.css, line 1

1.2 USWDS.alerts Alerts

Alerts keep users informed of important and sometimes time-sensitive changes.

Example

Success Status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Warning Status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Information Status

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

Information Status

Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

<div class="usa-alert usa-alert-success">
   <div class="usa-alert-body">
     <h3 class="usa-alert-heading">Success Status</h3>
     <p class="usa-alert-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
   </div>
 </div>
 <div class="usa-alert usa-alert-warning">
   <div class="usa-alert-body">
     <h3 class="usa-alert-heading">Warning Status</h3>
     <p class="usa-alert-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
   </div>
 </div>
 <div class="usa-alert usa-alert-error" role="alert">
   <div class="usa-alert-body">
     <h3 class="usa-alert-heading">Error Status</h3>
     <p class="usa-alert-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
   </div>
 </div>
 <div class="usa-alert usa-alert-info">
   <div class="usa-alert-body">
     <h3 class="usa-alert-heading">Information Status</h3>
     <p class="usa-alert-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
   </div>
 </div>
 <div class="usa-alert usa-alert-info">
   <div class="usa-alert-body">
     <h3 class="usa-alert-heading">Information Status</h3>
     <p class="usa-alert-text">Multi line. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui atione voluptatem sequi nesciunt. Neque porro quisquam est, qui doloremipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
   </div>
 </div>
Source: alerts.css, line 1

1.3 USWDS.buttons Buttons

Use buttons to signal actions.

Example
Primary Buttons
Secondary Buttons
Button Focus
Disabled Button
Big Button
<h6>Primary Buttons</h6>
  <div class="button_wrapper">
    <button>Default</button>
    <button class="usa-button-active">Active</button>
    <button class="usa-button-hover">Hover</button>
  </div>
  <div class="button_wrapper">
    <button class="usa-button-primary-alt">Default</button>
    <button class="usa-button-primary-alt usa-button-active">Active</button>
    <button class="usa-button-primary-alt usa-button-hover">Hover</button>
  </div>
  <h6>Secondary Buttons</h6>
  <div class="button_wrapper">
    <button class="usa-button-secondary">Default</button>
    <button class="usa-button-secondary usa-button-active">Active</button>
    <button class="usa-button-secondary usa-button-hover">Hover</button>
  </div>
  <div class="button_wrapper">
    <button class="usa-button-gray">Default</button>
    <button class="usa-button-gray usa-button-active">Active</button>
    <button class="usa-button-gray usa-button-hover">Hover</button>
  </div>
  <div class="button_wrapper">
    <button class="usa-button-outline" type="button">Default</button>
    <button class="usa-button-outline usa-button-active">Active</button>
    <button class="usa-button-outline usa-button-hover">Hover</button>
  </div>
  <div class="button_wrapper button_wrapper-dark">
    <button class="usa-button-outline-inverse" type="button">Default</button>
    <button class="usa-button-outline-inverse usa-button-active">Active</button>
    <button class="usa-button-outline-inverse usa-button-hover">Hover</button>
  </div>
  <h6>Button Focus</h6>
  <div class="button_wrapper">
    <button class="usa-button-focus">Default</button>
    <button class="usa-button-primary-alt usa-button-focus">Default</button>
    <button class="usa-button-secondary usa-button-focus">Default</button>
  </div>
  <h6>Disabled Button</h6>
  <div class="button_wrapper">
    <button class="usa-button-disabled" disabled>Default</button>
  </div>
  <h6>Big Button</h6>
  <div class="button_wrapper">
    <button class="usa-button-big" type="button">Default</button>
  </div>
Source: buttons.css, line 1

1.4 USWDS.footer; Footer

Footers serve site visitors who arrive at the bottom of a page without finding what they want.

Example 
<h6 class="usa-heading-alt" id="big-footer">Big footer</h6>

<footer class="usa-footer usa-footer-big" role="contentinfo">
  <div class="usa-grid usa-footer-return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer-primary-section">
    <div class="usa-grid-full">
      <nav class="usa-footer-nav usa-width-two-thirds">
        <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
          <li class="usa-footer-primary-link">
            <h4>Topic</h4>
          </li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
        </ul>
        <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
          <li class="usa-footer-primary-link">
            <h4>Topic</h4>
          </li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
        </ul>
        <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
          <li class="usa-footer-primary-link">
            <h4>Topic</h4>
          </li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
        </ul>
        <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
          <li class="usa-footer-primary-link">
            <h4>Topic</h4>
          </li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
          <li><a href="javascript:void(0);">Secondary link</a></li>
        </ul>
      </nav>

      <div class="usa-sign_up-block usa-width-one-third">
        <h3 class="usa-sign_up-header">Sign up</h3>

        <label class="" for="email" id="">Your email address</label>
        <input id="email" name="email" type="email">

        <button type="submit">Sign up</button>
      </div>
    </div>
  </div>

  <div class="usa-footer-secondary_section usa-footer-big-secondary-section">
    <div class="usa-grid">
      <div class="usa-footer-logo usa-width-one-half">
        <img class="usa-footer-logo-img" src="http://placehold.it/350x150" alt="Logo image">
        <h3 class="usa-footer-logo-heading">Name of Agency</h3>
      </div>
      <div class="usa-footer-contact-links usa-width-one-half">
        <a class="usa-link-facebook" href="javascript:void(0);">
          <span>Facebook</span>
        </a>
        <a class="usa-link-twitter" href="javascript:void(0);">
          <span>Twitter</span>
        </a>
        <a class="usa-link-youtube" href="javascript:void(0);">
          <span>YouTube</span>
        </a>
        <a class="usa-link-rss" href="javascript:void(0);">
          <span>RSS</span>
        </a>
        <address>
          <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
          <p>(800) CALL-GOVT</p>
          <a href="mailto:info@agency.gov">info@agency.gov</a>
        </address>
      </div>
    </div>
  </div>
</footer>

<h6 class="usa-heading-alt" id="medium-footer">Medium footer</h6>

<footer class="usa-footer usa-footer-medium" role="contentinfo">
  <div class="usa-grid usa-footer-return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer-primary-section">
    <div class="usa-grid-full">
      <nav class="usa-footer-nav">
        <ul class="usa-unstyled-list">
          <li class="usa-width-one-sixth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
          <li class="usa-width-one-sixth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
          <li class="usa-width-one-sixth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
          <li class="usa-width-one-sixth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
          <li class="usa-width-one-sixth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="usa-footer-secondary_section">
    <div class="usa-grid">
      <div class="usa-footer-logo usa-width-one-half">
        <img class="usa-footer-logo-img" src="http://placehold.it/350x150" alt="Logo image">
        <h3 class="usa-footer-logo-heading">Name of Agency</h3>
      </div>
      <div class="usa-footer-contact-links usa-width-one-half">
        <a class="usa-link-facebook" href="javascript:void(0);">
          <span>Facebook</span>
        </a>
        <a class="usa-link-twitter" href="javascript:void(0);">
          <span>Twitter</span>
        </a>
        <a class="usa-link-youtube" href="javascript:void(0);">
          <span>YouTube</span>
        </a>
        <a class="usa-link-rss" href="javascript:void(0);">
          <span>RSS</span>
        </a>
        <address>
          <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
          <p>(800) CALL-GOVT</p>
          <a href="mailto:info@agency.gov">info@agency.gov</a>
        </address>
      </div>
    </div>
  </div>
</footer>

<h6 class="usa-heading-alt" id="slim-footer">Slim footer</h6>

<footer class="usa-footer usa-footer-slim" role="contentinfo">
  <div class="usa-grid usa-footer-return-to-top">
    <a href="javascript:void(0);">Return to top</a>
  </div>
  <div class="usa-footer-primary-section">
    <div class="usa-grid-full">
      <nav class="usa-footer-nav usa-width-two-thirds">
        <ul class="usa-unstyled-list">
          <li class="usa-width-one-fourth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
          <li class="usa-width-one-fourth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
          <li class="usa-width-one-fourth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
          <li class="usa-width-one-fourth usa-footer-primary-content">
            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
          </li>
        </ul>
      </nav>
      <div class="usa-width-one-third">
        <div class="usa-footer-primary-content usa-footer-contact_info">
          <p>(800) CALL-GOVT</p>
        </div>
        <div class="usa-footer-primary-content usa-footer-contact_info">
          <a href="mailto:info@agency.gov">info@agency.gov</a>
        </div>
      </div>
    </div>
  </div>

  <div class="usa-footer-secondary_section">
    <div class="usa-grid">
      <div class="usa-footer-logo">
        <img class="usa-footer-slim-logo-img" src="http://placehold.it/350x150" alt="Logo image">
        <h3 class="usa-footer-slim-logo-heading">Name of Agency</h3>
      </div>
    </div>
  </div>
</footer>
Source: footer.css, line 1

1.5 USWDS.form-controls Form Controls

Form controls allow users to enter information into a page.

Source: form-controls.css, line 1

1.5.1 USWDS.form-controls.checkboxes Checkboxes

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

Example
Historical figures 1 
<fieldset class="usa-fieldset-inputs usa-sans">

  <legend class="usa-sr-only">Historical figures 1</legend>

  <ul class="usa-unstyled-list">
    <li>
      <input id="truth" type="checkbox" name="historical-figures-1" value="truth" checked>
      <label for="truth">Sojourner Truth</label>
    </li>
    <li>
      <input id="douglass" type="checkbox" name="historical-figures-1" value="douglass">
      <label for="douglass">Frederick Douglass</label>
    </li>
    <li>
      <input id="washington" type="checkbox" name="historical-figures-1" value="washington">
      <label for="washington">Booker T. Washington</label>
    </li>
    <li>
      <input id="carver" type="checkbox" name="historical-figures-1" disabled>
      <label for="carver">George Washington Carver</label>
    </li>
  </ul>

</fieldset>
Source: checkboxes.css, line 1

1.5.2 USWDS.form-controls.dropdown Dropdown

A dropdown allows users to select one option from a list.

Example 
<form class="usa-form">
  <label for="options">Dropdown label</label>
  <select name="options" id="options">
    <option value="value1">Option A</option>
    <option value="value2">Option B</option>
    <option value="value3">Option C</option>
  </select>
</form>
Source: dropdown.css, line 1

1.5.3 USWDS.form-controls.radio-buttons Radio Buttons

Radio buttons allow users to see all available choices at once and select exactly one option.

Example
Historical figures 2 
<fieldset class="usa-fieldset-inputs usa-sans">

  <legend class="usa-sr-only">Historical figures 2</legend>

  <ul class="usa-unstyled-list">
    <li>
      <input id="stanton" type="radio" checked name="historical-figures-2" value="stanton">
      <label for="stanton">Elizabeth Cady Stanton</label>
    </li>
    <li>
      <input id="anthony" type="radio" name="historical-figures-2" value="anthony">
      <label for="anthony">Susan B. Anthony</label>
    </li>
    <li>
      <input id="tubman" type="radio" name="historical-figures-2" value="tubman">
      <label for="tubman">Harriet Tubman</label>
    </li>
  </ul>

</fieldset>
Source: radio-buttons.css, line 1

1.5.4 USWDS.form-controls.text-input Text Input

Text inputs allow people to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted). Text input boxes can span single or multiple lines.

Example
Helpful error message 
<label for="input-type-text">Text input label</label>
<input id="input-type-text" name="input-type-text" type="text">

<label for="input-focus">Text input focused</label>
<input class="usa-input-focus" id="input-focus" name="input-focus" type="text">

<div class="usa-input-error">
  <label class="usa-input-error-label" for="input-error">Text input error</label>
  <span class="usa-input-error-message" id="input-error-message" role="alert">Helpful error message</span>
  <input id="input-error" name="input-error" type="text" aria-describedby="input-error-message">
</div>

<label for="input-success">Text input success</label>
<input class="usa-input-success" id="input-success" name="input-success" type="text">

<label for="input-type-textarea">Text area label</label>
<textarea id="input-type-textarea" name="input-type-textarea"></textarea>
Source: text-input.css, line 1

1.6 USWDS.grid Grids

This 12-column, responsive grid provides structure for website content.

Example
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
<div class="preview preview-no_border grid-example grid-example-blank">
  <div class="usa-grid">
    <div class="usa-width-one-whole">1/1</div>
  </div>
  <div class="usa-grid">
    <div class="usa-width-one-half">1/2</div>
    <div class="usa-width-one-half">1/2</div>
  </div>
  <div class="usa-grid">
    <div class="usa-width-one-third">1/3</div>
    <div class="usa-width-one-third">1/3</div>
    <div class="usa-width-one-third">1/3</div>
  </div>
  <div class="usa-grid">
    <div class="usa-width-one-fourth">1/4</div>
    <div class="usa-width-one-fourth">1/4</div>
    <div class="usa-width-one-fourth">1/4</div>
    <div class="usa-width-one-fourth">1/4</div>
  </div>
  <div class="usa-grid">
    <div class="usa-width-one-sixth">1/6</div>
    <div class="usa-width-one-sixth">1/6</div>
    <div class="usa-width-one-sixth">1/6</div>
    <div class="usa-width-one-sixth">1/6</div>
    <div class="usa-width-one-sixth">1/6</div>
    <div class="usa-width-one-sixth">1/6</div>
  </div>
  <div class="usa-grid">
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
    <div class="usa-width-one-twelfth">1/12</div>
  </div>
</div>
Source: grid.css, line 1

1.7 USWDS.labels Labels

Labels draw attention to new or important content.

Example
Small
New
Large
New 
<h6>Small</h6>
<span class="usa-label">New</span>
<h6>Large</h6>
<span class="usa-label-big">New</span>
Source: labels.css, line 1

1.8 USWDS.search-bar Search bar

A block that 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

Example
Search big
Search medium
Search small
<h6>Search big</h6>

  <div class="usa-grid">
    <div class="usa-width-one-half">
      <form class="usa-search usa-search-big">
        <div role="search">
          <label class="usa-sr-only" for="search-field-big">Search big</label>
          <input id="search-field-big" type="search" name="search">
          <button type="submit">
            <span class="usa-search-submit-text">Search</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <h6>Search medium</h6>

  <div class="usa-grid">
    <div class="usa-width-one-half">
      <form class="usa-search">
        <div role="search">
          <label class="usa-sr-only" for="search-field">Search medium</label>
          <input id="search-field" type="search" name="search">
          <button type="submit">
            <span class="usa-search-submit-text">Search</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <h6>Search small</h6>

  <div class="usa-grid">
    <div class="usa-width-one-half">
      <form class="usa-search usa-search-small">
        <div role="search">
          <label class="usa-sr-only" for="search-field-small">Search small</label>
          <input id="search-field-small" type="search" name="search">
          <button type="submit">
            <span class="usa-sr-only">Search</span>
          </button>
        </div>
      </form>
    </div>
  </div>
Source: search-bar.css, line 1

1.9 USWDS.tables Tables

Tables show tabular data in columns and rows.

Examples
Default styling
Document Title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments MadeA document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
.usa-table-borderless
Borderless
Document Title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments MadeA document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863 
<table class="[modifier class]">
  <thead>
    <tr>
      <th scope="col">Document Title</th>
      <th scope="col">Description</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Declaration of Independence</th>
      <td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
      <td>1776</td>
    </tr>
    <tr>
      <th scope="row">Bill of Rights</th>
      <td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
      <td>1791</td>
    </tr>
    <tr>
      <th scope="row">Declaration of Sentiments</th>
      <td>MadeA document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
      <td>1848</td>
    </tr>
    <tr>
      <th scope="row">Emancipation Proclamation</th>
      <td>An executive order granting freedom to slaves in designated southern states.</td>
      <td>1863</td>
    </tr>
  </tbody>
</table>
Source: tables.css, line 1

1.10 USWDS.typography Typography

U.S. government websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. We recommend a font system that uses two open-source font families: Source Sans Pro and Merriweather, both of which are designed for legibility and can beautifully adapt to a variety of visual styles.

Source: typography.css, line 1

1.10.1 USWDS.typography.links Links

Links lead users to a different page or further information.

Example

This is a text link on a light background.

This is a visited link.

This is a link that goes to an external website.

This is a text link on a dark background.

<p><a href="javascript:void(0);">This</a> is a text link on a light background.</p>
<p><a class="usa-color-text-visited" href="javascript:void(0);">This</a> is a visited link.</p>
<p>This is a link that goes to an <a class="usa-external_link" href="http://media.giphy.com/media/8sgNa77Dvj7tC/giphy.gif">external website</a>.</p>
<div class="usa-background-dark">
<p><a href="javascript:void(0);">This</a> is a text link on a dark background.</p>
</div>
Source: typography.css, line 17

1.10.2 USWDS.typography.lists Lists

Lists organize written information for users.

Example
Unordered list
  • Unordered list item
  • Unordered list item
  • Unordered list item
Ordered list
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
<div class="usa-grid-full">
    <div class="usa-width-one-third">
        <h6 class="usa-heading-alt">Unordered list</h6>
        <ul>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
            <li>Unordered list item</li>
        </ul>
    </div>
    <div class="usa-width-one-third">
        <h6 class="usa-heading-alt mt0">Ordered list</h6>
        <ol>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
      </ol>
    </div>
</div>
Source: typography.css, line 33

1.10.3 USWDS.typography.typefaces Typefaces

Example
Source Sans Pro

Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Merriweather

Merriweather is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes while not occupying extra horizontal space.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

<div class="typography-sans-intro usa-width-one-half usa-end-row ">
<div style="font-size:2em">Source Sans Pro</div>
<p>Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly-readable body text.</p>
<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
<p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>

<div class="typography-serif-intro usa-width-one-half usa-end-row usa-serif">
<div style="font-size:2em">Merriweather</div>
<p>Merriweather is an open-source serif typeface designed for on-screen reading. This font is ideal for text-dense design: the letterforms have a tall x-height but remain relatively small, making for excellent readability across screen sizes while not occupying extra horizontal space.</p>
<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
<p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</div>
Source: typography.css, line 9