Elemental Quote Element

Overview

The quote element renders a quote block, typically used to highlight important text, testimonials, or call attention to specific content. Quote blocks can be styled with borders, colors, and different text styles. When to use:

Display testimonials or customer reviews
Highlight important quotes or statements
Emphasize key information
Create visually distinct text blocks

Basic Example

{
  "type": "quote",
  "content": "The future belongs to those who believe in the beauty of their dreams"
}

import Courier from "@trycourier/courier";

const courier = new Courier({
  apiKey: process.env.COURIER_API_KEY,
});

await courier.send.message({
  message: {
    to: { email: "user@example.com" },
    content: {
      version: "2022-01-01",
      elements: [
        {
          type: "quote",
          content: "The future belongs to those who believe in the beauty of their dreams",
        },
      ],
    },
  },
});

import os
from courier import Courier

client = Courier(api_key=os.environ["COURIER_API_KEY"])

client.send.message(
    message={
        "to": {"email": "user@example.com"},
        "content": {
            "version": "2022-01-01",
            "elements": [
                {
                    "type": "quote",
                    "content": "The future belongs to those who believe in the beauty of their dreams",
                }
            ],
        },
    }
)

Fields

string

required

The type of element. For quote elements, this value must be "quote".

string

required

The text value of the quote. This field supports Handlebars variables for dynamic content.

string

Alignment of the quote. One of "center", "left", "right", or "full". Defaults to "left".

string

CSS border color property for the quote block. Can be any valid CSS color value (e.g., "#007bff", "rgb(0, 123, 255)").

string

Text style for the quote. One of "text", "h1", "h2", or "subtext". Defaults to "text".

string

Font size for this quote block, as a CSS px value (e.g., "16px"). Email only. Overrides the size of the text_style preset, and takes precedence over the document-level font_size on the email channel element.

string

Line height for this quote block, as a CSS px value or a unitless multiplier (e.g., "24px" or "1.5"). Email only. Takes precedence over the document-level line_height on the email channel element.

object

Region-specific content for localization. See the Locales documentation for more details.

string[]

An array of channel names. The quote will only be rendered for the specified channels. See Control Flow documentation for details.

Examples & Variants

Basic Quote

Simple quote block:

{
  "type": "quote",
  "content": "The future belongs to those who believe in the beauty of their dreams"
}

Styled Quote

Quote with border and styling:

{
  "type": "quote",
  "content": "Customer satisfaction is our top priority",
  "border_color": "#007bff",
  "text_style": "h2",
  "align": "center"
}

Quote with Custom Size and Line Height

Give a pull quote its own typography without touching the rest of the email:

{
  "type": "quote",
  "content": "This product changed how our team works.",
  "border_color": "#007bff",
  "font_size": "20px",
  "line_height": "1.6"
}

Both fields are email-only and override the document-level typography set on the email channel element.

Quote with Handlebars

Dynamic quote content:

{
  "type": "quote",
  "content": "{{customer_name}} said: \"{{testimonial}}\""
}

Localized Quote

Quote with translations:

{
  "type": "quote",
  "content": "Quality is not an act, it is a habit",
  "locales": {
    "es": {
      "content": "La calidad no es un acto, es un hábito"
    },
    "fr": {
      "content": "La qualité n'est pas un acte, c'est une habitude"
    }
  }
}

Testimonial Quote

Quote styled as a testimonial:

{
  "type": "quote",
  "content": "\"This product changed my life!\" - {{customer_name}}",
  "border_color": "#4CAF50",
  "text_style": "h2",
  "align": "center"
}

Channel-Specific Quote

Show quotes only for specific channels:

{
  "type": "quote",
  "channels": ["email"],
  "content": "Full testimonial with detailed feedback...",
  "border_color": "#007bff"
}

Best Practices

Keep quotes concise: Long quotes can be hard to read, especially in email
Use appropriate styling: Border colors and text styles help quotes stand out
Consider context: Quotes work well for testimonials, important notices, or highlighted information
Test alignment: Different alignments can affect readability across channels

Channel Support

Email: ✅ Full support with styling and borders
Push: ✅ Supported (may render as plain text in some cases)
SMS: ⚠️ Limited support (may render as plain text)
Inbox: ✅ Full support

Text Element - For regular text content
Group Element - For grouping quotes with other elements
Locales - For localizing quote content
Control Flow - For conditional rendering

Platform

Developer Tools

Help

Elemental Quote Element

Overview

Basic Example

Fields

Examples & Variants

Basic Quote

Styled Quote

Quote with Custom Size and Line Height

Quote with Handlebars

Localized Quote

Testimonial Quote

Channel-Specific Quote

Best Practices

Channel Support

​Overview

​Basic Example

​Fields

​Examples & Variants

​Basic Quote

​Styled Quote

​Quote with Custom Size and Line Height

​Quote with Handlebars

​Localized Quote

​Testimonial Quote

​Channel-Specific Quote

​Best Practices

​Channel Support

​Related Elements

Overview

Basic Example

Fields

Examples & Variants

Basic Quote

Styled Quote

Quote with Custom Size and Line Height

Quote with Handlebars

Localized Quote

Testimonial Quote

Channel-Specific Quote

Best Practices

Channel Support

Related Elements