Salesforce Docs Portal

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.

{
  "type": "block",
  "definition": "lightning/heading",
  "attributes": {
    "level": 2,
    "text": "Hello {{$unifiedIndividual.firstName}}!",
    "align": "left",
    "lightning:typography": "{!$brand.typography.heading.heading2}"
  }
}

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.

{
  "type": "block",
  "definition": "lightning/paragraph",
  "attributes": {
    "text": "Discover our latest collection.",
    "align": "left",
    "lightning:typography": "{!$brand.typography.paragraph.paragraph1}"
  }
}

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.

{
  "type": "block",
  "definition": "lightning/image",
  "attributes": {
    "imageInfo": {
      "source": {
        "type": "imageReference",
        "ref": {
          "contentKey": "MCZOCY2AM5PFBADN5UDRB53TLXR4"
        }
      },
      "altText": "Product image"
    },
    "linkUrl": "https://example.com/product"
  }
}

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

{
  "type": "block",
  "definition": "lightning/image",
  "attributes": {
    "imageInfo": {
      "source": {
        "type": "url",
        "ref": "https://example.com/images/banner.jpg"
      },
      "altText": "Banner image"
    },
    "imageCaption": "Our latest collection"
  }
}

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.

{
  "type": "block",
  "definition": "lightning/button",
  "attributes": {
    "text": "Shop Now",
    "uri": "https://example.com/shop",
    "lightning:horizontalAlignment": "center"
  }
}

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.

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

Related Items