# Modal Content Sections

The array of `sections` content are rendered in a vertical stack in a modal. You can stack as many content sections as you like. 

{% hint style="info" %}
No worries if your content is too tall. As it grows, it becomes scrollable, and will scroll under the button section of the modal.
{% endhint %}

### Content Types

* [Title](#title-section-config): Title formatted text
* [Body](#body-section-config): Body formatted text
* [Images](#image-section-config): either symbols from the system (SF Symbols), or image files built into your app bundle.

{% hint style="info" %}
Buttons are **not** valid in the `sections` array in the modal config, and should only be in the `buttons` section.
{% endhint %}

### Visual Breakdown

<figure><img src="/files/7By7fmV4V0PCAS43GteW" alt="" width="375"><figcaption><p>Visual breakdown of how an array 4 of content sections renders</p></figcaption></figure>

### Section Config

The following parameters are valid in any section.

* `topSpacingScale` \[float, optional]: How much space to include above this section, as a multiple of the system default spacing. Defaults to 1.0 if omitted.
* `pageSectionType` \[string, required]: The type of this section. One of `title`, `body` or `image`.
* `pageSectionData` \[object, required]: The data object specific to the type specified in `pageSectionType`. See below for specififications.

### Title Section Config

Title sections are larger bold text sections, centered by default, and in the primaryTextColor. The following parameters are available to customize a title section:

* `title` \[string, required]: The title text
* `scaleFactor` \[float, optional]: A float to scale the text size up or down from the default title text size. Defaults to 1.0 of omitted (no scaling).
* `bold` \[bool, optional]: Specifies if the text bold or regular style. Defaults to true for titles if omitted.
* `centerText` \[bool, optional]: Specifies if the text is centered. Defaults to true for titles if omitted.
* `usePrimaryColor` \[bool, optional]: Specifies if the text uses the primary or secondary text color from the theme. Defaults to true for title sections if omitted.
* `width` \[float, optional]: Specifies the max width of the text element in points. Text won't exceed margins, regardless of value. Optional and will choose reasonable values if omitted.

### Body Section Config

Body sections are smaller non-bold text sections, centered by default, and in the secondaryTextColor The following parameters are available to customize a body section:

* `bodyText` \[string, required]: The body text
* `scaleFactor` \[float, optional]: A float to scale the text size up or down from the default title text size. Defaults to 1.0 of omitted (no scaling).
* `bold` \[bool, optional]: Specifies if the text bold or regular style. Defaults to false for body sections if omitted.
* `centerText` \[bool, optional]: Specifies if the text is centered. Defaults to true for body sections if omitted.
* `usePrimaryColor` \[bool, optional]: Specifies if the text uses the primary or secondary text color from the theme. Defaults to false for body sections if omitted.
* `width` \[float, optional]: Specifies the max width of the text element in points. Text won't exceed margins, regardless of value. Optional and will choose reasonable values if omitted.

### Image Section Config

Images have their [own documentation page](/actions-in-app-messaging/modals/modal-images.md).

### Example Content Config

See the [sample config](/actions-in-app-messaging/modals.md#sample-config) for an example of all content types in an array, forming a content stack.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.criticalmoments.io/actions-in-app-messaging/modals/modal-content-sections.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.