> For the complete documentation index, see [llms.txt](https://documentation.botghost.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.botghost.com/custom-commands-and-events/actions/message-actions/send-or-edit-a-message/layout.md).

# Layout

Layout components allow you to adjust the layout of a Components V2 message. There are four types of layout components:

| Component                 | Description                                  |
| ------------------------- | -------------------------------------------- |
| [Container](#container)   | Root container for components.               |
| [Section](#section)       | Text with required accessory (button/image). |
| [Separator](#separator)   | Visual divider between content.              |
| [Action row](#action-row) | Container for buttons (max 5)                |

***

## Container

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

Containers can be used to create a container around a collection of components. They can optionally have an accent color set or be a spoiler.

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

### Accent Color

Optionally enter the hex color of the accent bar. Any variables that return a hex color can be used here.

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

### Spoiler

If this value is set to `true`, the container will appear as a spoiler (blurred out). Defaults to false. Variables can be used here.

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

***

## Section

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

A section is a component that allows you to contextually associate up to three text components with either an thumbnail image or a button.&#x20;

<figure><img src="/files/7KuZDPjMpbnrrP7UlisH" alt=""><figcaption></figcaption></figure>

***

## Separator

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

Separators can be used to visually separate two components with vertical padding and an optional divider line.

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

### Spacing Size

Separators can have either small or large spacing size. Set this to `SMALL` to create a compact visual break. Set it to `LARGE` to create a more prominent divider. Variables that return either `SMALL` or `LARGE` can be used here. Defaults to small spacing.

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

### Show Divider Line

Set this to `true` to create a small divider line in between sections. Variables that return either `true` or `false` can be used here. Defaults to false.

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

***

## Action Row

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

Action rows are containers for components and can contain up to five buttons or a single select menu. A maximum of five can be present in a single message.

<figure><img src="/files/4cXIqBNrSk05K74PnLq9" alt=""><figcaption></figcaption></figure>
