Design properties
Configure design properties for content elements, including text, background, border, media, size, and placement settings.
Configure design properties in the right sidebar when configuring content elements. Each element section lists which properties are available.
Text properties
Use this information to configure design properties for text:
| Property | Description | Steps |
|---|---|---|
| Font family | The font of the text: serif, sans-serif, or a custom font stack. | Select a font or font stack. |
| Font size | The size of the font in points. | Enter a numeric value. |
| Font weight | The thickness of the font, from 100 to 900. Common values are 300 for light, 400 for normal, and 700 for bold. Available weights depend on the selected font family. For SDK versions older than the required minimums, weights 100–600 fall back to 400 (normal), and weights 700–900 fall back to 700 (bold). iOS SDK 20.1+Android SDK 20.1+ | Enter a numeric value. |
| Line height | The vertical spacing between lines of text, as a multiplier. For example, 1.2 is 120% of the font size. iOS SDK 20.1+Android SDK 20.1+ | Enter a numeric value. |
| Letter spacing | The horizontal spacing between characters, in points. iOS SDK 20.1+Android SDK 20.1+ | Enter a numeric value. |
| Color, or input color, and opacity | The color and transparency level of the text. “Input color” specifies the text entered by a user when answering an open question. | Select a Color SetA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. or enter a hexadecimal color value, and then set the opacity percentage. |
| Alignment | The horizontal position of the text: left, middle, or right. | Select an alignment. |
| Emphasis | The format of the text: bold, italic, or underline. | Select an emphasis. |
| Accessibility heading level | Optional, for Text only. The heading level of the text, for navigation using assistive technology such as screen readers. iOS SDK 18.13+Android SDK 18.5+ | Select from H1 to H6. |
Background and border properties
Use this information to configure design properties for backgrounds and borders for buttons, containers, NPS scales, and input fields:
| Property | Description | Steps |
|---|---|---|
| Background color and opacity | The color and transparency level of the button, container, NPS scale, or input field background. | Select a Color SetA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. or enter a hexadecimal color value, and then set the opacity percentage. |
| Border color and opacity | The color and transparency level of the button, container, NPS scale, or input field border. | Select a Color SetA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. or enter a hexadecimal color value, and then set the opacity percentage. |
| Border radius | Governs rounding the button, container, NPS scale, or input field corners. | Enter an integer from 0 to 100. |
| Border size | The size of the button, container, NPS scale, or input field border in pixels. | Enter a numeric value. |
Media properties
Use this information to configure design properties for background media and for the List and Media content elements:
| Property | Description | Steps |
|---|---|---|
| Fit | Resizes media to fit within a viewable area, maintaining its original aspect ratio. For background media, the viewable area is the entire screen as determined by the selected view style. For Lists, the viewable area is the bullet for each item in a list. Fit is not available when using YouTube or Vimeo URLs. Center inside resizes the media to fit entirely within the viewable area. The width and height of the media will be equal to or less than the width and height of the area. The media will not be cropped. Center crop and Crop resize the media to fill the viewable area. The width and height of the media will be equal to or greater than the width and height of the view. The sides or top and bottom of the media will be cropped to fill the entire view. When Crop is selected and the media does not fit within its viewable area, also set a Position. Center crop is equivalent to using Crop with Position set to Center-Center. See Media scaling and cropping for more information. | Select a fit. For Crop, also select a position. |
| Position | When Crop is selected for Fit, Position controls the vertical and horizontal alignment of media within its viewable area. The default position is Center-Center. Depending on the sizes of the media and the viewable area, the preview may not accurately reflect the selected position. | Select a position. |
| Controls (For video Media only) | Enabling Show video controls displays player controls, information, and options at the bottom of a video: play/pause, time elapsed and total time, mute, fullscreen, download, playback speed, picture in picture, and a progress bar. Autoplay and Loop control playback. Enabling Muted loads the video in muted state. Show video controls and Muted are enabled by default. | Check the boxes to enable or disable each option. |
| Video control (For background video only) | Displays background video Play control and Audio control buttons. See descriptions in the next two rows. iOS SDK 20.6.2+Android SDK 20.5+ | Select a Color SetA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. or enter a hexadecimal color value for the background color displayed behind the control icons, and set the opacity percentage. Set an Alignment. |
| Play control (For background video only) | Displays a play/pause button for background video. Available when Video control is enabled. When Story mode is enabled, this screen-level control is not available. Story Play control pauses or resumes both Story progression and background video playback. iOS SDK 20.6.2+Android SDK 20.5+ | Select a Color SetA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. or enter a hexadecimal color value for the Icon color, and then set the opacity percentage. Set a Size. |
| Audio control (For background video only) | Displays a mute/unmute button for background video audio. Available when Video control is enabled. iOS SDK 20.6.2+Android SDK 20.5+ | Select a Color SetA named pair of hexadecimal color values supporting device Light and Dark modes. Color sets can be selected for any color field in a scene and when configuring the default appearance of Scenes and In-App Automations. Dark mode is supported for Scenes only. or enter a hexadecimal color value for the Icon color, and then set the opacity percentage. Set a Size. |
Size and placement properties
Use this information to configure design properties that control the size and placement of content elements:
| Property | Description | Steps |
|---|---|---|
| Size (All content elements except Custom View) | Resizes the element based on height and width settings, which can be set in pixels or as a percentage of the screen or Container size. You can also select Auto to automatically adjust the size based on the content. However, Size settings options dynamically change. See Sizing for more information. See also Media scaling and cropping. | Select Auto or enter a numeric value and select a value type of percentage or pixels. |
| Size (For Custom View only) | Resizes the preview placeholder of the Custom View based on height and width settings. If set to Auto width, the preview will display at 100%. If set to Auto height, it will display at 200px. | For Width, select Auto or enter a numeric value and select a value type of percentage or pixels. For Height, select Auto or enter a numeric value and select pixels as the value type. |
| Alignment (All content elements) | Determines the horizontal and vertical positions of content elements within a screen or Container: left, middle, or right, and top, middle, or bottom. See Alignment impact for more information. | Select an alignment. |
| Margins (All content elements) | Determines the spacing between the element and the Scene edges and proximity to other elements. Margins are set in pixels. | Enter a numeric value for each margin. |
| Direction (For Container only) | Determines whether content elements within the Container are arranged horizontally, vertically, or stacked. Stacking arranges elements on top of each other, front to back. The first added element is at the bottom (furthest back), and the last is on top (front). | Select a direction. To rearrange the order in a Stacked container, select and hold the drag handle icon ( ) for an element, then drag and drop to a new position. |
Design properties appendix
The following is supplemental information related to design properties.
Alignment impact
The alignment of content elements will not always be apparent in a screen’s layout. The impact on the screen layout depends on the elements added and the size settings for both the elements and the screen or Container.
For example, when a Container’s height is Auto, aligning content elements vertically will not change the layout because the Container will always be the same height as the content. Similarly, if you have a Media element in a Container and the media fills 100% of the Container width, setting the media’s horizontal alignment will not change the layout.
Sizing
When setting the Size of a content element, the Width and Height options change dynamically based on the Size settings of its parent Container. A Scene’s root view is a vertically scrolling linear Container, which means its immediate children cannot have a percentage height set. For a Container content element, the options change based on its child elements. For example, if the first element you add to a screen is an image using the Media element, you cannot set its height using percentage. However, if you instead add a Container with a fixed height in pixels, you can then nest a Media element within the Container and set the Media to a percentage height.
Size settings for content elements:
| Setting | Description |
|---|---|
| Auto | The width or height of the element will automatically adjust its size based on the content within it. |
| Percentage (%) | The width or height of the element will be equal to the percentage of the size of its parent Container. For example, if an element’s height is set to 50% and its parent Container is set to 100 pixels, the element’s height will be 50 pixels. |
| Pixels (px) | The width or height of the element will be exactly the fixed number of pixels you set. |
Setting rules:
- If a Container’s height or width is set to Auto, the same setting in its child Containers or other elements can be set using Auto or pixels.
- If a Container’s height or width is set using percentages or pixels, the same setting in its child Containers or other elements can be set using percentage, pixels, or Auto.
- A parent Container’s height or width cannot be changed to Auto if any of its immediate child elements have height or width set using percentage.
For example, for a parent Container with a fixed height (set by pixels) that contains an image with a percentage height, you cannot change the Container height to Auto until after you change the nested image’s height to Auto or pixels.
Media scaling and cropping
When setting Size for Media, images scale as follows:
- If Width is 100% and Height is Auto, the image scales to fit the width of the viewable area.
- If the image is shorter than the viewable area, the image scales to fill the height of the area.
- If the image is taller than the viewable area, the image scales to fill the width of the area.
When an image is scaled to fit the width of a viewable area, the vertical Position setting determines if the image will be placed at the top, center, or bottom of the area. When an image is scaled to fit the height of a viewable area, the horizontal Position setting aligns the image to the left, center, or right of the area.
Scaled media typically must be cropped to fit a viewable area. When configuring background media and the List and Media elements, you can decide how the media should be cropped: using the Fit option, select Crop, and then set a Position.
Generally, the only times scaling occurs without cropping is when one of the selected dimensions is Auto or when a viewable area happens to match the aspect ratio of the media.