Page templates

Page templates

These templates for a landing page and a documentation page are built from USWDS components. Each of these pages is flexible; you can add or remove components or subcomponents to suit your needs. These templates are great starting point for prototyping or for trying USWDS to see if it’s a good fit for your project.

Landing page

Provide someone’s first impression of your agency or program.

Often, site users arrive at a landing page without much context, like a search result or a colleague’s email. So a landing page needs to be clear, engaging, and contextualizing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
  

<div class="usa-banner">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <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">
      <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" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
            </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" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>The site is secure.</strong>
              <br>
              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  

<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended"><div class="usa-navbar">
  <div class="usa-logo" id="extended-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  <button class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
    <div class="usa-nav__inner"><button class="usa-nav__close"><img src="/assets/img/close.svg" alt="close"></button>
<ul class="usa-nav__primary usa-accordion"><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="extended-nav-section-one"><span>Current section</span></button>
    <ul id="extended-nav-section-one" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two"><span>Section</span></button>
    <ul id="extended-nav-section-two" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
    </li></ul><div class="usa-nav__secondary">
  <ul class="usa-nav__secondary-links"><li class="usa-nav__secondary-item">
      <a href="">Secondary link</a>
    </li><li class="usa-nav__secondary-item">
      <a href="">Another secondary link</a>
    </li></ul><form class="usa-search usa-search--small ">
  <div role="search">
    <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
    <input class="usa-input" id="extended-search-field-small" type="search" name="search">
    <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
  </div>
</form>
</div>
</div>
  </nav>
</header>


  

<main id="main-content">
  <section class="usa-hero">
  <div class="grid-container">
    <div class="usa-hero__callout">
      <h1 class="usa-hero__heading"><span class="usa-hero__heading--alt">Hero callout:</span>Bring attention to a project priority
      </h1><p>Support the callout with some short explanatory text. You don’t need more than a couple of sentences.</p><a class="usa-button" href="javascript:void(0)">Call to action</a>
    </div>
  </div>
</section>


  
  <section class="grid-container usa-section">
    <div class="grid-row grid-gap">
      <div class="tablet:grid-col-4">
        <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">A tagline highlights your approach</h2>
      </div>
      <div class="tablet:grid-col-8 usa-prose">
        <p>The tagline should inspire confidence and interest, focusing on the value that your overall approach offers to your audience. Use a heading typeface and keep your tagline to just a few words, and don’t confuse or mystify.</p>
<p>Use the right side of the grid to explain the tagline a bit more. What are your goals? How do you do your work? Write in the present tense, and stay brief here. People who are interested can find details on internal pages.</p>

      </div>
    </div>
  </section>
  

  <section class="usa-graphic-list usa-section usa-section--dark">
  <div class="grid-container">
    <div class="usa-graphic-list__row grid-row grid-gap">
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img"  src="/assets/img/circle-124.png" alt="Alt text">
        <div class="usa-media-block__body">
          <h3 class="usa-graphic-list__heading">Graphic headings can vary.</h3>
          <p>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.</p>
        </div>
      </div>
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img"  src="/assets/img/circle-124.png" alt="Alt text">
        <div class="usa-media-block__body">
          <h3 class="usa-graphic-list__heading">Stick to 6 or fewer words.</h3>
          <p>Keep body text to about 30 words. They can be shorter, but try to be somewhat balanced across all four. It creates a clean appearance with good spacing.</p>
        </div>
      </div>
    </div>
    <div class="usa-graphic-list__row grid-row grid-gap">
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img"  src="/assets/img/circle-124.png" alt="Alt text">
        <div class="usa-media-block__body">
          <h3 class="usa-graphic-list__heading">Never highlight anything without a goal.</h3>
          <p>For anything you want to highlight here, understand what your users know now, and what activity or impression you want from them after they see it.</p>
        </div>
      </div>
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img"  src="/assets/img/circle-124.png" alt="Alt text">
        <div class="usa-media-block__body">
          <h3 class="usa-graphic-list__heading">Could also have 2 or 6.</h3>
          <p>In addition to your goal, find out your users’ goals. What do they want to know or do that supports your mission? Use these headings to show those.</p>
        </div>
      </div>
    </div>
  </div>
</section>


  <section id="test-section-id" class="usa-section">
    <div class="grid-container">
      <h2 class="font-heading-xl margin-y-0">Section heading</h2>
      <p class="usa-intro">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.</p>
      <a class="usa-button usa-button--big" href="#">Call to action</a>
    </div>
  </section>

</main>

When to use the landing page template

  • Introducing a new program. If you are introducing a new program to the public through a marketing or publicity campaign, a landing page is a good place to point links at. It can build on the minimal copy of a campaign without overwhelming readers.

When to avoid

  • Internal pages. Don’t use a landing page for standard internal page content. The same things that help people understand basics quickly can become distracting for people who are looking for more depth.

Usability guidance

  • Remember to do your research. The landing page can be a good model for a homepage. But do some research first. What do you have to say? What do your users need to know? Figure these things out. It’s important to know what you have to say about your organization before you settle on a homepage design.
  • Don’t make it too complicated. Don’t try to include forms or side navigation in a page like this. Those are visually complex components, and a landing page works best without too much complexity.
  • Simple pages may not need a header. If you are using the landing page to encourage users to follow a primary call to action, consider getting rid of the header. The less there is to distract people from the most important task, the more often they will do it.
  • Remove unnecessary elements. Do not create extra content just to fill the template. You can remove individual components (such as the media block) or sub-components (such as individual menu items in the header) from the template as you implement it. This version gives you a broad idea of the number of things your landing page could include. But never make a page more complex than you need to. If you’re unsure, interview users to find out what they need to know.
  • See component-specific guidance. For guidance on specific components, see the pages for the individual components.

