# 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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.dataflake.co/dashboard/ui-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.