Official US Government Icon

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure Site Icon

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

The latest general information on the Coronavirus Disease 2019 (COVID-19) is available on Coronavirus.gov. For USDOT specific COVID-19 resources, please visit our page.

USDOT Web Design System Page Layouts

Page layouts and templates are built using reusable USDOT Web Design System components.

Home Page

The home page informs visitors about agency priorities and news. Home pages contain jumbotron hero components, carousels, and news components.

Transportation.gov

Example of Transportation.gov homepage

Operating Administration (FTA)

Example of Modal site homepage

Build America

Example of Build America homepage

USMMA

Example of USMMA homepage

Landing Page

Transportation.gov

Transportation.gov has a template for “Meet the Secretary” that contains a hero section, side navigation, content area, and a “Secretary’s Priorities” component, and a template for OA pages that contain a hero section, featured quote, “Programs and Projects” block, “Other Associated Agencies” list, and a “Resources” component.

Meet the Secretary

Example of "Meet the Secretary" page

OA

Example of Priority/Mode page

OA Sites

FMCSA

The Landing Page for FMCSA contains a hero section with three cards, a callout section (“Moving Resources” in the example below), and a “Quick Links” list.

Example of OA landing page.

USMMA

USMMA utilizes a different landing page template because it uses a .edu domain. The Landing Page uses a single-column format and includes a callout section at the top, body with a right-hand “In This Section” sub navigation, link list (“Academic Catalog” below), call-to-action box (“USMMA Course Catalog” below), “Popular Resources” block, and “Academics by the Numbers” section.

USMMA landing page template

Lite Landing Page

The Lite Landing page template is shared across all sites and includes the following features:

  • Slideshow at the top of the page
  • "Related Documents" list in left-hand column
  • "Most Requested Pages" list in left-hand column
  • "Most Requested Documents" list in left-hand column
  • "Contact Us" block in left-hand column

Example of lite landing page

Advanced Article

The Advanced Article template uses a two-column format and includes an optional accordion component.

Transportation.gov

Example of an advanced article on Transportation.gov

OA Sites

Example of an advanced article on Modal sites

Article

The article template is designed to use a two-column layout by default. It can also accommodate three-column layouts.

Two-Column (Transportation.gov)

Example of a two-column article on Transportation.gov

Two-Column (OA Sites)

Example of a two-column article on a Modal site

Three-Column (OA Sites)

Example of a three-column article on a Modal site

Last updated: Wednesday, July 15, 2020