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

# LMX

> Use Loops Markup Language for email content

<Warning>
  LMX and related Content API endpoints are currently in an open alpha and are subject to change.
</Warning>

LMX (Loops Markup Language) is an XML-based format for writing email content in Loops. Every piece of content is represented by an explicit PascalCase tag.

LMX can be used with the content API to create and update emails programmatically.

LMX sits between the API and our editor, making it possible to edit emails across both the editor and API.

## LMX examples

Here are some examples of how to use LMX tags to create emails.

```xml theme={"dark"}
<H1>Hello</H1>
<Paragraph>World</Paragraph>
```

**A list**

```xml theme={"dark"}
<H2>Release checklist</H2>
<OrderedList>
  <ListItem>Finish QA</ListItem>
  <ListItem>Prepare announcement</ListItem>
  <ListItem>Notify teams</ListItem>
</OrderedList>
```

**Two-column layout**

```xml theme={"dark"}
<Columns>
  <ColumnItem>
    <H3>Starter</H3>
    <Paragraph>Best for new projects.</Paragraph>
    <Button href="https://loops.so/pricing">Start free</Button>
  </ColumnItem>
  <ColumnItem>
    <H3>Pro</H3>
    <Paragraph>Advanced automation and analytics.</Paragraph>
    <Button href="https://loops.so/pricing">Upgrade</Button>
  </ColumnItem>
</Columns>
```

**Full email example**

```xml theme={"dark"}
<Style themeId="st_default"
  bodyColor="#1F2937"
  bodyYPadding="24" />
<Component componentId="logo" />
<H1>Hi {contact.firstName}, your weekly update is ready</H1>
<Paragraph fontSize="16" lineHeight="150">
  Here is your weekly account summary. Read <Link href="https://loops.so/docs">the docs</Link> for the full changelog.
</Paragraph>
<Button href="https://app.example.com/account/{contact.userId}" align="center" bgColor="#000000" textColor="#ffffff">
  Open dashboard, {contact.firstName}
</Button>
<Divider />
<H2>Top priorities</H2>
<OrderedList>
  <ListItem>Fix onboarding drop-off on step 2</ListItem>
  <ListItem>Publish changelog for API v2</ListItem>
  <ListItem>Review deliverability metrics</ListItem>
</OrderedList>
<Columns gap="24" widths="50,50" verticalAlignment="top">
  <ColumnItem>
    <H3>Docs</H3>
    <Paragraph>Start with the quickstart.</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Image src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg" dynamicSrc="{contact.avatarUrl}" alt="{contact.firstName}" width="180" />
  </ColumnItem>
</Columns>
<Section blockColor="#F8FAFC" blockBorderRadius="12" paddingTop="16" paddingBottom="16">
  <Paragraph>Review your latest activity and <Strong>update your settings</Strong>.</Paragraph>
</Section>
<Paragraph>
  Need help? <Link href="https://example.com/support">Contact support</Link>.
</Paragraph>
<Icons>
  <Icon name="x-twitter" href="https://twitter.com/loops" />
  <Icon name="linkedin" href="https://www.linkedin.com/company/sendwithloops/" />
</Icons>
```

## Core rules

* LMX is XML, not HTML or Markdown. Tags are case-sensitive (for example, `<Paragraph>`, not `<paragraph>`).
* LMX is not MJML. Do not use MJML tags (such as `<mj-text>`) or MJML dynamic tag syntax in LMX documents.
* A document is a sequence of top-level **block tags**, optionally with one top-level `<Style />`.
* Text is not allowed at the top level. Wrap top-level text in a block tag like `<Paragraph>`.
* Top-level inline tags and variables are invalid.
* Required attributes must be present (for example, `<Image />` requires `src`).
* Self-closing tags must end with `/>` (for example, `<Image ... />`, `<Br />`).
* Unknown tags are rejected. Unknown attributes are allowed but reported as warnings.
* Attribute values are quoted strings. Numbers and booleans are passed as strings.
* Whitespace between block tags is ignored, so pretty-printing is safe.
* Escape text and attributes as needed (`&lt;`, `&amp;`, `&quot;`).

