> 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/panel.md).

# Panel

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

Panel creates a container that consists of three parts - an optional Header, a Body and an optional Footer. You can add other elements (such as rich text or graphics) to any of these containers.

## Properties

<table><thead><tr><th width="249">Property</th><th>Description</th></tr></thead><tbody><tr><td><em><strong>Show collapse button</strong></em></td><td>When toggled on, the Panel shows a small arrow to fold or unfold the block panel’s body depending on the condition (see'"Body is expanded when' property).</td></tr><tr><td><em><strong>Body is expanded when</strong></em> </td><td>This property becomes visible only when 'Shown collapse button' property is toggled on. By default, the expression contains the value 'true', which means that the body of the Panel is shown expanded by default. You can change the expression as you wish. In the end, the body will be expanded when the condition is true; when false, the body is collapsed by default. </td></tr><tr><td><em><strong>Appearance: Style context</strong></em></td><td>Bootstrap context color for the header and the outline of the panel.</td></tr><tr><td><em><strong>Appearance: Show header</strong></em></td><td>Toggle to show or hide the header container. This toggle is on by default. That is, the header is shown by default. </td></tr><tr><td><em><strong>Appearance: Show footer</strong></em></td><td>Toggle to show or hide the footer container. The footer is hidden by default. </td></tr><tr><td><em><strong>Appearance: Smart margin</strong></em></td><td>If you place a datagrid in the body of the panel and turn on Smart margin, the panel will remove additional whitespace around the datagrid.</td></tr><tr><td><em><strong>Appearance: Body height</strong></em></td><td>implicit, percentage, pixels:<br>implicit will adjusts the body height depending on the height of the inserted elements (dynamic). A value other then 0 will force the height to the given number of pixels or the ratio in percentages. You can change this when a value is added.</td></tr></tbody></table>

## Illustration

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

In the earlier page for the topic of Adaptive Columns, we had the use case for the Employee Management System (EMS) application of a company, in which the list of employees was shown  in a screen. And when one of the row was clicked, the employee details were shown in an overlay. Now let's try to design the employees overview screen, where we we show the list of employees as Repeaters, and use panels for each card. The final result is shown below.&#x20;

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

1\. In our example, we have the Repeater added to the Template Editor. Now, click on the 'Panel' icon, drag and drop it on the canvas at the place where you would like to insert it. In our example, we want the panel inside the Repeater.&#x20;

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

2\. Add a Label in the Header that concatenates the First and Last name fields from the Data model and set the Heading type as 'h2'. Add Forms for the fields needed in the body.&#x20;

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

3\. Set the 'Show footer' toggle 'on' in the Properties pane. That will show the Footer container in the Panel. Add the necessary Buttons in the Footer. Save the Template Editor and Preview.&#x20;

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

##


---

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

```
GET https://docs.wem.io/platform/template-editor/layout/panel.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.