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
Lilianna Solnica-Krezel, PhD
Alan A and Edith L Wolff Distinguished Professor and Head of Developmental Biology
- Phone: 314-362-8768
- Email: solnical@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
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.