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
Operating Administration (FTA)
Build America
USMMA
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
OA
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.
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.
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
Advanced Article
The Advanced Article template uses a two-column format and includes an optional accordion component.
Transportation.gov
OA 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)
Two-Column (OA Sites)
Three-Column (OA Sites)