Modal Content Sections

The content for a modal UI!

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

No worries if your content is too tall. As it grows, it becomes scrollable, and will scroll under the button section of the modal.

Content Types

• Title: Title formatted text

• Body: Body formatted text

• Images: either symbols from the system (SF Symbols), or image files built into your app bundle.

Buttons are not valid in the sections array in the modal config, and should only be in the buttons section.

Visual Breakdown

Visual breakdown of how an array 4 of content sections renders

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.

Example Content Config

See the sample config for an example of all content types in an array, forming a content stack.