> ## Documentation Index
> Fetch the complete documentation index at: https://loops.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Sections

> Group blocks into reusable sections to structure your email layout.

Sections allow you to group blocks together and add styling options to the whole section at once. This makes card-style layouts much easier to build.

![A section in an email](https://mintcdn.com/loops/HbaIXgNSVDUaJ8TO/images/section-example.png?fit=max\&auto=format\&n=HbaIXgNSVDUaJ8TO\&q=85\&s=883fcf6187c88d2f1fbc21098f70d0db)

## Adding sections

Add sections:

* by using the section button in the editor toolbar
* by typing `/` in the editor and selecting **Section**
* by hovering over an existing element in your email and clicking the `+` plus icon on the left and selecting **Section**

> [!NOTE]
>
> Classic Outlook may render extra padding around sections due to its legacy rendering engine.

## Conditional sections

Sections can be shown or hidden for each recipient based on a [contact property](https://loops.so/docs/contacts/properties.md), [event property](https://loops.so/docs/events/properties.md), or [data variable](https://loops.so/docs/transactional.md#add-data-variables) value. This is useful for content that only applies to some people, like a plan-specific callout or a promo banner.

First, add a section to your email, then open the **Condition** panel in the editor sidebar.

![The Condition panel in the editor sidebar](https://mintcdn.com/loops/1Menr9hfWiBBIQMw/images/section-conditional.png?fit=max\&auto=format\&n=1Menr9hfWiBBIQMw\&q=85\&s=4e68a5e850137e5cde032407a3673fb6)

Set **Show when** to build a condition from up to three parts:

1. **Variable** — the field to check:
   * In campaigns and workflows, choose a [contact property](https://loops.so/docs/contacts/properties.md).
   * In workflows triggered by events, you can also choose an [event property](https://loops.so/docs/events/properties.md).
   * In [transactional emails](https://loops.so/docs/transactional.md), type the name of a [data variable](https://loops.so/docs/transactional.md#add-data-variables).
2. **Operator** — how to compare it (see below).
3. **Value** — what to compare against. Only shown for operators that need one, such as **Equals** or **Contains**.

For example, `email` / **Does not contain** / `loops.so` shows the section only for recipients whose email address does not contain `loops.so`.

Leave **Show when** blank to show the section to every recipient.

In transactional emails, you can create a new variable just for conditional sections, like `showPromo`. The data variable used does not need to be in the email content itself. Any condition-only data variables are accepted in the [Send transactional API call](https://loops.so/docs/api-reference/send-transactional-email.md) like regular data variables.

### Operators

The available operators depend on the variable's type. Data variables are always treated as text.

| Type | Operators |
| - | - |
| Text | Is not empty, Is empty, Equals, Does not equal, Contains, Does not contain |
| Number | Is not empty, Is empty, Equals, Does not equal, Greater than, Less than |
| Boolean | Is not empty, Is empty, Is true, Is false |

A missing or empty value never fails the send; it just hides the section, so condition variables are optional at send time.

> [!NOTE]
>
> Everything inside a hidden section is removed from the email, including any variables, arrays or links it contains.

Conditions can also be authored in [LMX](https://loops.so/docs/creating-emails/lmx.md#conditional-sections) with the `if`, `ifOperation`, and `ifValue` attributes.

## Clickable sections

Sections become clickable when you add a link in the **Link** editor panel, which is useful for:

* product cards
* account-summary callouts
* any layout where a section should link somewhere


## Related topics

- [LMX](https://loops.so/docs/creating-emails/lmx.md)
- [Footers](https://loops.so/docs/creating-emails/footers.md)
- [Supabase - Sync contacts](https://loops.so/docs/integrations/supabase/contact-sync.md)
- [Webflow integration](https://loops.so/docs/integrations/webflow.md)
- [Setting up your domain](https://loops.so/docs/sending-domain.md)