<Note>
  Emails automatically have a footer appended, so you don't need to include your address or unsubscribe link at the bottom of your LMX content.
</Note>

## Block tags

Block tags define the structure of an email.

| Tag                    | Description                     |          Self-closing         |
| ---------------------- | ------------------------------- | :---------------------------: |
| `<Style />`            | Style metadata (top-level only) |              yes              |
| `<H1>`, `<H2>`, `<H3>` | Heading blocks                  |                               |
| `<Paragraph>`          | Paragraph block                 |                               |
| `<Quote>`              | Quote block                     |                               |
| `<CodeBlock>`          | Code block                      |                               |
| `<Button>`             | Button block                    |                               |
| `<Image />`            | Image block                     |              yes              |
| `<Divider />`          | Divider block                   |              yes              |
| `<Br />`               | Line break                      |              yes              |
| `<OrderedList>`        | Numbered list container         |                               |
| `<UnorderedList>`      | Bulleted list container         |                               |
| `<ListItem>`           | List item                       |                               |
| `<Columns>`            | Multi-column container          |                               |
| `<ColumnItem>`         | Column content container        |                               |
| `<Component>`          | Component container             | yes, but can contain children |
| `<Section>`            | Section container               |                               |
| `<Icons>`              | Social icon group               |                               |
| `<Icon />`             | Individual icon                 |              yes              |

## Tag reference

### Document styles

