# Content Elements ### Content Elements You can place any content element onto your template builder to get started. Here's a run-through of a few elements and how they work. Once you have placed your element, you control the properties of the element to adjust things like size, space, font, etc.

### Text Text elements allow you to add text content to your templates. Just drag and drop it onto your template builder to get started.

{% embed url="" %} We now have a rich text editor! This powerful tool offers a variety of features for formatting your content, such as different styles, font sizes, bullet points, and numbered lists. You can also paste rich text from other sources while maintaining its original formatting. Dive in and explore the exciting possibilities!

We currently offer the following fonts:


Arial	Arial Black	Brush Script MT	Comic Sans MS
Courier New	Courier Prime	Dancing Script	Georgia
Helvetica	Impact	Inter	Lato
Lucida Sans Unicode	Nunito	Montserrat	Open Sans
Playfair Display	PT Sans	PT Serif	Quicksand
Roboto	Sans Serif	Source Sans Pro	Tahoma
Times New Roman	Trebuchet MS	Verdana	Noto Sans Korean

And you can also pick one of the almost 2000 Google Fonts available. ### Google Fonts Documint provides native support for a wide range of Google Fonts, giving you flexibility to style your templates with clean, modern typography. To apply a Google Font: 1. Select the element you want to style. 2. Open the properties panel. 3. In the **Font** dropdown, click **More Google Fonts…** 4. Use the popup search to find and select the font that best fits your design.

### Image Image elements allow you to add images to your template. Just drag and drop it onto your canvas.

{% embed url="" %} You can add images from 3 sources: 1. Local file (from your computer) 2. URL 3. Dynamic #### 1. Local file

#### 2. URL ![](https://1903534506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTY5wPd81K7B5rjyG5tjS%2Fuploads%2FcWQTa2FK63Y5NuCj7poE%2Furl%20image.gif?alt=media\&token=e4a1650c-28de-4a34-ae71-449cf20b8cf8) #### 3. Dynamic ![](https://1903534506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTY5wPd81K7B5rjyG5tjS%2Fuploads%2Ff4ethZgPHppsxAyCol5M%2Fdynamic%20image.gif?alt=media\&token=7c2f5e91-0b43-4a3a-abcf-2b633dbdb3bb) ### Vertical Spacer Spacer elements allow you to add vertical space between elements

{% embed url="" %} ![](https://1903534506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTY5wPd81K7B5rjyG5tjS%2Fuploads%2FDhbG7fNFAMAWK8QUwErR%2Fspacer.gif?alt=media\&token=68c2bf6f-e15a-4e31-8c9d-566d1522a803) ### Page Break Page breaks allow you to force the content that follows to begin on a new page

{% embed url="" %} ![](https://1903534506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTY5wPd81K7B5rjyG5tjS%2Fuploads%2FxdzUMA2pGNgXy12fqMac%2Fpage%20break.gif?alt=media\&token=f5c036a5-8a6a-4358-9892-3f1c4db0c13b) ### Checkbox

{% embed url="" %} The checkbox element allows you to add and dynamically control whether it's checked or not from your data. It can be a static or dynamic element. You may set the checkbox label, position, size, and color of the text as you wish in the properties. To set your checkbox dynamically, you can set a field and a value, like so

{% hint style="info" %} Please note that when adding the Field Name to the checkbox element, you don't need to include the {{}} format. Example - `my_variable` NOT `{{my_variable}}` {% endhint %} ### Button

{% embed url="\_" %} The button element allows you to add and dynamically control a button to be clicked in your PDF and send the user to any URL. This can be a static or dynamic element. You may set the button label, position, size, and color as you wish in the properties. To set your button dynamically, you can set a field and a value, like so

{% hint style="info" %} The URL you add for the button, either static or from a variable, must start with **https\://** for example {% endhint %}

{% hint style="info" %} Please note that when adding variables to the button element, you don't need to include the {{}} format. Example - my\_variable NOT {{my\_variable}} {% endhint %} ### QR code

{% embed url="" %} The QR code element allows you to add and dynamically control a QR code in your PDF, which a mobile device can then scan. This can be a static or dynamic element. You can add text or URLs as the output when scanned. You may set the QR position, size, foreground, and background color as you wish in the properties. To set your QR dynamically, you can set a variable and a value, like so

{% hint style="info" %} Please note that when adding variables to the QR element you don't need to include the {{}} format. Example - my\_variable NOT {{my\_variable}} {% endhint %} **Example Value:** This value will be used in the designer value for variable QRCodes. It will only ever be shown in the template designer when editing your template and will not affect your documents. ### Barcode

{% embed url="" %} The barcode element allows you to add and dynamically control a barcode in your PDF, which a mobile device can then scan. This can be a static or dynamic element. You may set the barcode position, size, and color as you wish in the properties. There are several different barcode types available to suit your needs.

To set your barcode dynamically, you can set a variable and a value, like so

{% hint style="info" %} Please note that when adding variables to the barcode element, you don't need to include the {{}} format. Example - my\_variable NOT {{my\_variable}} {% endhint %} ### Properties Once you have placed your element, you control the properties of the element to adjust things like size, spacing, font, color, etc.