Templates
Patterns for commonly used webpages and forms on vets.gov
Content Templates
Topic Landing
Topic landing pages introduce main site areas. The template includes a brief introduction and card navigation linking to secondary content. It may also include quick links and help or contact information specific to the topic.
Detailed Landing
Detailed landing pages communicate an overview of secondary information with links to faceted content. The template utilizes list style navigation and may include callout boxes, quick links and help or contact information specific to the topic.
Panel Filter
Panel filter pages help visitors quickly identify content paths that are relevant to their specific circumstances. The template includes definition blocks that function as a filtering mechanism.
Action Pages
Action pages provide in-depth detail on particular topics and should help visitors to feel confident in taking next steps or accessing calls-to-action as needed. The template may also include definition blocks, Callout boxes and help or contact information specific to the topic.
Information Pages
Information pages include an introduction and supporting body copy.
Process Pages
Process pages support visitors through complex workflows and set them up for successful engagement with VA process. The template utilizes a process list and may also include list form navigation.
Form Templates
- Component Element
- Component Description
- Component Code
- Component 508
Grid
This 12-column, responsive grid provides structure for website content.
Grid Examples
One Half
Georgia is a state located in the southeastern United States. It was established in 1732 and was the last of the original Thirteen Colonies. Named after King George II of Great Britain, Georgia was the fourth state to ratify the United States Constitution, on January 2, 1788. Georgia declared its secession from the Union on January 19, 1861, and was one of the original seven Confederate states. Georgia was the last state to be restored to the Union, on July 15, 1870. Georgia is the 24th largest and the 8th most populous of the 50 United States.
One Half
Michigan is a state in the Great Lakes region of the Midwestern United States. The name Michigan is the French form of the Ojibwa word mishigamaa, meaning "large water" or "large lake". Michigan is the tenth most populous state, with the 11th most extensive total area (the largest state by total area east of the Mississippi River). Its capital is Lansing, and the largest city is Detroit. Michigan is the only state to consist of two peninsulas. A person in the state is never more than six miles from a natural water source or 85 miles from a Great Lakes shoreline.
One Third
Maryland is a state located in the Mid-Atlantic region of the United States, bordering Virginia, West Virginia, and Washington, D.C. to its south and west; Pennsylvania to its north; and Delaware to its east.
One Third
Massachusetts is a state in the northeastern United States, bordered by Rhode Island and Connecticut to the south, New York to the west, Vermont and New Hampshire to the north, and the Atlantic Ocean to the east.
One Third
North Carolina is a state in the Southeastern United States. North Carolina borders South Carolina and Georgia to the south, Tennessee to the west, Virginia to the north, and the Atlantic Ocean to the east.
One Fourth
California is a state located on the West Coast of the United States. It is the most populous U.S. state, with 38 million people, and the third largest state by area (after Alaska and Texas).
One Fourth
Illinois is a state in the Midwestern United States. It is the 5th most populous state and 25th largest state in terms of land area, and is often noted as a microcosm of the entire country.
One Fourth
Maine is a state in the New England region of the northeastern United States. In spite of its maritime position, it has a continental climate even in coastal cities such as its largest city Portland.
One Fourth
Indiana is a U.S. state located in the midwestern and Great Lakes regions of North America. Indiana is the 38th largest by area and the 16th most populous of the 50 United States.
Two Thirds
Oregon is a state in the Pacific Northwest of the United States. Oregon is bordered on the west by the Pacific Ocean, on the north by Washington, on the south by California, on the east by Idaho, and on the southeast by Nevada. The Columbia River delineates much of Oregon's northern boundary, and the Snake River delineates much of the eastern boundary. It is one of only three states of the contiguous United States to have a coastline on the Pacific Ocean. The capital of Oregon is Salem, the second most populous of its cities, with 160,614 residents (2013 estimate).
One Third
Minnesota is a state in the Midwestern United States. Minnesota was admitted as the 32nd state on May 11, 1858, created from the eastern half of the Minnesota Territory. Its name comes from the Dakota word for "clear blue water".
One Half
Virginia, is a U.S. state located in the South Atlantic region of the United States. Virginia, formally the Commonwealth of Virginia, is nicknamed the "Old Dominion" due to its status as the first colonial possession established in mainland British America, and "Mother of Presidents" because eight U.S. presidents were born there, more than any other state. The geography and climate of the Commonwealth are shaped by the Blue Ridge Mountains and the Chesapeake Bay, which provide habitat for much of its flora and fauna.
One Fourth
New York is a state in the Northeastern and Mid-Atlantic regions of the United States. New York is the twenty-seventh-most extensive, the fourth-most populous, and the seventh-most densely populated of the 50 United States.
One Fourth
Washington, D.C. is the capital of the United States, bordered by the states of Maryland and Virginia. Formally known as the District of Columbia, it is also commonly referred to as "Washington", "the District", or simply "D.C."
Implementation
To use the grid, wrap each grid row in a <div> with the usa-grid class. To use a grid without padding on the right and left, use the usa-grid-full class instead.
Each grid item is written semantically by its width. For example: usa-width-one-half = 1/2 grid item, usa-width-two-thirds = 2/3 grid item.
Medium breakpoints are used for 1/6 and 1/12 grid items, which both transform into a 1/3 grid item at medium screen sizes.
All grid items are full-width at small screen sizes.
Accessibility
- Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout.
Usability
When to use
- Almost always use a grid layout — visitors can read more quickly on pages that use grids. Choose a single grid system for your entire site.
When to consider something else
- Avoid mixing this grid and other grid systems.
Guidance
- Choose a 12-column grid with flexible column widths and fixed gutters. The width of the padding on the left and right edge of the grid depends on device size.
- Avoid text lines longer than 75 characters. Place text in narrower grid boxes to keep text lines from becoming too wide.
Footer
- Component Element
- Component Description
- Component Code
- Component 508