Reference: Component Properties and JSON Structures

When building an extension for marketing content, you may need to reference the properties or JSON structure of a component. The properties and JSON structures of each component compatible with extensions are described in this topic.

Button

A component that enables an action when clicked. Possible actions include submitting a form, opening a landing page or other web page, or initiating an email.

Fully Qualified Name (FQN): lightning__button

Properties

The lightning__button contains these properties.

Property	Type	Description
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:buttonColorGroup`	`buttonColorGroupType`	Button color scheme. This is connected to the button type (sfdc_cms:styleGroup). If a brand is selected for the marketing content, this color scheme is also inherited from the brand.
`lightning:customCss`	`cssRulesType`	An array of CSS rules. Each CSS rule consists of a selector and a declaration block.
`lightning:horizontalAlignment`	`horizontalAlignmentType`	Horizontal alignment. Possible values include left, center, right, or justify.
`lightning:margin`	`spacingType`	Component margin
`lightning:padding`	`spacingType`	Component padding
`lightning:typography`	`typographyType`	Font of the text in the component
`sfdc_cms:styleGroup`	`buttonStyleGroupType`	The type of the button. Can be Primary, Secondary, or Tertiary.
`text`	`TextType`	Button text
`url`	`urlType`	URL that links the button to an external website, an email address, or a phone number. Use https://, mailto:, or tel: to begin the URL.
`width`	`widthType`	Width of the button

Example

This example shows the JSON structure for a lightning__button component.

1{
2  "id": "782ae2ac-5dfb-4374-98ab-4dccef4fb01f",
3  "type": "block",
4  "definition": "lightning/actionButton",
5  "attributes": {
6    "sfdc_cms:styleGroup": "{!$brand.buttonStyleGroup.primary}",
7    "lightning:buttonColorGroup": "{!$brand.buttonStyleGroup.primary.lightning:buttonColorGroup}",
8    "lightning:typography": "{!$brand.buttonStyleGroup.primary.lightning:typography}",
9    "lightning:margin": "{!$brand.spacing.none}",
10    "lightning:padding": "{!$brand.buttonStyleGroup.primary.lightning:padding}",
11    "lightning:horizontalAlignment": "center",
12    "lightning:borderRadius": "{!$brand.buttonStyleGroup.primary.lightning:borderRadius}",
13    "lightning:borderWidth": "{!$brand.buttonStyleGroup.primary.lightning:borderWidth}",
14    "width": "auto",
15    "text": "Button"
16  }
17}

Column

A subsection of a Section component. Columns are available only within a Section component, and they divide the component into side-by-side columns.

Fully Qualified Name (FQN): lightning__column

Properties

The lightning__column contains these properties.

Property	Type	Description
`columnWidth`	`integerType`	Width of the column
`lightning:backgroundImage`	`backgroundImageType`	Background image of the Section component that contains the column
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:colorScheme`	`colorSchemeType`	Column color scheme. This is inherited from the section that contains the column. If a brand is selected for the marketing content, this color scheme is inherited from the brand.
`lightning:customCss`	`cssRulesType`	An array of CSS rules. Each CSS rule consists of a selector and a declaration block.
`lightning:margin`	`spacingType`	Component margin
`lightning:padding`	`spacingType`	Component padding
`lightning:verticalAlignment`	`verticalAlignmentType`	Vertical alignment. This can be Top, Middle, or Bottom.

Example

This example shows the JSON structure for a lightning__column component.

1{
2  "id": "43920ec2-d0b9-49f3-8de9-4cd1131a08fa",
3  "type": "block",
4  "definition": "lightning/column",
5  "attributes": {
6    "columnWidth": 12,
7    "lightning:colorScheme": "{!$brand.colorScheme}",
8    "lightning:margin": "{!$brand.spacing.none}",
9    "lightning:padding": "{!$brand.spacing.xSmall}",
10    "lightning:borderRadius": "{!$brand.borderRadius.square}",
11    "lightning:borderWidth": "{!$brand.borderWeight.none}",
12    "lightning:verticalAlignment": "top"
13  },
14  "children": []
15}

Divider

A horizontal line that visually separates components or sections in marketing content.

Fully Qualified Name (FQN): lightning__divider

Properties

The lightning__divider contains these properties.

