...
Link to figma doc with component if it exists
Screenshot
...
Screenshots
Card with no bio, intro text centered
| Card with bio, text left-aligned
|
Card with CTA hidden and name linked instead
| Card with image overlap
|
Use Cases
Use Case 1
Weikel speakers and other profile pages that include individuals not in our directory.
...
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
...
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.
...
The person's department or company goes here. This field is added to the position line (Position, Organization).
Email Address
...
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.
...
Add a footnote or button(s) below the block.
Configuration
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.
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.
...
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
Additional Notes
The columns are automatically set at
...
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 7/8/2021, the email and phone number are on the same line, (6/25/2021) order for circle image (if background is white, then the person gets cut off weirdly))and Large set to 0.