# 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](/docs/marketing/handlebars-for-marketing-cloud-next/overview) 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.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "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](/docs/marketing/handlebars-for-marketing-cloud-next/overview) 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.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "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.

```sfdocs-code {"lang":"json", "title":"Content Reference Example"}
{
  "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.

```sfdocs-code {"lang":"json", "title":"Direct URL Example"}
{
  "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](/docs/marketing/handlebars-for-marketing-cloud-next/overview) 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.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "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](/docs/marketing/handlebars-for-marketing-cloud-next/overview) for dynamic, personalized content. |

This example shows the structure of a basic HTML block.

```sfdocs-code {"lang":"json", "title":"Example"}
{
  "type": "block",
  "definition": "lightning/html",
  "attributes": {
    "rawHtml": "<h1>Special savings for {{firstName}}!</h1><p>Check out the latest offers now!</p>"
  }
}
```

## Related Items

- [Content Component Blocks](/docs/marketing/marketing-cloud-growth/guide/mc-manage-component-blocks.md)
- [Handlebars for Marketing Cloud Next](/docs/marketing/handlebars-for-marketing-cloud-next/overview)