UI Person

September 10, 2021
UI Person

UI Person

  1. Select image: Select an image from your media library. This is the image of the person.
  2. Image size: Choose the image size from the drop-down list.
  3. Name: Enter the person's name.
  4. Designation: Write the designation title of the person.
  5. Email: Enter the email address of the person.
  6. Content: You can give the person a brief or detailed description.
  7. Social items:
    - Clicking on the “+ Add Item” will let you add a new icon and will open up the relevant settings. 
    - You can select a social icon and enter a URL to the Link field if you want it to redirect to the official social channel of the person.

 

Card Settings

Card Settings

  1. Card style: Select the card style from the predefined options or create a custom style
    - For a custom style: you can set the background color and color of the card.
  2. Card size: You can choose between 2 size options (small or large)
Image Settings

Image settings

  1. Image appear: This field will allow you to adjust the desired position of the image. (Top, Inside, or bottom).
  2. Media margin: Set the vertical margin for the image. You can select one of the available options.
Name settings
Name settings
  1. Name tag: Choose a heading element.
  2. Name font: Choose the font for the name title.
  3. Title color: Set the color of the name title.
  4. Style: Select a style for the heading title.
  5. Icon / Image position: Set the position of the icon / image. 
  6. Title margin: Set the vertical margin of the title.
  7.  
Designation settings

Designation Settings

  1. Designation tag: Choose a designation element
  2. Designation font: Click the edit button to adjust the typography of the designation font from font family, font weight, font size, transform, style, decoration, line height, to letter spacing.
  3. Designation color: Set the color of the designation title
  4. Designation margin: set the vertical margin of designation title
Email settings

Email Settings

  1. Email tag: Choose a suitable tag element for the email address.
  2. Email font: Click the edit button to adjust the typography of the email font, including font family, font size, weight, transform, style, decoration, line-height, letter spacing.
  3. Email color: Set the color of the email address
  4. Email margin: Set the vertical margin of the email.
Social Settings

Social Settings

  1. Overlay position: Set the position of social overlay.
  2. Alignment: You can set the alignment of social icons in 3 different positions “Left”, “Right”, or “Center”. Select your desired alignment setting from the drop-down list of the field.
  3. Vertical social icon:  If yes, the social overlay will be displayed in a vertical manner.