Jump to: PPI: List | PPI: Grid | PPI: Individual
 

People, Places, and Items, also known as PPI, is a container that organizes and displays a collection of information and media categorized as people, places, or items. Information can be presented in List View, Grid View, or as a Single element.

Design Considerations

PPI is designed to display a variety of essential information within its small area (a card). The clickable elements allow users to explore further.

Icons save space within the cards and help users quickly process the available information: a phone or envelope icon indicates phone number or email address, and social media icons link to their respective pages. 

Component Options

The array of PPI display options provides for the inclusion of varied amounts of data. Input fields vary depending on whether the selection is a person, a place, or an item.

People

  • Options: Name, Phone, Email, Fax, Social Media URLs, Brief Description, External URL, and Summary

Places

  • Options: Brief Description, Summary, External URL, Address, Phone, Fax

Items

  • Options: Brief Description, External URL, Summary

Best Practices

  • Use PPI when you need to organize a large group of people, places, or items.
  • When inputting data for PPI, use the data fields consistently so that the resulting cards have a unified look and UX.
  • Use the same image size and aspect ratio for each element’s featured image. The minimum recommended size is 280 x 386.
  • Organize new People, Places, or Items into categories, and be sure to select the appropriate category for each new addition.

PPI: List

PPI: List containers display a specific PPI type or group as a list on a website. In List view, each element of the group appears on its own row and spans the full width of the browser.

Example

Angela Bowman, PhD

Angela Bowman, PhD

Executive Director, Center of Regenerative Medicine

Aaron DiAntonio, MD, PhD

Aaron DiAntonio, MD, PhD

Alan A and Edith L Wolff Professor of Developmental Biology


Best Practices

  • Use a PPI List when you have few items to display within PPI.
  • Also use PPI when a lot of text appears in the Brief Description and Summary fields.

PPI: Grid

Grid containers display a specific PPI type or group as a grid on a website. In Grid view, elements of the group display side-by-side rather than on separate rows. Elements can appear in a two-, three-, or four-vertical columns grid view.

Example

Anheuser-Busch Hall

Anheuser-Busch Hall

Danforth Campus

Anheuser-Busch Hall, on which construction began in 1995, became the new home of the School of Law in January 1997. The building, with 175,000 square feet of space, is constructed of Missouri Red Granite in the campus’ traditional Collegiate Gothic style. Within the building are several classrooms, library facilities, student computer laboratories, study areas and faculty offices.

BJC Institute of Health

BJC Institute of Health

Medical Campus

The 680,000 square-foot BJC Institute of Health (BJCIH) at Washington University School of Medicine is an 11-story research building housing laboratories and research support facilities.

Graham Chapel

Graham Chapel

Danforth Campus

Graham Memorial Chapel was gifted to Washington University in St. Louis by Christine Blair Graham as a memorial to her husband, Benjamin Brown Graham. Graham Chapel was dedicated in 1909 and is now used for concerts, plays and the university’s lecture program, the Assembly Series.


Best Practices

  • Use PPI Grid when you have a lot of items to display within PPI.
  • When adding PPI to pages with a sidebar, use only two or three items per row.

PPI: Individual

PPI Individual containers display only one element of a PPI type (People, Places, or Items).

Example

Geology of National Parks

Geology of National Parks

Earth and Planetary Sciences 118A

Survey of geologic processes occurring at the Earth’s surface and its interior using national parks and monuments as the prime venue for presentation. Volcanism and mountain-building; the work of streams, glaciers, and wind; lake and coastline development; stratigraphy and sedimentation; and Earth history. Material presented in a geographic context, with emphasis on landforms and landscape evolution, relating geology to the development and settlement of the U.S.


Best Practices

  • Use PPI Individual to highlight a specific person, place or thing on a page.
  • This element will show only one PPI item and is often paired with a second PPI element to show the remainder of the group.