Components used in this template

  • Extended header
  • Hero feature
  • Graphic list
  • Media block
  • Grid
  • Buttons
  • Medium footer

Component definitions

  • Hero feature: Hero features are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about. The Hero feature offers a callout which provides a high-level overview of the content on the site and will often reference the Hero image that sits behind it.
  • Graphic list: The Graphic list is used to showcase a number of related items and their respective images in a grid pattern.

Documentation page

Present information on a certain theme, topic, or idea.

People often arrive at a documentation page after visiting the landing page or after searching for a specific piece of information, so documentation pages don’t need to provide as much contextualizing information as more introductory pages would. The copy should be clear, focused, and concise.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<a class="usa-skipnav" href="#main-content">Skip to main content</a>
  

<div class="usa-banner">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <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">
      <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" alt="Dot gov">
          <div class="usa-media-block__body">
            <p>
              <strong>The .gov means it’s official.</strong>
              <br>
              Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.
            </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" alt="Https">
          <div class="usa-media-block__body">
            <p>
              <strong>The site is secure.</strong>
              <br>
              The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  

<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="basic-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  <button class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
      <button class="usa-nav__close"><img src="/assets/img/close.svg" alt="close"></button>
<ul class="usa-nav__primary usa-accordion"><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="basic-nav-section-one"><span>Current section</span></button>
    <ul id="basic-nav-section-one" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two"><span>Section</span></button>
    <ul id="basic-nav-section-two" class="usa-nav__submenu"><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li><li class="usa-nav__submenu-item">
              <a href="#">Navigation link</a>
            </li></ul></li><li class="usa-nav__primary-item">
    <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
    </li></ul><form class="usa-search usa-search--small ">
  <div role="search">
    <label class="usa-sr-only" for="basic-search-field-small">Search small</label>
    <input class="usa-input" id="basic-search-field-small" type="search" name="search">
    <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
  </div>
</form>
</nav>
  </div>
</header>


  

<main class="usa-layout-docs usa-section" id="main-content">
  <div class="grid-container">
    <div class="grid-row grid-gap">
      <aside 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="">Parent link</a>
  </li><li class="usa-sidenav__item">
    <a href="" class="usa-current">Current page</a><ul class="usa-sidenav__sublist">
      <li class="usa-sidenav__item">
    <a href="">Child link</a>
  </li><li class="usa-sidenav__item">
    <a href="" class="usa-current">Child link</a><ul class="usa-sidenav__sublist">
      <li class="usa-sidenav__item">
    <a href="">Grandchild link</a>
  </li><li class="usa-sidenav__item">
    <a href="">Grandchild link</a>
  </li><li class="usa-sidenav__item">
    <a href="" class="usa-current">Grandchild link</a>
  </li><li class="usa-sidenav__item">
    <a href="">Grandchild link</a>
  </li>
    </ul>
  </li><li class="usa-sidenav__item">
    <a href="">Child link</a>
  </li><li class="usa-sidenav__item">
    <a href="">Child link</a>
  </li><li class="usa-sidenav__item">
    <a href="">Child link</a>
  </li>
    </ul>
  </li><li class="usa-sidenav__item">
    <a href="">Parent link</a>
  </li>
  </ul>
</nav>

      </aside>

      <div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
        <h1>Page heading (h1)</h1>

        <p class="usa-intro">The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct.</p>

        <h2 id="section-heading-h2">Section heading (h2)</h2>

        <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>

        <h3 id="section-heading-h3">Subsection heading (h3)</h3>

        <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>

        <p>Keep each section and subsection focused — a good approach is to include one theme (topic) per section.</p>

        <h4 id="section-heading-h4">Subsection heading (h4)</h4>

        <p>Use the side navigation menu to help your users quickly skip to different sections of your page. The menu is best suited to displaying a hierarchy with one to three levels and, as we mentioned, to display the sub-navigation of a given page.</p>

        <p>Read the full documentation on our side navigation on the component page.</p>
      </div>
    </div>
  </div>
</main>

When to use the documentation template

  • Detailed information on a specific topic. If you’re presenting detailed information on a specific topic or theme that has already been contextualized by a landing page. Some topics that can be nicely represented on this type of page include guides or how-tos, technical documentation, and program descriptions — in short, any subject that requires in-depth explanation.

When to avoid

  • Introducing a new program. Don’t use a documentation page to introduce your users to your agency or organization — the landing page is better suited to that purpose. The level of detail present on documentation pages can overwhelm users who are just becoming acquainted with your organization.

Usability guidance

  • Use a precise headline. A precise headline quickly communicates your page’s purpose. If the page content is especially complex, you may consider using a subheadline to further clarify its meaning.
  • Write concise copy. Favor short sentences (and paragraphs) over longer ones, and use straightforward language, avoiding jargon. Remember, copy blocks don’t need to be long to be comprehensive.
  • See component-specific guidance. For guidance on specific components, see the page for the individual components.

Components used in this template

  • Basic header
  • Grid
  • Side navigation
  • Documentation layout
  • Medium footer