Skip to content
Alfred J Lin edited this page Jun 16, 2026 · 2 revisions

Design File

Figma link

Introduction

The person component is used to display information about an individual, such as a staff member or faculty. It supports three display variants suited for different contexts: a full biographical profile, a compact list entry, or a card.

Component Structure

Variants

There are three variants: Bio, List, and Card.

1. Bio

The default variant. Displays the full profile of an individual, including a description, contact details, and links. Best suited for individual profile pages or dedicated staff sections.

2. List

A compact variant intended for use in listings or directories. Displays essential contact information without a detailed bio.

3. Card

A card-style display for use within a multi-column layout. Displays the person's image, name, title, and a profile link.

Props

Field Data Type Requirement Description Note
Variant String Required The display variant of the component. Options: bio, list, card. Defaults to bio.
Heading Level String Required The HTML heading level for the person's name. Options: h2–h6. Defaults to h2. Choose based on the heading hierarchy of the page.
Component ID String Optional An ID for the component, useful for in-page anchor linking.

Slots

Field Data Type Requirement Description Note
Person Name String Required The full name of the person.
Person Title String Optional The person's job title or role.
Telephone Number String Optional The person's phone number. Include area code. Use dot separation format: 555.555.1212.
Email String Optional The person's email address.
Department String Optional The department the person belongs to.
Branch String Optional The branch or unit the person belongs to.
Pronouns String Optional The person's pronouns.
Office String Optional The person's office location.
Person Image Media Image URL Optional A photo of the person.
Person Image Alt Text String Conditional Alt text for the person's photo. Required if Person Image is used.
Profile Link Link Optional A link to the person's full profile page.
External Link Link Optional A link to an external profile (e.g., faculty page, personal site).
External Link Text String Conditional Display text for the external link. Required if External Link is used.
Bio Description WYSIWYG Optional A biographical description of the person. Primarily used in the Bio variant.

Clone this wiki locally