Card People

Design

Component Library

Link to figma doc with component if it exists

Screenshot

Use Cases

Use Case 1

A good component for Wekeil speakers and other profile pages.

Use Case 2

This a good block to use for Contact Us pages if they have a biography. The Sitecore Contact Us pages included an image, name, position, phone number, and email address. 

Fields

Image

Use images available in WP

Name

The person's name is an h3 header in red

Position

The person's position goes here. Since you are manually entering the data, you can use their working title instead of their actual title from the directory.

Organization

The person's department goes here. This field is added to the position (Position, Organization).

Email Address

The person's email address goes here. There is an email icon in front of the address.

Other Supporting Detail

This field appears above the email address. I have been using it for the phone number. If there no other detail is needed, it's fine to leave empty.

Description

I have been using this field for the person's biography. If there is no biography, it's fine to leave empty.

Link

Multiple links can be added to this field. I have been linking to the person's profile in the directory.

Additional Notes

The columns are automatically set at

Columns Default: 1

Columns Small: 0

Columns Medium: 3

Columns Large: 4

Columns Extra Large: 0

This is fine if there's no biography. If there is a biography, the columns Medium, Large, and Extra Large should be set to 2.

(Note: as of 6/25/2021, the email appears as email instead of name@wisc.edu, the text in the WYSIWYG is bold text, the button needs to be styled)