# 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="https://648587291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntHgSpSJ3tixDsCMhK2u%2Fuploads%2FNzRg1byJXO9PxeS3TDTg%2FScreenshot%202023-06-21%20at%201.33.23%20PM.png?alt=media&#x26;token=7751e7a1-8500-4f01-b97a-b49ddede5021" 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](https://docs.criticalmoments.io/actions-in-app-messaging/modals/modal-images).

### Example Content Config

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