Components
The components option is located on the left side panel, users can change its appearance by clicking on the Collapse/Expand panel and the Move panel to right/left icon button.
Drag and drop these components to the persona board to start editing it.
Components are divided into 3 categories:
Text: Title & Content, Text Only, Tag, Demographic
Media: Avatar, Image
Graph: Continuous slider, Balance slider
![](../__attachments/2079359119/image-20240105-072200.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
When hover your mouse over the component, 3 options will appear:
Click on this icon and drag allow users to move the component across the persona board
Access to the component setting in this icon
Drag this icon to customize the component’s size
![](../__attachments/2079359119/image-20240105-075937.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Here are the details of each component:
Avatar
![](../__attachments/2079359119/Screenshot%202024-01-05%20at%2014.16.51.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Avatar allows users to:
Upload persona image
Enter persona name
Add sub-content for persona
Users can change the visibility of the Name and Sub-content by turning it on/off in the setting of the component.
The maximum size of the image is 2MB
Image
![](../__attachments/2079359119/image-20240105-092358.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Image allows users to upload persona image
The maximum size of the image is 2MB
Title & Content
![](../__attachments/2079359119/image-20240105-093133.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Title & Content provide a component that includes title and paragraph
Text only
![](../__attachments/2079359119/image-20240105-094014.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Text only allows users to create an only-content-text component
Tag
![](../__attachments/2079359119/image-20240105-094236.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Tag shows the highlighted key points of personas
These keywords also be shown with the created personas in the Persona hub
Demographic
![](../__attachments/2079359119/image-20240105-094700.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Demographic allows users to show and edit the persona's characteristics, including Age, Gender, Marital status, Income, and Occupation
Continuous slider
![](../__attachments/2079359119/image-20240105-095331.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Continuous slider allows users to create a component that can select a value along a subjective range
Users can add more options to the slider
Balance slider
![](../__attachments/2079359119/image-20240105-095443.png?inst-v=ca1e54ad-7fc2-4d7f-9bf8-5f2c5dd90b65)
Balance slider allows users to create a component that can show the ratio between two opposing attributes
Users can add more options to the slider