People

An office's team, its leaders, its contacts and each person's bio. All from CMU's standard template; nothing here needs the kit.

Team Grid

A grid of the people in an office, each with a portrait, their name, their title and a link to their full bio, as on Enrollment Management's Our Team page. It's a grid column4 boxes (or column3), with an optional <h1> for the group. Use portraits of the same shape (Enrollment Management's are 560 × 800) so the names line up.

grid column4 boxes, cta

Say "Read Full Bio" the same way on every card. With no bio pages, leave out the links and the cta.

Leadership Grid

Square photos with each person's name and title centered under them, on a gray band, as on Human Resources' annual report. 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

A card for each person with their photo, name, title and how to reach them, grouped by team, as on Campus Design and Facility Development's About page. 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 (CDFD's are 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 addresses in a span.protect, written andrewid(through)andrew.cmu.edu, which the template's script turns into an email link, as on a bio page.

grid column3 grey boxes, rule-bottom, protect

Bio Page

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 written as andrewid(through)andrew.cmu.edu in a span.protect, which the template's script turns into an email link, so the plain address never appears in the page for spammers to collect.
• Contact is a collapsed heading, like the FAQ's.

floatleft caption thumb, contact, address, protect