Person Listing example

Custom Title

What is an Person Listing?

The Person Listing component allows you to place person profile cards on a page. The Person Listing can be displayed either vertically or horizontally.

How to add an Person Listing 

  1. Click the edit link at the top of the page 

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 
  3. Click the plus icon.

    Example of the plus icon with a red square around the icon
  4. Select Person Listing  from the menu

    Choose a person listing from the menu

Content 

  1. Add the Title of the group you are creating.
    Note: Title field text is limited to 70 characters.

    Person listing title
  2. Start typing the name of the person(s) you would like to add in the person field.

    Add a person profile
  3. Click the Add another item to add additional persons. 
  4. Add another person profile
  5. You are able to reorder the person listing by clicking the all direction arrows.
     

Styles

  1. Toggle to the Styles tab. 

    Peron profile styles
  2. Select the appropriate Display option based on your desired layout. (See below for examples).

    Display as grid or list
  3. Select the amount of additional space you would like above the component. 
  4. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Top and bottom margin for people listings

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined

Style options

  1. Layout Options settings used to create this component are: Display as: Grid

Custom Title

  1. Layout Options settings used to create this component are: Display as: List

Custom Title