Property	Type	Description
`lightning:colorGroup`	`colorGroupType`	Line color. If a brand is selected for the content, this color is inherited from the brand.
`lightning:customCss`	`cssRulesType`	An array of CSS Rules. Each CSS rule consists of a selector and a declaration block.
`lightning:horizontalAlignment`	`horizontalAlignmentType`	Horizontal alignment. Possible values include left, center, right, or justify.
`lightning:padding`	`spacingType`	Component padding
`lineStyle`	`textType`	Line style. Possible values include solid, dashed, or dotted.
`lineWeight`	`dimensionType`	Line weight
`lineWidth`	`dimensionType`	Width of the line across the content body. This can be a percentage of the entire content body width (0–100%), or a value in px.

Example

This example shows the JSON structure for a lightning__divider component.

1{
2              "id": "10804f55-a30c-482a-9740-75c24960009e",
3              "type": "block",
4              "definition": "lightning/divider",
5              "attributes": {
6                "lineWeight": {
7                  "value": 1,
8                  "unit": "px"
9                },
10                "lineWidth": {
11                  "value": 100,
12                  "unit": "%"
13                },
14                "lightning:colorGroup": {
15                  "backgroundColor": "{!$brand.colorScheme.root}",
16                  "textColor": "{!$brand.colorScheme.contrast}",
17                  "linkColor": "{!$brand.colorScheme.primaryAccent}",
18                  "borderColor": "{!$brand.colorScheme.neutral}"
19                },
20                "lightning:padding": {
21                  "top": {
22                    "value": 8,
23                    "unit": "px"
24                  },
25                  "bottom": {
26                    "value": 8,
27                    "unit": "px"
28                  },
29                  "left": {
30                    "value": 0,
31                    "unit": "px"
32                  },
33                  "right": {
34                    "value": 0,
35                    "unit": "px"
36                  }
37                },
38                "lightning:horizontalAlignment": "center",
39                "lineStyle": "solid"
40              }
41            }
42}

Heading

A text-based component that can be used to title marketing content or introduce a section.

Fully Qualified Name (FQN): lightning__heading

Properties

The lightning__heading component contains these properties.

Property	Type	Description
`align`	`textType`	Text alignment. Possible values include left, center, right, or justify.
`level`	`integerType`	Heading HTML tag. Headings enhance content readability and boost search engine optimization (SEO) for web pages.
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:colorGroup`	`colorGroupType`	Component color scheme. If a brand is selected for the marketing content, this color scheme is inherited from the brand.
`lightning:customCss`	`cssRulesType`	CSS Rules is an array of CSS rules, each CSS rule consists a selector and a declaration block
`lightning:margin`	`spacingType`	Component margin
`lightning:padding`	`spacingType`	Component padding
`lightning:typography`	`typographyType`	Font of the text in the component
`text`	`richTextType`	The text in the heading
`url`	`urlType`	Link the heading to a URL.

Example

This example shows the JSON structure for a lightning__heading component.

1{
2  "id": "4845e304-88b7-4847-9d2f-e8b078bb8021",
3  "type": "block",
4  "definition": "lightning/heading",
5  "attributes": {
6    "lightning:typography": "{!$brand.typography.heading.heading3}",
7    "lightning:colorGroup": {
8      "backgroundColor": "{!$brand.colorScheme.root}",
9      "textColor": "{!$brand.colorScheme.contrast}",
10      "linkColor": "{!$brand.colorScheme.primaryAccent}",
11      "borderColor": "{!$brand.colorScheme.neutral}"
12    },
13    "lightning:padding": "{!$brand.spacing.none}",
14    "lightning:margin": "{!$brand.spacing.none}",
15    "lightning:borderRadius": "{!$brand.borderRadius.square}",
16    "lightning:borderWidth": "{!$brand.borderWeight.none}",
17    "level": 3,
18    "align": "left",
19    "text": "Heading Example"
20  }
21}

HTML

A component for entering custom HTML code in the body of marketing content.

Fully Qualified Name (FQN): lightning__html

Properties

The lightning__html component contains these properties.

Property	Type	Description
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:colorGroup`	`colorGroupType`	Component color scheme. If a brand is selected for the marketing content, this color scheme is inherited from the brand.
`lightning:padding`	`spacingType`	Component padding
`lightning:margin`	`spacingType`	Component margin
`rawHtml`	`htmlType`	The text body of the HTML component. It contains HTML code.

Example

This example shows the JSON structure for a lightning__html component.

