**Divider Component — LLM Reference**

`Divider` renders a horizontal line used to visually separate content sections in emails. It is highly compatible across all email clients, including Outlook, with support for custom width, color, thickness, margins, and mobile hiding.

---

## Position in the Document Tree

```
DocumentTree
└── Section
    └── Container
        └── Column
            └── Text
            └── Divider         ← horizontal separator
            └── Button
            └── Spacer
```

`Divider` is a leaf node. It can be placed anywhere a child component is accepted.

---

## ComponentNode JSON Structure

```json
{
  "id": "unique-string-id",
  "type": "DividerComponent",
  "config": {
    "height": "1px",
    "color": "#e5e7eb",
    "width": "100%",
    "margin": "32px 0"
  }
}
```

---

## `DividerConfig` — Full Property Reference

| Property       | Type                                      | Required | Default       | Description |
|----------------|-------------------------------------------|----------|---------------|-----------|
| `height`       | `string`                                  | No       | `"1px"`       | Thickness of the divider line |
| `color`        | `string`                                  | No       | `"#cccccc"`   | Color of the divider line |
| `width`        | `string`                                  | No       | `"100%"`      | Width of the line (e.g. `"100%"`, `"300px"`) |
| `margin`       | `string`                                  | No       | `"20px 0"`    | Vertical spacing around the divider |
| `align`        | `"left" \| "center" \| "right"`           | No       | `"center"`    | Horizontal alignment of the divider |
| `hideOnMobile` | `boolean`                                 | No       | `false`       | When `true`, hides the divider on mobile viewports |

---

## How It Works

- Uses a nested table structure for maximum email client compatibility.
- The actual line is created using a `<td>` with `background-color` and explicit `height`.
- Outlook compatibility is achieved via HTML `height` attribute and `mso-line-height-rule:exactly`.
- `margin` is converted to `padding-top` / `padding-bottom` on the outer cell for better Outlook support.
- When `hideOnMobile: true`, the component receives the `hide-on-mobile` class (requires global builder stylesheet).

---

## React Usage

```tsx
import Divider, { DividerConfig } from './Divider';

const config: DividerConfig = {
  height: "2px",
  color: "#e5e7eb",
  width: "100%",
  margin: "40px 0",
  align: "center"
};

<Divider config={config} />
```

The component is memoized via `arePropsEqual`.

---

## Common Patterns & Examples

### 1. Standard thin divider

```json
{
  "id": "divider_standard",
  "type": "DividerComponent",
  "config": {
    "height": "1px",
    "color": "#e5e7eb",
    "margin": "24px 0"
  }
}
```

### 2. Thick divider with more spacing

```json
{
  "id": "divider_thick",
  "type": "DividerComponent",
  "config": {
    "height": "3px",
    "color": "#1f2937",
    "margin": "48px 0",
    "width": "80%"
  }
}
```

### 3. Divider hidden on mobile

```json
{
  "id": "divider_mobile_hidden",
  "type": "DividerComponent",
  "config": {
    "height": "1px",
    "color": "#cbd5e1",
    "margin": "32px 0",
    "hideOnMobile": true
  }
}
```

### 4. Left-aligned short divider

```json
{
  "id": "divider_left",
  "type": "DividerComponent",
  "config": {
    "height": "2px",
    "color": "#3b82f6",
    "width": "120px",
    "align": "left",
    "margin": "20px 0"
  }
}
```

---

## Data Bindings

`Divider` supports the `bindings` property on the `ComponentNode`, alongside `id`, `type`, and `config`. Leaf components do not support `dataList` or `itemAlias` — use those on a parent `Container`, `Column`, or `Row` to repeat the component. `visible` and `propertyMap` are fully supported.

```json
{
  "id": "themed-divider",
  "type": "DividerComponent",
  "bindings": {
    "visible": "section.showDivider === true",
    "propertyMap": {
      "config.color": "brand.accentColor"
    }
  },
  "config": {
    "height": "1px",
    "color": "#e5e7eb",
    "margin": "24px 0"
  }
}
```

| Property | Description |
|---|---|
| `visible` | JS expression evaluated against the Data Layer. Hides this component when falsy. |
| `propertyMap` | Maps component property paths (prefixed with `config.`) to Data Layer paths. |

> Bindable properties include `config.color`, `config.height`, `config.width`, `config.margin`, and `config.align`.

---

## Rules & Constraints

- `height` should be a pixel value (e.g. `"1px"`, `"4px"`).
- Use `margin` (shorthand) for vertical spacing — it is automatically split for Outlook compatibility.
- `width` accepts both percentages and fixed pixel values.
- For best Outlook rendering, always keep `height` as a clean pixel value.
- When `hideOnMobile: true`, the global `hide-on-mobile` stylesheet must be present.
- Dividers are purely decorative — they do not support text or complex content.