Design

Component Library

Link to figma doc with component if it exists

Screenshots

Use Cases

Use Case 1

Weikel speakers and other pages that include individuals not in our directory. 

Use Case 2

Contact Us pages with biographies or other custom content not found in directory data, such as Global Programs/Study Abroad Contact page.

Use Case 3

Feature a few board members, center directors, or faculty members on a program page, such as the Finance Major page or the FTMBA SHR Specialization page.

Fields

Add/Edit Cards

Name

The person's name is an h3 header in red

Image

Use square images or stylized cutout headshots (also a square shape) available in the WP media library

Tip: When you go to insert the first image in the first card, insert all of the images you want at once, and a card for each image will be automatically created.

Crop image to circle? 

Choose yes or no, default is yes. Choose no when using a stylized cutout headshot.

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 or company goes here. This field is added to the position line (Position, Organization).

Email Address

Phone Number

Other Supporting Detail

This field appears above the email address. If there no other detail is needed, it's fine to leave empty.

Description

Use for a biography or portfolio. If there is no biography, it's fine to leave empty.

Link

Multiple links can be added*; link to the person's profile in the directory, LinkedIn profile, their presentation video, etc.

*Note: if using the "Hide CTA and link name?" field detailed below, only add one link to each card.

Introduction

Add a heading and supporting copy above the cards.

Footer

Add a footnote or button(s) below the block.

Configuration

Center intro text and buttons?

Choose yes or no, default is no. 

Setting this field to true will NOT center text in the main card body, as it is not recommended to center paragraphs of text. If you do need to center the main content, add "text-center" class to Block Wrapper Class(es). You will need to also set this field to yes if you want all text in the cards to be centered.

Overlap image with top card edge?

Choose yes or no, default is no. 

Do not use with swiper option (card overflow is hidden, so the photos will get cut off). Only use with circle cropped images or stylized cut-out headshots.

Block wrapper classes

Anchor Id

Add an Id to target the block on the page with an anchor link

Enable swiper

Choose yes or no, default is no.

Creates a swiper layout, rather than the standard grid layout with columns and rows.

10 card limit for the swiper, due to the width of swiper control arrows on mobile.

Note that this setting doesn't work with the standard column controls on this block. Rather, columns are fixed in the code for XS, S, M, and L viewports and you can set columns for XL screens with the next field.

Swiper Columns

Choose how many cards/columns display on XL screens – 3 or 4 columns. See which option looks best with the card content, typically cards with more content look better in 3 columns.

Hide CTA and link Name instead?

Choose yes or no, default is no.

Use when the card link goes to a person's profile page, whether in the WSB directory, LinkedIn, etc. and the name makes sense as link text.

Use sparingly. Make sure you have added exactly one item to the link field for each card.

Column Structure

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 should be set to 2 and Large set to 0.