USDOT Web Design System Components
Components are built using reusable USDOT Web Design System elements.
Global
The following components are used and available across all sites.
Alert
An alert keeps users informed of important and sometimes time-sensitive changes. The global alert is activated on all pages, except for Transportation.gov home page, which uses the larger version below.
Global Alert
Transportation.gov Home Page Alert
USA Banner
The banner identifies your site as an official website of the United States government and helps visitors understand how to tell that it is official. It follows the specifications from the U.S. Web Design System and is used across all USDOT websites except USMMA.edu.
DOT Banner
The banner identifies your site as an official website of the United States Department of Transportation and helps visitors understand how to tell that it is official. It is used across all sites except Transportation.gov.
Accordion
An accordion is a list of headers that hide or reveal additional content when selected.
Closed
Open
Button
Buttons draw attention to important actions. The USDOT Web Design System uses a standard design for buttons across all sites with some minor exceptions, including buttons used on Build America and USMMA.
Main Button Style
Build America and USMMA Button Style
Card
Cards are flexible content containers that can include images, links, and text.
Transportation.gov
Below are some example cards with components used on Transportation.gov.
Operating Administration Sites
Below are some example cards with components used on OA sites.
Contact Block
The contact block is placed in the left-side column and under the side navigation.
Related Content Block
The related content block is placed in the left-side column and under the side navigation.
Transportation.gov
OA Sites
Footer
The footer assists site visitors with finding what they need, from the bottom of every page.
Transportation.gov
The Transportation.gov footer contains five columns.
Operating Administration Sites
OA site footer is flexible and can utilize up to five columns.
Build America
The Build America footer follows the main Transportation.gov footer layout.
USMMA
The USMMA footer uses a two-column format and includes an additional section at the top to promote student applications.
Form Controls
The design system uses base form control elements provided by the Twitter Bootstrap framework. This includes text inputs, select lists, checkboxes, and radio buttons. Please refer to Bootstrap’s Forms documentation for more details.
Grid
The USDOT Web Design System utilizes Twitter Bootstrap’s flexible grid system to structure web page and content layout for all sites. The grid is mobile-first, accessible on all major browsers, and based on a twelve-column system.
Header
The header helps users identify where they are and provides a quick, organized way to reach the main sections of the website. The USDOT and OA headers include branding to identify the site, horizontal navigation, and site search.
Transportation.gov Header
The Transportation.gov header includes a logo, navigation, site search tool, and social media links. The navigation includes a regular menu and a mega menu.
Default
Regular Menu (Expanded)
Mega Menu (Expanded)
Operating Administration Header
The OA header includes a logo, navigation, and site search tool. The navigation includes a regular menu and a mega menu.
Default
Regular Menu (Expanded)
Mega Menu (Expanded)
Build America Header
The Build America header includes a logo, navigation, site search tool, and “Today’s Interest Rate” block. The navigation includes a regular menu.
Default
Expanded
USMMA Header
The USMMA header contains the USMMA crest, text logo, links, site search tool, and a sub navigation.
Default
Sub navigation (Expanded)
Hero
The USDOT Web Design System is flexible and supports several implementations for the home page hero components.
General Specifications
Hero image dimensions: 2600px x 1114px
Transportation.gov hero text: 32px Lato 700 white (Hex value #FFFFFF)
OA hero text: 41.5px Open Sans white (Hex value #FFFFFF)
Transportation.gov Hero
Transportation.gov contains a full-bleed background image, which extends from one edge of the browser window to the other, with large text on an opaque overlay, as well as a site search block.
FHWA Hero
FHWA utilizes a full-bleed background image and large text with an opaque overlay to provide greater accessibility.
FMCSA Hero
FMCSA utilizes a full-bleed background image with large text and an opaque overlay, and includes a news block component and a “FMCSA Highlights” carousel block with three or more promoted items.
FRA Hero
FRA utilizes a full-bleed background image with large text and an opaque overlay, and includes a carousel block with three or more promoted items.
FTA Hero
FTA utilizes a full-bleed background image with large text and an opaque overlay, and includes a carousel block with three or more promoted items.
PHMSA Hero
PHMSA utilizes a full-bleed background image with large text over an opaque overlay, a call-to-action button, a news block component, and a carousel block with three or more promoted items.
Seaway Hero
Seaway utilizes a full-bleed background image with large text and an opaque overlay, and a “Highlights” block with three promoted items.
Build America
Build America utilizes a full-bleed background image with large text, and a “Working with the Build America Bureau” block.
Icons
Icons communicate meaning in a graphical user interface. The USDOT Web Design System uses open source Font Awesome icons on the project. If you need additional icons, refer to the implementation instructions at Font Awesome’s website.
Search
Search allows users to search for specific content if they know what search terms to use or can’t find desired content in the main navigation. Each site contains a search widget in the header component that searches content for that site only.
Side Navigation
The USDOT Web Design System uses a two-level vertical navigation positioned in a left-hand column as is shown below.
Single Level
Two Levels
Table
Tables show tabular data in columns and rows. Tables can contain a header row, a header column, or both, depending on the data being presented. Table headers are offset with a grey background and bold text.
Tag
Tags draw attention to categorized content elements and are positioned in the left-hand column under the sub-navigation.
Transportation.gov
OA Sites
Typography
Following the U.S. Web Design System, the USDOT Web Design System provides clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. When text is overlaid on a background or image, the text must have enough of a color contrast in order to be readable. The USDOT Web Design System adheres to WCAG 2.0 Level AA standards for color contrast with a minimum of 3.1 contrast ratio for large text and 4.5.1 contrast ratio for regular text. (Large text is defined as 18pt and larger or 14pt and bold.) When choosing a background image, please choose graphics that will provide foreground text with a suitable contrast. The WebAIM Color Contrast Checker is a useful tool to measure the contrast ratio.
Fonts
Transportation.gov
Source Sans Pro serves as the base font transportation.gov. Source Sans Pro is a sans serif typeface designed to work well in user interfaces. It consists of a variety of weights including light, regular, semi bold, bold, and extrabold, which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel.
Operating Administration Sites
Open Sans serves as the base font for OA sites. The full Open Sans type family consists of a variety of weights including light, regular, semi bold, bold, and extrabold, which allows for a wide range of type treatments and hierarchies within a page while still maintaining a unified look and feel.
For WCAG 2.0 AA standards, large text is defined as text that is 18pt and larger, or 14pt and larger if it is bold. The color contrast standard for large text is a foreground: background color contrast ratio of at least 3:1. Regular text must have a foreground: background color contrast ratio of contrast ratio of at least 4.5:1. In other words, the smaller the text, the greater the color the contrast must be in order to pass WCAG 2.0 standards.
Headers
The USDOT Web Design System utilizes semantic HTML, which includes <main>, <article>, <section>, <aside>, <header>, <navigation>, and <footer> elements. Each element should begin with and contain one <h1> header tag, and additional header tags should follow a structured and logical order. Content authored in the Content Management System, however, should use <h2> tags and below; (<h3>, <h4>, etc.) and should not contain <h1> tags. The <h1> tag is autogenerated for the page title when content is authored.
All HTML headings, <h1> through <h6>, are available as described below.
| Transportation.gov | OA Sites |
|---|---|
|
H1: 36px Lato Bold #133466 |
H1: 30px Open Sans 600 #194178 |
| Build America | USMMA |
|---|---|
|
H1: 32px Raleway 700 #0D5384 |
H1: 50px Quantico Bold #173363 |
Inline Elements
This is a paragraph.
This is a text link.
Strong is used to indicate strong importance.
This text has added emphasis using the <em> tag.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation. The <u> element should rarely, if ever, be used; links should be the only underlined text for accessibility purposes.
This text is deleted and This text is inserted.
Superscript®
Subscript for things like H2O.
This small text is small for fine print, etc.
Lists
- Unordered List
- Ordered List