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
Executive Director, Center of Regenerative Medicine
- Phone: 314-362-8890
- Email: abowman@wustl.edu
Aaron DiAntonio, MD, PhD
Alan A and Edith L Wolff Professor of Developmental Biology
- Phone: 314-362-9925
- Email: diantonio@wustl.edu
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
Danforth Campus
- Physical Address: Anheuser-Busch Hall, St. Louis, MO 63105, USA
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
Medical Campus
- Physical Address: 425 S Euclid Ave, St. Louis, Missouri 63110, USA
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
Danforth Campus
- Physical Address: Graham Chapel, St. Louis, MO 63105, USA
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
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.