People

Who's who: grids of people, contact cards, stacked and short bios, a bio page, how Cascade writes them and a list of people in an app.

Team Grid Template

A grid of the people in an office, each in a white card with a portrait, their name, their title in bold and a link to their full bio. Put the cards on a color, such as blue, to set the group apart as one section of the page. It's a grid column4 boxes (or column3) with an <h1> for the group. Use portraits of the same shape so the names line up; square ones keep the cards short. With no bio pages, leave out the links and the call to action.

grid column4 boxes, a color, cta

In Cascade

1. Make a page for each person, all in one folder, with Add Content › Bio › Bio.
2. In that folder, use Add Content › Bio › Bio Index.
3. In its Bio Index section, choose Grid, then Card, and the number of columns. (Photo puts the names over the photos instead; see Photo Grid.)
4. Set Style to a color, such as Blue.

Initial Rows to Display holds the rest back behind a Load More button. For menus that narrow the list, see Filters.

Leadership Grid Template

Square photos with each person's name and title centered under them, on a gray band. It introduces 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 instead of 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

Stacked Bios Template

One person per row: a portrait, their name and title, a line about their work, a Read Full Bio link and Contact. It's for when a card isn't enough, such as each person's research area, or for a short list with the full bios shown in place. Each row is the bio page's top, with a rule between rows.

floatleft caption thumb, cta, contact, rule-bottom

Short Bios Template

A short bio for each person on one page, for a quick contact page or a group whose bios are a paragraph or two, such as an advisory board. Each person gets a band of their own, alternating gray and white, with a Contact link and their links in a box beside the bio. Photos are optional; leave them out unless everyone has one. Class years for alumni go after the name, in the template's indicia: <span class="indicia">(E 1990)</span>.

content, grey, contact, sidebar, darkgrey invert, list, indicia

Bio Page Template

One person's page: their portrait beside their name and title, a Contact link that opens to show how to reach them, their bio in short sections and a box of related links in the sidebar. In a CMS, the page type writes all of this; the markup is here to show the parts.

• The portrait is p.floatleft.caption.thumb around the image, about a third of the column. 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 title names the office or department after the job, such as “Director of Teaching Technology, Office of the Provost.”
• Contact is a collapsed heading, like the FAQ's. Inside, an <address> lists the email address as an email link with the class icon, and the phone and fax numbers with icon tel and icon fax. The template draws an icon beside each. A second <address> beside it gives the office.
• The bio gets an <h2> for each part that has something to say, such as Bio, Education, Research, Projects and Publications. Leave out the empty ones.
• Related links, such as a personal site or lab, go in a gray list box in the sidebar.

floatleft caption thumb, contact, address, icon, sidebar, list grey

In Cascade

Add Content › Bio › Bio. The page has a field for each part: the photo, name, title, contact details, each section of the bio and the related links.

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 instead of showing a blank one.