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.
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
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 |
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 |
This example shows the JSON structure for a lightning__button component.
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
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. |
This example shows the JSON structure for a lightning__column component.
A horizontal line that visually separates components or sections in marketing content.
Fully Qualified Name (FQN): lightning__divider
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. |
This example shows the JSON structure for a lightning__divider component.
A text-based component that can be used to title marketing content or introduce a section.
Fully Qualified Name (FQN): lightning__heading
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. |
This example shows the JSON structure for a lightning__heading component.
A component for entering custom HTML code in the body of marketing content.
Fully Qualified Name (FQN): lightning__html
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. |
This example shows the JSON structure for a lightning__html component.
A component that contains an image from Salesforce CMS or from a URL.
Fully Qualified Name (FQN): lightning__image
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 |
This example shows the JSON structure for a lightning__image component.
A rich text component that organizes content in a list format. The list can be ordered or unordered.
Fully Qualified Name (FQN): lightning__list
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 |
This example shows the JSON structure for a lightning__list component.
A rich text component for content in a paragraph format.
Fully Qualified Name (FQN): lightning__paragraph
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. |
This example shows the JSON structure for a lightning__paragraph component.
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
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 |
This example shows the JSON structure for a lightning__section component.