1{
2  "id": "1d9773c4-48de-4ead-a381-99601c027832",
3  "type": "block",
4  "definition": "lightning/html",
5  "attributes": {
6    "lightning:colorGroup": {
7      "backgroundColor": "{!$brand.colorScheme.root}",
8      "textColor": "{!$brand.colorScheme.contrast}",
9      "linkColor": "{!$brand.colorScheme.primaryAccent}",
10      "borderColor": "{!$brand.colorScheme.neutral}"
11    },
12    "lightning:padding": "{!$brand.spacing.none}",
13    "lightning:margin": "{!$brand.spacing.none}",
14    "lightning:borderRadius": "{!$brand.borderRadius.square}",
15    "lightning:borderWidth": "{!$brand.borderWeight.none}"
16  }
17}

Image

A component that contains an image from Salesforce CMS or from a URL.

Fully Qualified Name (FQN): lightning__image

Properties

The lightning__image component contains these properties.

Property	Type	Description
`imageCaption`	`textType`	Caption for the image. When included, it appears below the image.
`imageFitConfig`	`objectType`	The width of the image. This can be a percentage of the entire content body width (0–100%), or a value in px.
`imageInfo`	`imageType`	Defines the structural requirements for rendering the image. These properties are nested within the attributes object and control the image source, location, and accessibility behavior.
`linkUrl`	`urlType`	Link the image to an external website, an email address, or a phone number. Use https://, mailto:, or tel: to begin the URL.
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:colorGroup`	`colorGroupType`	Component color scheme. If a brand is selected for the marketing content, this color scheme is inherited from the brand.
`lightning:customCss`	`cssRulesType`	An array of CSS rules. Each CSS rule consists of a selector and a declaration block.
`lightning:horizontalAlignment`	`horizontalAlignmentType`	Horizontal alignment. Possible values include left, center, right, or justify.
`lightning:margin`	`spacingType`	Component margin
`lightning:padding`	`spacingType`	Component padding
`lightning:typography`	`typographyType`	Font of the image caption

Example

This example shows the JSON structure for a lightning__image component.

1{
2  "id": "1d8f443d-ea0d-45cd-a18b-f5d5408a1ef8",
3  "type": "block",
4  "definition": "lightning/image",
5  "attributes": {
6    "lightning:padding": "{!$brand.spacing.none}",
7    "lightning:margin": "{!$brand.spacing.none}",
8    "lightning:horizontalAlignment": "center",
9    "lightning:typography": "{!$brand.typography.paragraph.paragraph1}",
10    "lightning:colorGroup": {
11      "backgroundColor": "{!$brand.colorScheme.root}",
12      "textColor": "{!$brand.colorScheme.contrast}",
13      "linkColor": "{!$brand.colorScheme.primaryAccent}",
14      "borderColor": "{!$brand.colorScheme.neutral}"
15    },
16    "lightning:borderRadius": "{!$brand.borderRadius.square}",
17    "lightning:borderWidth": "{!$brand.borderWeight.none}",
18    "imageFitConfig": {
19      "width": {
20        "value": 100,
21        "unit": "%"
22      }
23    }
24  }
25}

List

A rich text component that organizes content in a list format. The list can be ordered or unordered.

Fully Qualified Name (FQN): lightning__list

Properties

The lightning__list contains these properties.

Property	Type	Description
`content`	`blockType`	Text body of the list
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:colorGroup`	`colorGroupType`	Component color scheme. If a brand is selected for the marketing content, this color scheme is inherited from the brand.
`lightning:customCss`	`cssRulesType`	An array of CSS rules. Each CSS rule consists of a selector and a declaration block.
`lightning:margin`	`spacingType`	Component margin
`lightning:padding`	`spacingType`	Component padding
`lightning:typography`	`typographyType`	Font of the text in the component

Example

This example shows the JSON structure for a lightning__list component.

