When to Use This Component
Use the People Card when you want to highlight individual staff, faculty, or team members in a visually organized and consistent way. It is ideal for:
- Making contact easy: Providing clear contact details for users to reach the right person quickly.
- Staff directories: Displaying all members of a department or office in a clean layout.
- Team pages: Showcasing individual team members with their roles, photos, and contact information.
- Highlighting expertise: Featuring faculty or staff with special skills, achievements, or responsibilities.
Component Do’s & Don’ts
There might be a time when you don’t know whether to use a People Card component or not. Here are some examples of how to effectively use a People Card component and when you shouldn’t use one:
DO
When creating a People Card, include a professional photo by selecting clear, well-lit headshots to ensure a consistent and approachable look. Provide complete information for each individual, including their name, job title, department, and relevant contact details. Maintain consistency by using uniform formatting across all cards on the same page or section, and keep text concise so titles and descriptions remain easy to read. Finally, update the cards regularly to ensure that contact information, roles, and photos are current and accurate.
DON’T
When creating People Cards, avoid using casual or unprofessional photos, such as informal or low-quality images, to maintain a consistent and professional appearance. Only include staff members who are relevant to the department or team being displayed, and do not mix unrelated individuals. Additionally, ensure that all information is up to date, as outdated titles, emails, or phone numbers can confuse users and reduce the credibility of your page.
Component Design Options
Below are the People Card component design options, with explanations of each and guidance on proper usage.
EDITABLE PARTS:
- Block Heading:
- Show Block Heading: Option to turn off or on the header.
- Eyebrow Text (optional): An eyebrow text is a small line of text that appears above the title. Its purpose is to provide context, category information, or a subtle introduction to the main heading without drawing as much attention as the headline itself.
- Title (optional): A header title should clearly convey the blocks main topic, be visually prominent, and guide visitors through the content while maintaining readability and accessibility.
- Description (optional): The description provides a brief, clear summary that supports the header title and helps visitors quickly understand the block content.
- Button (optional): The button prompts users to take a specific action. Its text should be short, clear, and compelling, and the linked URL must be correct and active to ensure users reach the intended destination.
- Button Color: Green, Gold
- Block Options:
- Layout: 3-Up Grid, 4-Up Grid. How many cards appear per row based on the desired visual balance and available page space.
- Background Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the card color)
- Card Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the background color)
- Show Exposed Filters: Adds a search and filtering functionality for users. This feature allows visitors to either type in a name directly to find a specific person or use a dropdown menu to select from available categories or departments. By providing these filtering options, users can quickly narrow down their search and locate the staff member or team they are looking for, improving usability and making large directories much easier to navigate.
- Filter People: The People Card offers additional filtering options, allowing the site admin to customize how staff members are displayed:
- Filter by Manual Selection: Select individual staff members to display manually, giving complete control over which profiles appear.
- Filter by Category: Organize staff members by categories or departments. Selecting a specific category will display only the staff associated with that group.
- Filter by Tag: Organize staff members using tags. Selecting a specific tag will display only the staff members associated with that tag.
