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.
To set colors, 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 enter an opacity percentage.
Text properties
Configure design properties for text:
| Property | Description |
|---|---|
| Font family | The font of the text: serif, sans-serif, or a custom font stack. |
| Font size | The size of the font in points. |
| 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+ |
| 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+ |
| Letter spacing | The horizontal spacing between characters, in points. iOS SDK 20.1+Android SDK 20.1+ |
| 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. |
| Alignment | The horizontal position of the text: left, middle, or right. |
| Emphasis | The format of the text: bold, italic, or underline. |
| Accessibility heading level | Optional, for Text only. The heading level of the text as an H1 to H6, for navigation using assistive technology such as screen readers. iOS SDK 18.13+Android SDK 18.5+ |
Background and border properties
Configure design properties for backgrounds and borders for buttons, containers, NPS scales, and input fields:
| Property | Description |
|---|---|
| Background color and opacity | The background color and transparency level. |
| Border color and opacity | The border color and transparency level. |
| Border radius | Governs rounding corners. |
| Border size | The border size in pixels. |
Media properties
Configure design properties for background media and for the List and Media content elements:
| Property | Description |
|---|---|
| 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. |
| 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. |
| Controls (For video Media only) | 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. Muted loads the video muted. Show video controls and Muted are enabled by default. |
| Video control (For background video only) | The color and transparency level of Play control (play/pause) and Audio control (mute/unmute) buttons and their background color. Also set size and alignment. Play control is not available when Story mode is enabled. Story Play control pauses or resumes both Story progression and background video playback. iOS SDK 20.6.2+Android SDK 20.5+ |
Size and placement properties
Configure design properties that control the size and placement of content elements:
| Property | Description |
|---|---|
| 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. Available options vary based on the parent and child elements. See Sizing and Media scaling and cropping. |
| 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. |
| 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. |
| Margins (All content elements) | Determines the spacing between the element and the Scene edges and proximity to other elements, set in pixels. |
| 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). 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. |
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.