1{
2  "id": "41518ca1-688a-4b32-bda9-f871fe539239",
3  "type": "block",
4  "definition": "lightning/list",
5  "attributes": {
6    "lightning:typography": "{!$brand.typography.paragraph.paragraph1}",
7    "lightning:colorGroup": {
8      "backgroundColor": "{!$brand.colorScheme.root}",
9      "textColor": "{!$brand.colorScheme.contrast}",
10      "linkColor": "{!$brand.colorScheme.primaryAccent}",
11      "borderColor": "{!$brand.colorScheme.neutral}"
12    },
13    "lightning:padding": "{!$brand.spacing.none}",
14    "lightning:margin": "{!$brand.spacing.none}",
15    "lightning:borderRadius": "{!$brand.borderRadius.square}",
16    "lightning:borderWidth": "{!$brand.borderWeight.none}",
17    "content": {
18      "id": "d77b6e2a-bcc8-4cc3-a999-e5a6b10729e6",
19      "type": "block",
20      "definition": "lightning/listElement",
21      "attributes": {
22        "listStyle": "unordered"
23      },
24      "children": [
25        {
26          "id": "2e262932-db26-44e1-9440-d5461569ecf6",
27          "type": "block",
28          "definition": "lightning/paragraph",
29          "attributes": {
30            "text": "Your list starts here...."
31          }
32        }
33      ]
34    }
35  }
36}

Paragraph

A rich text component for content in a paragraph format.

Fully Qualified Name (FQN): lightning__paragraph

Properties

The lightning__paragraph contains these properties.

Property	Type	Description
`align`	`textType`	Text alignment. Possible values include left, center, right, or justify.
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:colorGroup`	`colorGroupType`	Component color scheme. If a brand is selected for the marketing content, this color scheme is inherited from the brand.
`lightning:customCss`	`cssRulesType`	CSS Rules is an array of CSS rules, each CSS rule consists of a selector and a declaration block
`lightning:margin`	`spacingType`	Component margin
`lightning:padding`	`spacingType`	Component padding
`lightning:typography`	`typographyType`	Font of the text in the component
`text`	`richTextType`	The text in the paragraph. Body text can contain inline HTML tags.

Example

This example shows the JSON structure for a lightning__paragraph component.

1{
2  "id": "3307d98f-1813-45d0-ab3e-9550860be0c7",
3  "type": "block",
4  "definition": "lightning/paragraph",
5  "attributes": {
6    "lightning:typography": "{!$brand.typography.paragraph.paragraph1}",
7    "lightning:colorGroup": {
8      "backgroundColor": "{!$brand.colorScheme.root}",
9      "textColor": "{!$brand.colorScheme.contrast}",
10      "linkColor": "{!$brand.colorScheme.primaryAccent}",
11      "borderColor": "{!$brand.colorScheme.neutral}"
12    },
13    "lightning:padding": "{!$brand.spacing.none}",
14    "lightning:margin": "{!$brand.spacing.none}",
15    "lightning:borderRadius": "{!$brand.borderRadius.square}",
16    "lightning:borderWidth": "{!$brand.borderWeight.none}",
17    "align": "left",
18    "text": "Paragraph Example"
19  }
20}

Section

A top-level layout component that adds structure to marketing content. Section components contain one or more columns and components. A section can’t contain another section.

Fully Qualified Name (FQN): lightning__section

Properties

The lightning__section contains these properties.

Property	Type	Description
`lightning:backgroundImage`	`backgroundImageType`	Background image from Salesforce CMS
`lightning:borderRadius`	`borderRadiusType`	Shape and radius of the component border
`lightning:borderWidth`	`borderWidthType`	Width of the component border
`lightning:colorScheme`	`colorSchemeType`	Section color scheme. If a brand is selected for the marketing content, this color scheme is inherited from the brand. This scheme applies to all columns within the section.
`lightning:customCss`	`cssRulesType`	An array of CSS rules. Each CSS rule consists of a selector and a declaration block.
`lightning:margin`	`spacingType`	Component margin
`lightning:padding`	`spacingType`	Component padding
`stackOnMobile`	`booleanType`	When true, if the content is viewed on a mobile device, columns within this section are vertically stacked

Example

This example shows the JSON structure for a lightning__section component.

1{
2  "id": "64ef5a50-1ce5-4fd4-a68c-74d70eb6a83b",
3  "type": "block",
4  "definition": "lightning/section",
5  "attributes": {
6    "stackOnMobile": true,
7    "lightning:colorScheme": "{!$brand.colorScheme}",
8    "lightning:margin": "{!$brand.spacing.none}",
9    "lightning:padding": "{!$brand.spacing.xSmall}",
10    "lightning:borderRadius": "{!$brand.borderRadius.square}",
11    "lightning:borderWidth": "{!$brand.borderWeight.none}"
12  },
13  "children": []
14}