Content Component Blocks

Content component blocks display text, images, and other rich content.

Displays heading text with semantic HTML levels (h1–h6).

Attribute	Type	Description
`level`	integer	Required. The HTML heading level, which controls the size and semantic importance of the heading. The minimum value is `1` and the maximum value is `6`. The default value is `3`.
`text`	string	The heading content. Supports Handlebars scripting for personalization, such as inserting a recipient’s name.
`align`	string	How the heading text is aligned within its column. Possible values are `left`, `center`, `right`, or `justify`. The default value is `left`.
`url`	string	A destination URL. When you specify this property, the heading text appears as a clickable link.
`lightning:typography`	string	The typography style applied to the heading, sourced from your brand settings. Controls the font, size, and weight of the text.

This example shows how to create a second-level (h2) heading.

Displays paragraph text with rich formatting.

Attribute	Type	Description
`text`	string	The paragraph content. Supports Handlebars scripting for personalization. Also supports rich text formatting, such as bold and italic.
`align`	string	How the paragraph text is aligned within its column. Possible values are `left`, `center`, `right`, or `justify`. The default value is `left`.
`lightning:typography`	string	The typography style applied to the paragraph, sourced from your brand settings. Controls the font, size, and weight.

This example shows the structure of a basic paragraph.

Displays an image with optional caption and link.

Attribute	Type	Description
`imageInfo.source.type`	string	How the image source is specified. Possible values are `imageReference` (a reference to a CMS content item) or `url` (a direct link to an image file).
`imageInfo.source.ref`	string or object	The source of the image. This property can reference a CMS content item or a URL. For `imageReference`, an object with a `contentKey` property that identifies the CMS image. For `url`, an HTTPS URL string pointing to the image.
`imageInfo.altText`	string	A short text description of the image, used by screen readers and displayed when the image can’t load.
`linkUrl`	string	A URL that makes the entire image a clickable link when selected.
`imageCaption`	string	A short description displayed below the image.
`imageFitConfig`	object	Controls how the image is sized within its container, including width and height settings.

This example shows how to refer to a CMS content item in the source object.

This example shows how to refer to the URL of an image.

A clickable button for navigation.

Attribute	Type	Description
`text`	string	Required. The label displayed on the button. Supports Handlebars scripting for personalization. The default value is `Button`.
`uri`	string	Required. The destination that opens when a recipient clicks the button. Supports `https://`, `mailto:`, and `tel:` schemes.
`width`	object	Controls how wide the button is within its container.
`lightning:horizontalAlignment`	string	Where the button is positioned horizontally within its column. Possible values are `left`, `center`, or `right`.

This example shows the structure of a basic button.

Embeds raw HTML content for custom formatting not supported by standard blocks.

Attribute	Type	Description
`rawHtml`	string	The raw HTML markup to render in the block. Supports Handlebars scripting for dynamic, personalized content.

This example shows the structure of a basic HTML block.