Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Layout

Page templates

These are the most common layouts used on VA.gov. The templates on this page are not full-page layouts, as main header and footer are not currently part of Formation, but snippets here are for everything in between to help you establish for 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 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--4 large-screen:vads-l-col--3"></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>
    </div>
  </div>
</main>
<!-- Footer would go here -->

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 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 -->