# Components

{% hint style="info" %}
**What's a component?** A component is a pre-built implementation of a frequently-used document element. Users can freely drag-and-drop components to easily create a template.
{% endhint %}

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FIPuzKiHGsKsx4hyPQ3xr%2F20250423_102422.png?alt=media&#x26;token=18414d68-5713-43df-b2f7-40f2fcac1c6d" alt=""><figcaption></figcaption></figure>

1. Click `Component` to go to the Component Panel.

***

<div align="left"><figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2F82sTCQ0oET6Exx5FVsc4%2F20250423_102528.png?alt=media&#x26;token=4d08063b-0eec-469a-a330-d694ecaeeabe" alt=""><figcaption></figcaption></figure></div>

2. Click `Add component`.

***

<div align="left"><figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FFgc4J1hFYJylFH78ZJ4Y%2F20250423_102617.png?alt=media&#x26;token=a8d8a914-5db1-490a-a28b-24431a30fe35" alt=""><figcaption></figcaption></figure></div>

3. Click the desired component to add it to your template.

<table><thead><tr><th width="272.3333333333333">Component</th><th width="371">Description</th><th data-hidden>Comment</th></tr></thead><tbody><tr><td>Title</td><td>A title to display in your documents.</td><td></td></tr><tr><td>Paragraph</td><td>You can freely enter text together with data from fields.</td><td></td></tr><tr><td>Image</td><td>You can upload images.</td><td></td></tr><tr><td>Empty</td><td>A blank space between components.</td><td></td></tr><tr><td>Divider</td><td>A horizontal dividing line.</td><td></td></tr><tr><td>Table</td><td>Adds an empty table with a default four columns and three rows. You can adjust this later.</td><td></td></tr><tr><td>Related List</td><td>Displays data from a related object in the form of a table.</td><td></td></tr><tr><td>Page Header</td><td>Header of the document</td><td></td></tr><tr><td>Page Footer</td><td>Footer of the document</td><td></td></tr><tr><td>Attachement</td><td>List of Attachments</td><td></td></tr><tr><td>Signature</td><td>Enter or Upload Signature</td><td></td></tr><tr><td>Custom Component</td><td>Custom Component (VFP)</td><td></td></tr></tbody></table>

***

<div align="left"><figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FP9xNGdWc0QDog2zL01gV%2F%EC%A0%9C%EB%AA%A9-%EC%97%86%EB%8A%94-%EB%8F%99%EC%98%81%EC%83%81-Clipchamp%EB%A1%9C-%EC%A0%9C%EC%9E%91%20(1).gif?alt=media&#x26;token=bdfe703b-7a8a-4382-8eca-595f2abf2409" alt=""><figcaption></figcaption></figure></div>

4. Drag and drop a Component to the desired position in the list.