Content Component Blocks

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

lightning/heading

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.

1{
2  "type": "block",
3  "definition": "lightning/heading",
4  "attributes": {
5    "level": 2,
6    "text": "Hello {{$unifiedIndividual.firstName}}!",
7    "align": "left",
8    "lightning:typography": "{!$brand.typography.heading.heading2}"
9  }
10}

lightning/paragraph

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.

1{
2  "type": "block",
3  "definition": "lightning/paragraph",
4  "attributes": {
5    "text": "Discover our latest collection.",
6    "align": "left",
7    "lightning:typography": "{!$brand.typography.paragraph.paragraph1}"
8  }
9}

lightning/image

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.

1{
2  "type": "block",
3  "definition": "lightning/image",
4  "attributes": {
5    "imageInfo": {
6      "source": {
7        "type": "imageReference",
8        "ref": {
9          "contentKey": "MCZOCY2AM5PFBADN5UDRB53TLXR4"
10        }
11      },
12      "altText": "Product image"
13    },
14    "linkUrl": "https://example.com/product"
15  }
16}

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

1{
2  "type": "block",
3  "definition": "lightning/image",
4  "attributes": {
5    "imageInfo": {
6      "source": {
7        "type": "url",
8        "ref": "https://example.com/images/banner.jpg"
9      },
10      "altText": "Banner image"
11    },
12    "imageCaption": "Our latest collection"
13  }
14}

lightning/button

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.

1{
2  "type": "block",
3  "definition": "lightning/button",
4  "attributes": {
5    "text": "Shop Now",
6    "uri": "https://example.com/shop",
7    "lightning:horizontalAlignment": "center"
8  }
9}

lightning/html

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.

1{
2  "type": "block",
3  "definition": "lightning/html",
4  "attributes": {
5    "rawHtml": "<h1>Special savings for {{firstName}}!</h1><p>Check out the latest offers now!</p>"
6  }
7}