Skip to main content
UMDDesign System

Templates

Templates in the Design System show a variety of page layouts and recommended combinations of components. Our example pages include a sidebar that shows the components used with links to pertinent documentation.

View the examples below to find inspiration for your own site’s pages. 

home page example

Homepages

Home pages are the front door of your website. A home page should be the most dynamic and visual page on the site. It may share many of the same components as a Landing Page, but it should have a larger hero or more visual components. When deciding what content to feature on a home page, consider the most important sections of the site for your audiences as well as which sections you would like to drive users to.

Examples
Landing page template - Provost Initiatives

Landing Pages

Landing pages are the top-level pages on a site, accessible from the main navigation. They are meant to direct users to the deeper pages of a site and have the largest variety of components available for use. As a result, there are many ways to lay out a landing page.

Examples
Image of website with a spotlighted person and 6 smaller cards with people, names, titles

People Pages

The People Grid options show ways to layout People Cards. Horizontal options are a great option for just a few people, while a vertical option might work better for multiple cards. There are also smaller table row options if just a name and contact information need to be shown.

The Person Bio displays background biographical details about a person. Other components such as accordions, images and quotes may be used on this page.

Examples
Interior detail template

Interior & Article Pages

Interior Pages are deeper level pages that may sit under a Landing Page. They tend to be more content (text) heavy than landing pages. They can include left navigation or not. If they are not linked from the main navigation drop downs, use of left navigation is recommended. It is recommended that interior pages use a smaller subset of components than landing pages, as the main intent of interior pages is deeper content as opposed to sending users to additional pages.

Examples

Launched in the design system