--- title: Templates date: 2023-12-19T06:17:00-08:00 canonical_url: "https://designsystem.umd.edu/templates" section: Templates Home --- # 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](https://umd-design.transforms.svdcdn.com/production/images/homepage-template.jpg?w=1859&h=2662&auto=compress%2Cformat&fit=crop&crop=focalpoint&fp-x=0.5054&fp-y=0.0107&dm=1777474304&s=4301cd2ef17fd78a244527adb0d19f01) ## 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 [ Example General Homepage ](https://designsystem.umd.edu/template/generic-home-page) [ Example College Homepage ](https://designsystem.umd.edu/template/example-college-school-landing-page) [ Example Event Homepage ](https://designsystem.umd.edu/template/commencement) ![Landing page template - Provost Initiatives](https://umd-design.transforms.svdcdn.com/production/images/landing-template.jpg?w=1913&h=2827&auto=compress%2Cformat&fit=crop&crop=focalpoint&fp-x=0.5131&fp-y=0.0119&dm=1777474274&s=73a4bf902b66e737f2bc8be809ed55bc) ## 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 [ Simple Landing Page ](https://designsystem.umd.edu/template/general-landing) [ Text Based Landing Page ](https://designsystem.umd.edu/template/landing-interior-text) ![Image of website with a spotlighted person and 6 smaller cards with people, names, titles](https://umd-design.transforms.svdcdn.com/production/images/people-grid-template.jpg?w=1857&h=2334&auto=compress%2Cformat&fit=crop&crop=focalpoint&fp-x=0.5032&fp-y=0.0057&dm=1777474324&s=071848a672255262079617e733fb0e2e) ## 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 [ People Grid with Feature ](https://designsystem.umd.edu/template/people-page) [ Contact List ](https://designsystem.umd.edu/template/people-contact-list-ok-to-mei) ![Interior detail template](https://umd-design.transforms.svdcdn.com/production/images/interior-detail-template.jpg?w=1857&h=2305&auto=compress%2Cformat&fit=crop&crop=focalpoint&fp-x=0.5047&fp-y=0.0105&dm=1777474344&s=2fd828665596ed3d1541f8f74659b9c0) ## 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 [ Interior Page ](https://designsystem.umd.edu/template/interior) [ Interior with Navigation ](https://designsystem.umd.edu/template/interior-detail-vertical-spacing) [ Article Example ](https://designsystem.umd.edu/template/article-vertical-spacing) ## Launched in the design system [ ![Various screen views of ai.umd.edu](https://umd-design.transforms.svdcdn.com/production/images/web-mockup-screens-AI.jpg?w=1920&h=1440&auto=compress%2Cformat&fit=crop&dm=1775239744&s=c1470fde680bfa340bf30f7f94d4f152) ](https://ai.umd.edu) [ AI @UMD ](https://ai.umd.edu) [ ![Policies site](https://umd-design.transforms.svdcdn.com/production/images/policies.jpg?w=1920&h=1440&auto=compress%2Cformat&fit=crop&dm=1775595934&s=93caff15254f8169fe74ddc3c8369725) ](https://policies.umd.edu) [ University Policies ](https://policies.umd.edu) [ ![UMD website mockup](https://umd-design.transforms.svdcdn.com/production/images/umd-mockup.avif?w=3380&h=1892&auto=compress%2Cformat&fit=crop&dm=1775239883&s=2406487715eace47a9bb1c5b5ab821b5) ](https://umd.edu) [ UMD.edu ](https://umd.edu) [ ![Views of pages from Terp](https://umd-design.transforms.svdcdn.com/production/images/terp.webp?w=1600&h=1200&auto=compress%2Cformat&fit=crop&dm=1775239992&s=f30cd76d0bdbea7e1691564229418734) ](https://terp.umd.edu) [ Terp Magazine ](https://terp.umd.edu) [ ![Screens of the provost website](https://umd-design.transforms.svdcdn.com/production/images/provost.jpg?w=1920&h=1440&auto=compress%2Cformat&fit=crop&dm=1775241751&s=812b6cb914815f2a98ba041cd686f472) ](https://provost.umd.edu) [ Office of the Provost ](https://provost.umd.edu) [ ![View of screens from Maryland Today website](https://umd-design.transforms.svdcdn.com/production/images/today.jpg?w=1920&h=1440&auto=compress%2Cformat&fit=crop&dm=1775249469&s=d8c6fc5964568b023f373aea13460ad9) ](https://today.umd.edu) [ Maryland Today ](https://today.umd.edu)