Use the optional top-level `<Style />` tag to style the email. Use this to apply a [theme](/creating-emails/styles#themes) to your email and add custom styles, just like you would in the [Style panel](/creating-emails/styles#style-panel) in the editor.

Use a combination of `themeId` and other attributes to bring in defaults while also overriding specific styles. You can also style individual elements in your email using tag attributes (for example, `<Button textColor="#000000" />` will override `<Style buttonBodyColor="#CCCCCC" />`).

Styles applied in `<Style />` will apply to all content in the email. For example defining `buttonBodyColor` in the `<Style />` tag will apply to all buttons in the email.

Self-closing tag. At most one per document.

| Attribute               | Notes                                                                                                                                |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `themeId`               | Theme preset ID to load as the base style before applying overrides.                                                                 |
| `backgroundColor`       | Outer email hex background color around the body container.                                                                          |
| `backgroundXPadding`    | Left and right spacing (px) between the outer background and body container.                                                         |
| `backgroundYPadding`    | Top and bottom spacing (px) between the outer background and body container.                                                         |
| `bodyColor`             | Main body container hex background color.                                                                                            |
| `bodyXPadding`          | Left and right inner padding (px) inside the body container.                                                                         |
| `bodyYPadding`          | Top and bottom inner padding (px) inside the body container.                                                                         |
| `bodyFontFamily`        | Font family from [Google Fonts](https://fonts.google.com/) e.g. `"Inter"`, `"Noto Sans"`                                             |
| `bodyFontCategory`      | Fallback font category. Must be one of: `"ui-sans-serif"`, `"ui-serif"`, `"ui-monospace"`, `"sans-serif"`, `"serif"`, `"monospace"`. |
| `borderColor`           | Default hex border color for the body container.                                                                                     |
| `borderWidth`           | Border width (px) for the body container.                                                                                            |
| `borderRadius`          | Corner radius (px) for the body container.                                                                                           |
| `buttonBodyColor`       | Default hex background color applied to buttons.                                                                                     |
| `buttonBodyXPadding`    | Default left and right internal button padding (px).                                                                                 |
| `buttonBodyYPadding`    | Default top and bottom internal button padding (px).                                                                                 |
| `buttonBorderColor`     | Default hex border color for buttons.                                                                                                |
| `buttonBorderWidth`     | Default button border width (px).                                                                                                    |
| `buttonBorderRadius`    | Default button corner radius (px).                                                                                                   |
| `buttonTextColor`       | Default hex text color used in buttons.                                                                                              |
| `buttonTextFontSize`    | Default button text size (px).                                                                                                       |
| `dividerColor`          | Default hex line color used by `<Divider />`.                                                                                        |
| `dividerBorderWidth`    | Default line thickness (px) used by `<Divider />`.                                                                                   |
| `textBaseColor`         | Default hex color for paragraph, quote, and list text.                                                                               |
| `textBaseFontSize`      | Default font size (px) for paragraph, quote, and list text.                                                                          |
| `textBaseLineHeight`    | Default line height (percentage) for body text.                                                                                      |
| `textBaseLetterSpacing` | Default letter spacing (px) applied to body text.                                                                                    |
| `textLinkColor`         | Default hex text color for inline `<Link>`.                                                                                          |
| `heading1Color`         | Default hex text color for `<H1>`.                                                                                                   |
| `heading1FontSize`      | Default font size (px) for `<H1>`.                                                                                                   |
| `heading1LineHeight`    | Default line height (percentage) for `<H1>`.                                                                                         |
| `heading1LetterSpacing` | Default letter spacing (px) for `<H1>`.                                                                                              |
| `heading2Color`         | Default hex text color for `<H2>`.                                                                                                   |
| `heading2FontSize`      | Default font size (px) for `<H2>`.                                                                                                   |
| `heading2LineHeight`    | Default line height (percentage) for `<H2>`.                                                                                         |
| `heading2LetterSpacing` | Default letter spacing (px) for `<H2>`.                                                                                              |
| `heading3Color`         | Default hex text color for `<H3>`.                                                                                                   |
| `heading3FontSize`      | Default font size (px) for `<H3>`.                                                                                                   |
| `heading3LineHeight`    | Default line height (percentage) for `<H3>`.                                                                                         |
| `heading3LetterSpacing` | Default letter spacing (px) for `<H3>`.                                                                                              |

### Headings

Use `<H1>`, `<H2>`, and `<H3>` for headings.

```xml theme={"dark"}
<H1 align="center" fontSize="34" lineHeight="120">
  Welcome to Loops
</H1>
<H2 paddingTop="16" fontSize="24">
  Your weekly summary
</H2>
<H3 blockColor="#F3F4F6" blockBorderRadius="8" paddingLeft="12" paddingRight="12">
  Highlights
</H3>
```

| Attribute           | Type   | Notes                                     |
| ------------------- | ------ | ----------------------------------------- |
| `fontSize`          | number |                                           |
| `lineHeight`        | number | Percentage value such as `"150"`          |
| `align`             | string | `"left"` (default), `"center"`, `"right"` |
| `blockColor`        | hex    |                                           |
| `blockBorderRadius` | number |                                           |
| `paddingTop`        | number |                                           |
| `paddingRight`      | number |                                           |
| `paddingBottom`     | number |                                           |
| `paddingLeft`       | number |                                           |

### Paragraphs

Use `<Paragraph>` for paragraph text.

```xml theme={"dark"}
<Paragraph fontSize="16" lineHeight="160" align="left" paddingBottom="12">
  Thanks for trying Loops. Here is what changed this week.
</Paragraph>
```

| Attribute           | Type   | Notes                                     |
| ------------------- | ------ | ----------------------------------------- |
| `fontSize`          | number |                                           |
| `lineHeight`        | number | Percentage value such as `"150"`          |
| `align`             | string | `"left"` (default), `"center"`, `"right"` |
| `blockColor`        | hex    |                                           |
| `blockBorderRadius` | number |                                           |
| `paddingTop`        | number |                                           |
| `paddingRight`      | number |                                           |
| `paddingBottom`     | number |                                           |
| `paddingLeft`       | number |                                           |

### Quotes

Use `<Quote>` for blockquote content.

```xml theme={"dark"}
<Quote blockColor="#F9FAFB" blockBorderRadius="8" paddingLeft="16" paddingRight="16">
  Great emails feel personal and timely.
</Quote>
```

| Attribute           | Type   | Notes                                     |
| ------------------- | ------ | ----------------------------------------- |
| `fontSize`          | number |                                           |
| `lineHeight`        | number | Percentage value such as `"150"`          |
| `align`             | string | `"left"` (default), `"center"`, `"right"` |
| `blockColor`        | hex    |                                           |
| `blockBorderRadius` | number |                                           |
| `paddingTop`        | number |                                           |
| `paddingRight`      | number |                                           |
| `paddingBottom`     | number |                                           |
| `paddingLeft`       | number |                                           |

### Code blocks

Use `<CodeBlock>` for code blocks.

Note: inline tags and variable parsing are disabled inside code blocks.

```xml theme={"dark"}
<CodeBlock>
  curl -X POST https://app.loops.so/api/v1/events/send
</CodeBlock>
```

| Attribute           | Type   | Notes                            |
| ------------------- | ------ | -------------------------------- |
| `fontSize`          | number |                                  |
| `lineHeight`        | number | Percentage value such as `"150"` |
| `blockColor`        | hex    |                                  |
| `blockBorderRadius` | number |                                  |
| `paddingTop`        | number |                                  |
| `paddingRight`      | number |                                  |
| `paddingBottom`     | number |                                  |
| `paddingLeft`       | number |                                  |

### Buttons

Use `<Button>` for buttons.

Button content may contain plain text and [dynamic content variables](/creating-emails/lmx#dynamic-content) such as `{contact.firstName}`. Inline formatting tags are not allowed inside buttons.

```xml theme={"dark"}
<Button href="https://app.example.com/users/{contact.userId}">
  Open profile, {contact.firstName}
</Button>
```

| Attribute           | Type    | Required | Notes                                                                                   |
| ------------------- | ------- | :------: | --------------------------------------------------------------------------------------- |
| `href`              | url     |          | The button's URL. May contain [dynamic variables](/creating-emails/lmx#dynamic-content) |
| `align`             | string  |          | `"left"` (default), `"center"`, `"right"`                                               |
| `notrack`           | boolean |          | `"true"` disables [link tracking](/creating-emails/editor/links#link-tracking)          |
| `bgColor`           | hex     |          |                                                                                         |
| `textColor`         | hex     |          |                                                                                         |
| `borderRadius`      | number  |          |                                                                                         |
| `borderWidth`       | number  |          |                                                                                         |
| `borderColor`       | hex     |          |                                                                                         |
| `innerXPadding`     | number  |          | Inner padding of the button content                                                     |
| `innerYPadding`     | number  |          | Inner padding of the button content                                                     |
| `fontSize`          | number  |          |                                                                                         |
| `blockColor`        | hex     |          |                                                                                         |
| `blockBorderRadius` | number  |          |                                                                                         |
| `paddingTop`        | number  |          | Padding of the container block                                                          |
| `paddingRight`      | number  |          | Padding of the container block                                                          |
| `paddingBottom`     | number  |          | Padding of the container block                                                          |
| `paddingLeft`       | number  |          | Padding of the container block                                                          |

### Images

Use `<Image />` for images.

**`src` must be a Loops-hosted image.** Upload images using the [Uploads API endpoints](/api-reference/create-upload) and use the returned URL as `src`.

For an externally hosted dynamic image, see [Dynamic images](#dynamic-images) below.

```xml theme={"dark"}
<Image
  src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg"
  alt="Launch banner"
  href="https://example.com/changelog"
  width="560"
  align="center"
  borderRadius="10"
/>
```

#### Dynamic or externally hosted images

If you want a per-recipient image URL, set `dynamicSrc` to a URL containing a variable (for example, `{contact.avatarUrl}`). The image URL should come from a [contact property](/contacts/properties).

You must also set `src` to a Loops-hosted static placeholder (this image renders in the Loops editor). When the email is generated for each recipient, the resolved `dynamicSrc` value is injected as the image `src`.

For images hosted on an external host, set `src` to a Loops-hosted static placeholder, then set `dynamicSrc` to the external image URL.

[More about dynamic images](/creating-emails/editor/images#dynamic-images).

```xml theme={"dark"}
<Image
  src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg"
  dynamicSrc="{contact.avatarUrl}"
  alt="{contact.firstName}"
  width="180"
  align="center"
/>
```

| Attribute           | Type    | Required | Notes                                                                                                                                                |
| ------------------- | ------- | :------: | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src`               | url     |    yes   | Loops-hosted image URL from the [Uploads API](/api-reference/create-upload). User-hosted URLs are not supported.                                     |
| `dynamicSrc`        | string  |          | Per-recipient image URL from a contact property, such as `{contact.avatarUrl}`. See [dynamic images](/creating-emails/editor/images#dynamic-images). |
| `notrack`           | boolean |          | `"true"` disables [link tracking](/creating-emails/editor/links#link-tracking)                                                                       |
| `alt`               | string  |          | Alt text                                                                                                                                             |
| `href`              | url     |          | Add a link to the image. May contain [dynamic variables](/creating-emails/lmx#dynamic-content)                                                       |
| `width`             | number  |          | Pixel width, maximum is 600px. Default is full width (600px). If you add padding, width will auto-adjust to be maximum 600px.                        |
| `align`             | string  |          | `"left"` (default), `"center"`, `"right"`                                                                                                            |
| `borderRadius`      | number  |          |                                                                                                                                                      |
| `borderWidth`       | number  |          |                                                                                                                                                      |
| `borderColor`       | hex     |          |                                                                                                                                                      |
| `blockColor`        | hex     |          | Background color of the container block                                                                                                              |
| `blockBorderRadius` | number  |          | Border radius of the container block                                                                                                                 |
| `paddingTop`        | number  |          |                                                                                                                                                      |
| `paddingRight`      | number  |          |                                                                                                                                                      |
| `paddingBottom`     | number  |          |                                                                                                                                                      |
| `paddingLeft`       | number  |          |                                                                                                                                                      |

### Dividers

Use `<Divider />` for divider lines.

Self-closing tag.

```xml theme={"dark"}
<Divider align="center" width="80" borderWidth="1" color="#E5E7EB" />
```

| Attribute           | Type   | Notes                                     |
| ------------------- | ------ | ----------------------------------------- |
| `align`             | string | `"left"` (default), `"center"`, `"right"` |
| `width`             | number | Percentage value                          |
| `borderWidth`       | number |                                           |
| `color`             | hex    | Color of the divider line                 |
| `blockColor`        | hex    |                                           |
| `blockBorderRadius` | number |                                           |
| `paddingTop`        | number |                                           |
| `paddingRight`      | number |                                           |
| `paddingBottom`     | number |                                           |
| `paddingLeft`       | number |                                           |

### Line breaks

Use `<Br />` for line breaks in inline contexts. It is not valid at the top level.

Self-closing tag.

```xml theme={"dark"}
<Paragraph>
  Thanks for reading.<Br />
  See you next week.
</Paragraph>
```

### Lists

Use `<OrderedList>` or `<UnorderedList>` with `<ListItem>` children only.

These tags must contain at least one `<ListItem>`.

| Attribute | Type   | Notes                                        |
| --------- | ------ | -------------------------------------------- |
| `align`   | string | `"left"` (default), `"center"`, `"right"`    |
| `start`   | number | Item number to start at (ordered lists only) |

```xml theme={"dark"}
<OrderedList>
  <ListItem>Review campaign draft</ListItem>
  <ListItem>Send internal preview</ListItem>
</OrderedList>

<UnorderedList>
  <ListItem>Open rate up 12%</ListItem>
  <ListItem>Clicks up 18%</ListItem>
</UnorderedList>
```

### List items

Use `<ListItem>` for list items.

Only valid inside `<OrderedList>` and `<UnorderedList>` tags.

Can only contain inline content.

```xml theme={"dark"}
<UnorderedList>
  <ListItem fontSize="15" lineHeight="150" paddingBottom="8">
    Use clear call-to-action labels.
  </ListItem>
</UnorderedList>
```

| Attribute           | Type   | Notes                            |
| ------------------- | ------ | -------------------------------- |
| `fontSize`          | number |                                  |
| `lineHeight`        | number | Percentage value such as `"150"` |
| `blockColor`        | hex    |                                  |
| `blockBorderRadius` | number |                                  |
| `paddingTop`        | number |                                  |
| `paddingRight`      | number |                                  |
| `paddingBottom`     | number |                                  |
| `paddingLeft`       | number |                                  |

### Columns

Use `<Columns>` for columns.

Must contain between two and four `<ColumnItem>` children. No other tags are allowed.

```xml theme={"dark"}
<Columns gap="16" widths="60,40" verticalAlignment="top" stackOnMobile="true">
  <ColumnItem>
    <H3>What shipped</H3>
    <Paragraph>New audience filters and event export support.</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Image src="https://images.vialoops.com/cmp2cnlf600yz0f042m792otk/cmp2cz4mn0oru0izztre5fgob.jpg" alt="Product screenshot" width="220" />
  </ColumnItem>
</Columns>
```

| Attribute           | Type    | Notes                                                             |
| ------------------- | ------- | ----------------------------------------------------------------- |
| `gap`               | number  | Space between columns (px)                                        |
| `widths`            | string  | Comma-separated percentages, one for each column, must total 100. |
| `verticalAlignment` | string  | `"top"`, `"middle"`, `"bottom"`                                   |
| `stackOnMobile`     | boolean |                                                                   |
| `reverseOnMobile`   | boolean |                                                                   |
| `blockColor`        | hex     |                                                                   |
| `blockBorderRadius` | number  |                                                                   |
| `paddingTop`        | number  |                                                                   |
| `paddingRight`      | number  |                                                                   |
| `paddingBottom`     | number  |                                                                   |
| `paddingLeft`       | number  |                                                                   |

Use `<ColumnItem>` for column content containers.

Only valid inside a `<Columns>` tag.

**No attributes.**

```xml theme={"dark"}
<Columns>
  <ColumnItem>
    <Paragraph>Left column content</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Paragraph>Central column content</Paragraph>
  </ColumnItem>
  <ColumnItem>
    <Paragraph>Right column content</Paragraph>
  </ColumnItem>
</Columns>
```

### Components

Use `<Component>` to add a [component](/creating-emails/components).

Can be self-closing, or can contain block elements, which will override the component's default content.

Children are block tags. Nested `<Component>` tags are not supported.

```xml theme={"dark"}
<Component componentId="header-hero" />

<Component componentId="feature-section">
  <H2>Updated override title</H2>
  <Paragraph>This content replaces the component's defaults.</Paragraph>
</Component>
```

| Attribute           | Type   | Required | Notes                                     |
| ------------------- | ------ | :------: | ----------------------------------------- |
| `componentId`       | string |    yes   | The component's ID                        |
| `align`             | string |          | `"left"` (default), `"center"`, `"right"` |
| `blockColor`        | hex    |          |                                           |
| `blockBorderRadius` | number |          |                                           |
| `paddingTop`        | number |          |                                           |
| `paddingRight`      | number |          |                                           |
| `paddingBottom`     | number |          |                                           |
| `paddingLeft`       | number |          |                                           |

### Sections

Use `<Section>` to group related block content in a shared clickable or styled container.

Children are block tags. Nested `<Section>` tags are not supported.

```xml theme={"dark"}
<Section
  href="https://example.com/account/{contact.userId}"
  blockColor="#F8FAFC"
  blockBorderRadius="12"
  paddingTop="16"
  paddingBottom="16"
>
  <H2>Account summary</H2>
  <Paragraph>Review your latest activity and settings.</Paragraph>
</Section>
```

| Attribute           | Type    | Required | Notes                                                                                   |
| ------------------- | ------- | :------: | --------------------------------------------------------------------------------------- |
| `href`              | url     |          | Section link URL. May contain [dynamic variables](/creating-emails/lmx#dynamic-content) |
| `notrack`           | boolean |          | `"true"` disables [link tracking](/creating-emails/editor/links#link-tracking)          |
| `blockColor`        | hex     |          |                                                                                         |
| `blockBorderRadius` | number  |          |                                                                                         |
| `paddingTop`        | number  |          |                                                                                         |
| `paddingRight`      | number  |          |                                                                                         |
| `paddingBottom`     | number  |          |                                                                                         |
| `paddingLeft`       | number  |          |                                                                                         |

### Icons

Use `<Icons>` for lists of icons.

Children must be `<Icon />` with no other tags allowed. At least one `<Icon />` child is required (maximum 100).

```xml theme={"dark"}
<Icons align="center" gap="12" size="20" color="#000000">
  <Icon name="x-twitter" href="https://twitter.com/loops" />
  <Icon name="linkedin" href="https://www.linkedin.com/company/sendwithloops/" />
</Icons>
```

| Attribute           | Type   | Notes                                                           |
| ------------------- | ------ | --------------------------------------------------------------- |
| `align`             | string | `"left"` (default), `"center"`, `"right"`                       |
| `gap`               | number | Space between icons (px)                                        |
| `size`              | number | Icon size (px)                                                  |
| `color`             | hex    | `#000000` (black, default), `#808080` (gray), `#FFFFFF` (white) |
| `blockColor`        | hex    |                                                                 |
| `blockBorderRadius` | number |                                                                 |
| `paddingTop`        | number |                                                                 |
| `paddingRight`      | number |                                                                 |
| `paddingBottom`     | number |                                                                 |
| `paddingLeft`       | number |                                                                 |

Use `<Icon />` for individual icons.

Self-closing tag. Only valid inside an `<Icons>` tag.

| Attribute | Type    | Required | Notes                                                                                           |
| --------- | ------- | :------: | ----------------------------------------------------------------------------------------------- |
| `name`    | string  |    yes   | Icon name (available icons listed [here](/creating-emails/editor/social-icons#available-icons)) |
| `href`    | url     |          | A URL for the icon                                                                              |
| `notrack` | boolean |          | `"true"` disables [link tracking](/creating-emails/editor/links#link-tracking)                  |

## Inline tags

Inline tags format text content inside block elements.

| Tag                 | Description                       |
| ------------------- | --------------------------------- |
| `<Strong>`          | Bold text                         |
| `<Em>`              | Italic text                       |
| `<Underline>`       | Underlined text                   |
| `<Code>`            | Inline code                       |
| `<Strike>`          | Strikethrough text                |
| `<Text>`            | No format, useful for `textColor` |
| `<Link href="...">` | Link with URL                     |

Inline tags are valid only inside inline-content blocks such as `<Paragraph>`, headings, `<Quote>`, and `<ListItem>`.

```xml theme={"dark"}
<Paragraph>
  <Strong textColor="#111827">Important:</Strong>
  <Em textColor="#4B5563"> review your campaign settings</Em>
  <Underline textColor="#111827"> before sending</Underline>.
  Use <Code textColor="#7C3AED">audience_filters</Code> for targeting,
  remove outdated copy with <Strike textColor="#6B7280">old messaging</Strike>,
  and keep defaults with <Text textColor="#374151">plain text</Text>.
  Read more in
  <Link href="https://loops.so/docs/creating-emails" notrack="true"> the docs</Link>.
</Paragraph>
```

### Inline tag attributes

| Tag           | Attribute   | Type    | Required | Notes                                                                          |
| ------------- | ----------- | ------- | :------: | ------------------------------------------------------------------------------ |
| `<Strong>`    | `textColor` | hex     |          |                                                                                |
| `<Em>`        | `textColor` | hex     |          |                                                                                |
| `<Underline>` | `textColor` | hex     |          |                                                                                |
| `<Code>`      | `textColor` | hex     |          |                                                                                |
| `<Strike>`    | `textColor` | hex     |          |                                                                                |
| `<Text>`      | `textColor` | hex     |          |                                                                                |
| `<Link>`      | `href`      | url     |    yes   | May contain [dynamic variables](/creating-emails/lmx#dynamic-content)          |
| `<Link>`      | `notrack`   | boolean |          | `"true"` disables [link tracking](/creating-emails/editor/links#link-tracking) |

## Dynamic content

You can add dynamic content like contact properties by using a tag syntax with a prefix, for example `{contact.firstName}`.

Unprefixed placeholders like `{firstName}` are not valid in LMX. Neither are other Loops variable prefixes used in MJML or the editor:

* `{EVENT_PROPERTY:...}` for [event properties](/events/properties) in workflow emails
* `{DATA_VARIABLE:...}` for [data variables](/transactional#add-data-variables) in transactional emails

LMX campaign content uses `{contact.apiName}` only.

<Note>
  Unprefixed placeholders like `{firstName}` and prefixed forms like `{EVENT_PROPERTY:firstName}` are still valid in [MJML emails](/creating-emails/uploading-custom-email) and in the [Loops editor](/creating-emails/editor). They are not valid in LMX. In the future, all variables will require a prefix.
</Note>

| Syntax        | Variable type                            | Use case                 | Example               |
| ------------- | ---------------------------------------- | ------------------------ | --------------------- |
| `{contact.X}` | [Contact property](/contacts/properties) | Campaign personalization | `{contact.firstName}` |

Variables are allowed in:

* Inline content (headings, paragraphs, quotes, and list items)
* Button text
* `Button` `href`, `Link` `href`, `Image` `alt`, `Image` `href`, `Image` `dynamicSrc`, and `Section` `href`

Variables are not allowed at the top level or inside `<CodeBlock>` (they are treated as literal text there).

### Variables in attributes

Only these attribute values may include variables:

* `Button` `href`
* `Image` `alt`, `href`, and `dynamicSrc`
* `Link` `href`
* `Section` `href`

`Image` `src` must be a Loops-hosted static URL with no variables. User-hosted URLs are not supported in `src`. Putting a variable like `{contact.avatarUrl}` in `src` is not supported and validation returns `unsupported_dynamic_attr`. When the image URL should vary per contact (including externally hosted URLs), set `dynamicSrc` to a contact property such as `{contact.avatarUrl}` and keep `src` as a Loops-hosted placeholder; at send time, the resolved `dynamicSrc` value replaces `src`.

### Fallback values

LMX does not support inline fallback syntax in variable references.

These forms are **not valid** in LMX: `{contact.firstName|there}`, `{contact.firstName:there}`, `{contact.firstName ?? "there"}`, and `fallback="there"` on variable attributes.

Use plain variable references in LMX (for example, `{contact.firstName}`), and configure fallback values through the Loops editor.

## Nesting rules

LMX validates structure, not just syntax. A few key rules:

* Root-level content must use supported top-level block tags (`H1`, `H2`, `H3`, `Paragraph`, `Quote`, `CodeBlock`, `Button`, `Image`, `Divider`, `OrderedList`, `UnorderedList`, `Columns`, `Component`, `Section`, `Icons`, `Style`).
* Inline tags cannot appear at the top level.
* `<ListItem>` and `<Quote>` only accept inline content.
* `<Columns>` can only contain `<ColumnItem>` tags.
* `<ColumnItem>` can contain block content, but not other `<ColumnItem>` tags.
* `<Style />` is metadata and is only allowed at the top level.

If a tag, attribute, or nesting pattern is invalid, validation issues are returned so problems can be fixed before sending.