Try ShortPoint nowNOTEThis Design Element is still in development and will be released soon.This article shows how to use the Person Cards Design Element and lists all its features.
TABLE OF CONTENTS
Prerequisites
- You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
What Is Person Cards?
The Person Cards Design Element allows you to feature your team in a creative and informative way. Available from ShortPoint SPFx version 8.6.0.0 or later, you'll be able to enjoy this Design Element and so much more.
The Person Cards Design Element lets you add the images, roles, emails, phone numbers, and LinkedIn profiles of your team members.
And what makes it special is its flexibility to add as many Person Cards as you wish, allowing you to feature all members of your team.
The design of the Person Cards is also up to you. You can customize the colors, size, background, and so much more.
Interactive Tutorial
Click Get Started to learn how to customize the Person Cards Design Element:
NOTETo learn more about the features you can customize for Person Cards, check out Person Cards Features.
Step-by-step Tutorial
Follow the detailed guide below to start using Person Cards:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit.
- Close the Toolbox:
- Click the Edit properties icon:
Step 2: Insert the Person Cards Design Element
- Choose where you want to add Person Cards and click the plus icon:
- Use the search box to look for Steps and click it:
Step 3: Add content
- Go to the Items tab.
- Click Add New to add a Step:
- Select the cogwheel icon:
- Customize the content according to your preferences.
- Click the back icon:
- Repeat the same steps if you need to add more steps.
NOTEYou can also connect the Person Cards Design Element to external or internal sources to create dynamic content. To learn how, check out ShortPoint Connect: Basic Tutorial.
Step 4: Customize the Style
- Select the Person Cards style you want to use.
Step 5: Customize the Design
- Go to the Design tab.
- Customize the look of the Person Cards according to your preferences.
- Once satisfied, click the green check mark.
NOTETo learn more about the features you can customize for Person Cards, check out Person Cards Features.
Step 6: Save
- Click the eye icon to see your page in real-time:
- Save your changes:
That's it! You can now creatively showcase members of your team using the Person Cards Design Element.
Person Cards Features
Below are the options you can find in the Person Cards Settings window
A. Style Tab
The Style tab allows you to choose the style of the Person Cards.
B. Items Tab
The Items tab allows you to add new items and organize the content inside the Person Cards. It has the following options:
 | Add New | allows you to add a new item. |
 | Drag icon | allows you to rearrange the items. |
 | Duplicate icon | allows you to copy an item. |
 | Cogwheel icon | allows you to edit the content of an item. See the table below to see the options you can find inside. |
 | Trash icon | allows you to remove an item. |
COGWHEEL ICON OPTIONS
 | Image URL | allows you to choose the image to be shown. To do this, you can add the URL or click the folder icon. |
 | Name | allows you to add the employee's name. |
 | Position | allows you to add the role title. |
 | Link Label | allows you to modify the label for the link. |
 | Link URL | allows you to add a clickable link. |
 | Linking Option | allows you to specify how the link will be opened. You can choose from the following:
|
 | Department | allows you to add a Department. |
 | Email | allows you to add an email. |
 | Phone | allows you to add a phone number. |
 | Profile | allows you to add a LinkedIn profile. |
C. Design Tab
The Design tab allows you to customize how the Person Cards will look. It has the following options:
SETTINGS
 | Color | allows you to modify the primary color of the Person Cards. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker. |
 | Link Label | allows you to modify the label for the link. |
 | Image Height | allows you to adjust the height of the image in px, %, or em. |
CONTENT
 | Name Size | allows you to adjust the size of the Title in px or em. |
 | Role Size | allows you to adjust the size of the role. |
 | Link Size | allows you to adjust the size of the Link in px or em. |
BACKGROUND SETTINGS
 | Roundness | allows you to adjust the roundness value of the Person Cards. |
D. Advanced Tab
The Advanced tab allows you to customize the margin values around the Person Cards Design Element. It has the following options:
 | Margin Top | allows you to adjust the top margin value in px, %, or em. |
 | Margin Right | allows you to adjust the right margin value in px, %, or em. |
 | Margin Bottom | allows you to adjust the bottom margin value in px, %, or em. |
 | Margin Left | allows you to adjust the left margin value in px, %, or em. |
E. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and JavaScript code to customize the Person Cards Element.
NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.
NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.
Related articles:
