Skip to main content

​
Overview

The divider element renders a dividing line (horizontal rule) between elements, helping to visually separate content sections in your notifications. Dividers are simple but effective for improving readability and organization. When to use:
  • Separate distinct sections of content
  • Create visual breaks between related items
  • Improve readability in long notifications
  • Organize grouped content visually

​
Basic Example

{
  "type": "divider",
  "color": "#800080"
}

​
Fields

​
type
string
required
The type of element. For divider elements, this value must be "divider".
​
color
string
The CSS color to render the divider line with. Can be any valid CSS color value (e.g., "#e0e0e0", "rgb(224, 224, 224)", "gray"). Defaults to a standard gray color if not specified.
​
border_width
string
Border width in pixels for the divider line (e.g., "1px", "2px"). Controls the thickness of the divider.
​
padding
string
Padding around the divider. Can be any valid CSS padding value (e.g., "10px", "20px 10px").
​
channels
string[]
An array of channel names. The divider will only be rendered for the specified channels. See Control Flow documentation for details.

​
Examples & Variants

​
Basic Divider

Simple divider with default styling: 
{
  "type": "divider"
}

​
Styled Divider

Divider with custom color: 
{
  "type": "divider",
  "color": "#800080"
}

​
Thick Divider

Divider with custom width: 
{
  "type": "divider",
  "color": "#007bff",
  "border_width": "3px"
}

​
Divider with Padding

Divider with spacing: 
{
  "type": "divider",
  "color": "#e0e0e0",
  "padding": "20px 0"
}

​
Section Separator

Using dividers to separate content sections: 
{
  "version": "2022-01-01",
  "elements": [
    {
      "type": "text",
      "content": "Order Summary",
      "text_style": "h2"
    },
    {
      "type": "text",
      "content": "Item 1: $29.99"
    },
    {
      "type": "text",
      "content": "Item 2: $49.99"
    },
    {
      "type": "divider",
      "color": "#cccccc"
    },
    {
      "type": "text",
      "content": "Total: $79.98",
      "bold": true
    }
  ]
}

​
Channel-Specific Divider

Show divider only for specific channels: 
{
  "type": "divider",
  "channels": ["email"],
  "color": "#e0e0e0"
}

​
Best Practices

  • Use sparingly: Too many dividers can make notifications cluttered
  • Match brand colors: Use divider colors that match your brand palette
  • Consider spacing: Add padding to dividers for better visual separation
  • Channel considerations: Some channels (like SMS) may not render dividers, so don’t rely on them for critical content separation

​
Channel Support

  • Email: ✅ Full support with styling
  • Push: ⚠️ Limited support (may render as plain text or be ignored)
  • SMS: ❌ Not supported (dividers are not rendered)
  • Inbox: ✅ Full support with styling