# UI elements 

### **Text** <a href="#od_a86e0fe5" id="od_a86e0fe5"></a>

Add titles, headings, and descriptions to your reports using text.&#x20;

#### **Add Text**

Select the ![](https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FsrKnewnOhFVLYiX7KK2m%2Fimage.png?alt=media\&token=914467ee-c7e7-42e4-9beb-1b749ebe8243) icon from left toolbar.

Click on the canvas to place a box

Fill up the blanks with your text.

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/0f703a38-de35-520f-b264-c512a2250000)

#### **Style Text**

1. Select the text you want to use.
2. Change the font, size, color, alignment, overflow settings, border settings and other properties of the text in the toolbar underneath

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/01324194-7f58-5211-a7b8-47a8b9b50000)

### **Shape** <a href="#od_bc5f5413" id="od_bc5f5413"></a>

Shape is used to visually separate data components, banners, and other graphical effects

**Add Shape**

1. Select the **Shape** icon from the toolbar to create a shape
2. Square
3. Triangle
4. Octagon
5. Oval / Circle

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/e9a1e568-5838-5e6c-a2c5-49c8e1450000)

On the canvas, click to place a box where you want the shape to appear.

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/1b4ff947-1968-55b3-b3aa-b5d10b150000)

#### **Style a shape**

To adjust the shape’s look, use the shape **Style** toolbar underneath the shape

1. **Shape tyle:** change type of shape
2. **Border style:** include solid, dashed, dotted
3. **Border color:** remove or set colors for border
4. **Shape color:** choose colors for shape
5. **Border**

* Border weight: set the lightness or thickness for the border.
* Border radius: make rounded corners for shapes
* Style and color of border

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/e3e18de3-08c5-5a7f-9b20-0f7128f50000)

### **Image** <a href="#od_82bb69ae" id="od_82bb69ae"></a>

Images are used to add logos and pictures to your dashboard

#### **Add an image**

Select the ![](https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FL5W1JPHRVhwvk4H9E1R9%2Fimage.png?alt=media\&token=ce39e8aa-7f38-40a5-aa2a-ecd3f5daaa51) icon from the toolbar.

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/f62c82a6-edde-5a12-8c3a-c1402e150000)

Choose the type of image you would like to upload.\
**From URL link:** type in the URL for a web-based image.\
**Upload from your computer:** choose an image from your hard drive and insert it into the canvas.

On the canvas, place a box where you want the image to display. The image’s size is determined by the size of the box.

**Choose image size type.**

**Fit:** The image is sized automatically to fit the frame (the image ratio will change depending on the frame size)\
**Contain:** The image is scaled to maintain its aspect ratio.\
**Cover:** The image is sized to maintain its aspect ratio while filling the frame

**Style image with background color and border radius option**