Foundation

Page templates

These are the most common layouts used on VA.gov. The templates on this page are not full-page layouts, as the main header and footer are not currently part of the Design System, but snippets here are for everything in between to help you establish the page grid.

Guidance for all examples

The following guidance applies to all page templates. The page templates are built with a combination of flexbox grid, the negative margin utility and the padding utility.

Accessibility

Do not use CSS to swap source order from the visual order. In other words, what is placed towards the top of the page in small screens should be placed on the left in larger screens.
The main content of the page should always be wrapped in <main>.
Always use the proper semantic heading order in your page content.

Two columns, content on right

In this example, the nav bar is what usually appears on the left-hand side of the page. When viewing this layout on VA.gov using a mobile device, the containing div sits on top of the main content. However, because the side navigation is converted to a flyout menu, and no vertical padding is associated with it, the side navigation’s containing div appears to have disappeared.

Header (not included)

Usually this is the sidebar

Usually this is main content

Footer (not included)

<div class="vads-u-padding-x--2 vads-u-padding-y--2 vads-u-background-color--gray-lighter">Header (not included)</div>
<div class="vads-u-padding-y--3">
  <main>
    <div class="vads-l-grid-container large-screen:vads-u-padding-x--0">
      <div class="vads-l-row vads-u-margin-x--neg2p5">
        <div class="vads-l-col--12 vads-u-padding-x--2p5 medium-screen:vads-l-col--4 large-screen:vads-l-col--3">
          <div class="vads-u-padding-x--2 vads-u-padding-y--7 vads-u-background-color--primary-alt-lightest" style="height:240px">Usually this is the sidebar</div>
        </div>
        <div class="vads-l-col--12 vads-u-padding-x--2p5 medium-screen:vads-l-col--8 large-screen:vads-l-col--9">
          <div class="vads-u-padding-x--2 vads-u-padding-y--7 vads-u-background-color--primary-alt-lightest" style="height:240px">Usually this is main content</div>
        </div>
      </div>
    </div>
  </main>
</div>
<div class="vads-u-padding-x--2 vads-u-padding-y--2 vads-u-background-color--gray-lighter">Footer (not included)</div>

Two columns, content on left

In this layout on VA.gov, the content is on the left and section on the left is often for promo content. When viewing this layout on a mobile device, the right column moves underneath the left column.

Header (not included)

This is the main content

This is the promo area

Footer (not included)

<!-- Header would go here -->
<main>
  <div class="vads-l-grid-container large-screen:vads-u-padding-x--0">
    <div class="vads-l-row vads-u-margin-x--neg2p5">
      <div class="vads-l-col--12 vads-u-padding-x--2p5 medium-screen:vads-l-col--8"></div>
      <div class="vads-l-col--12 vads-u-padding-x--2p5 medium-screen:vads-l-col--4"></div>
    </div>
  </div>
</main>
<!-- Footer would go here -->