USDOT Web Design System Page Layouts

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

• Home Page
• Landing Page
• Lite Landing Page
• Advanced Article
• Article

Home Page

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

** this is a legacy website in which the design varies from the USDOT Web Design System and USWDS standards

Landing Page

Agency Landing Page: Department of Transportation (Transportation.gov)

Transportation.gov has a template for "Secretary's Priorities" that contains a hero section, a "DOT Programs and Projects" block with cards, a link list ("Other Associated Agencies"), and a “Resources” section containing cards for various audiences.

Secretary's Priorities: Safety

Operating Administration (OA) Landing Page: Federal Motor Carrier Safety Administration (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.

Operating Administration (OA) Landing Page: United States Merchant Marine Academy (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 Agency and OA sites and includes the following features:

• Slideshow at the top of the page
• "Related Links" list in left-hand column
• "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 page template uses a two-column format and includes an optional accordion component.

Article

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