People

Who's who: team and leadership grids, contact cards, a bio page and a list of people in an app.

Team Grid Template

A grid of the people in an office, each with a portrait, their name, their title and a link to their full bio. It's a grid column4 boxes (or column3), with an optional <h1> for the group. Use portraits of the same shape so the names line up; square ones keep the cards short.

grid column4 boxes, cta

With no bio pages, leave out the links and the call to action.

Leadership Grid Template

Square photos with each person's name and title centered under them, on a gray band. Use it to introduce a few leaders on an overview page, without links to bios. It's a grid column3 grey boxes; center the text with the template's aligncenter rather than inline styles.

grid column3 grey boxes, aligncenter

Contact Cards Template

A card for each person with their photo, name, title and how to reach them, grouped by team. Each team is its own grid column3 grey boxes (or column4) with an <h1> and an id, so a sidebar link or the On This Page box can jump to it.

• Photos all the same shape, such as 3:2, before the heading rather than inside it, so screen readers don't read the photo as part of the name.
• Name | title in a rule-bottom heading, then the contact details.
• Email as an email link that names the person, such as "Email Andrew Carnegie."

grid column3 grey boxes, rule-bottom, data-cmu-email

Bio Page Template

One person's page: their portrait floated beside their name and title, a Contact link that opens to show their email address, then their bio. In Cascade it's the Bio page type, which writes all of this; the markup is for knowing the parts.

• The portrait is p.floatleft.caption.thumb around the image. It sits beside the name only when both are directly in the page's .content column, as here; anywhere else, the heading drops below it.
• The email address is an email link.
• Contact is a collapsed heading, like the FAQ's.

floatleft caption thumb, contact, address

People List App

A list of people with a small round headshot beside each name and title, for a directory, a team or the instructors of a course. With more than a screenful, put a search above it that matches names, titles and each row's data-keywords as people type, and a count under it. The filter is your app's script; try this one.

cmu-people, cmu-search-bar, cmu-results-count

Use a real photo cropped to a square; the kit makes it round. With no photo, leave the image out rather than showing a blank one. On a public page, show only people who've agreed to be listed.