Skip to main content
UMDDesign System

Templates

Templates are page layouts, or combinations of components. View the examples below to find inspiration for your own site’s pages. 

web page examples showing 2 home pages. Left one has graduates and text "What Does it Take to Change the World", Also part of a stat shows; Right example shows "Celebrating our Terp graduates", watercolor image of a turtle

Homepage

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
Thumbnail showing landing pages - left page shows large photo of students, stats; right page shows who we are on a background image, freshman applicants title next to campus photo

Landing Page

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
interior landing templates - shows federal relations page and a donor stories page

Interior 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
People Grid

People - Lists and Bios

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