• Special Publication:  Public Website Visual Style Guide
  • August 2015

Page Templates

Use these page templates to create consistently structured webpages. The website has three major template types:

  • Base: this template is the foundation for both the "Detail" and "Landing" templates as well as being used for the "page" post type.
  • Detail: this template is used to display specific entry material like blog entries, speeches, press releases, videos, etc. Any content type that has multiple entries uses this template to display an individual entry.
  • Home: this template is used specifically for the website's home page.
  • Landing: this template has several sub-template designs and is used to display links to multiple content type entries. The sub-templates are:
    • Faceted List with Hero
    • Grid with Hero
    • List with Hero
  • Search Results: this template is used specifically for the website's search results page.

Templates use the same structure and tags but are drawn and styled based on a class assigned to the <div> tag inside the <main> tag. See the "Base Template" code pattern below for a complete template. The remaining code patterns should replace the Base Template's <main> tag and everything in it.

Code Patterns

Expand or close the following content.Base Template

Expand or close the following content.Detail Template

Expand or close the following content.Landing Template — Faceted List with Hero

Expand or close the following content.Landing Template — Grid with Hero

Expand or close the following content.Landing Template — List with Hero