> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/template-editor/layout/div.md).

# Div

## ![](/files/gmy1vyBD5XFrxryHNVuu) Introduction

A Div creates a simple container on the user interaction screen with a color. You can add text or other elements and optionally add an OnClick action. The Div can also be provided with a tooltip. 

## Properties

<table><thead><tr><th width="249">Property</th><th>Description</th></tr></thead><tbody><tr><td><em><strong>Behavior: On click</strong></em></td><td><p>This property can be used to indicate what should happen when you click on the Div. There are five options possible:</p><ul><li>Refresh screen</li><li>Execute flowchart</li><li>Button exit - can be used to define an exit, just like how you would do for a Button, to be used in the parent flowchart. </li><li>Do nothing (default)</li></ul></td></tr><tr><td><em><strong>Appearance: Style</strong></em><a href="#style"><em><strong>*</strong></em></a></td><td>Using this property, the Div can be configured to have one of 4 colors, based on the definitions in the CSS of the chosen Design Template for the specific project. The 4 colors are 'fixed', in the sense that they are based on the Design template and therefore cannot be changed in the Template Editor.</td></tr><tr><td><em><strong>Tooltip</strong></em></td><td>Tooltips have already been covered in detail <a href="/pages/TDlRRf3TeDb2nheBfzY2">here</a>. Refer that page for further details on this property. </td></tr></tbody></table>

{% hint style="warning" %}

## \* <a href="#style" id="style"></a>

The color as shown in the Modeler Template Editor will NOT be the same when it is rendered in the Runtime (preview/staging/live). In Runtime, the Div will be rendered using the color-definition from the chosen Design Template on the specific portal; within the Modeler the Div will use the fixed pre-defined colors as defined in the Modeler CSS.
{% endhint %}

{% hint style="info" %}
A practical application of Div is in building a Kanban board, where you can have 4 different colored Div elements as sticky notes on the Kanban board, the colors representing different status. You can add text from various data fields into the Div.&#x20;
{% endhint %}

## Illustrations

{% hint style="info" %}
This illustration makes use of  [Label](/platform/template-editor/layout/label.md). Refer the linked page if you would like to learn more about these widgets.&#x20;
{% endhint %}

In the overlay window that we had created in the EMS use case from the last topic, Adaptive Columns, let's now try to use Div to put the profile pic within a container.

1\. In the Template Editor, click on the 'Div' icon, drag and drop it on the canvas at the place where you would like to insert it. In our example, we want the profile pic within a Div. So, insert the Div above or below the Label that contains the profile pic.&#x20;

<figure><img src="/files/DZ1ywr61AN8XQXSjrNb1" alt=""><figcaption></figcaption></figure>

2\. This inserts a Div of default Style = 1 (Read the 'Properties' section above for more information on this). Move the Label corresponding to the profile pic inside the Div. You can change the Style as needed. Save the Template Editor and Preview.&#x20;

<figure><img src="/files/QKR2XoDf4vb3UySPCHgo" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/H8YdsYsNrh8qfV91RKOf" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Note that the Div's color is different at Runtime than what is used on the modeler. Refer the 'Properties' section above to understand the reason behind this.&#x20;
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/template-editor/layout/div.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.