The banner module allows you to display one or more full-bleed hero images in your app. This module is often used at the top of pages to highlight things that are new or noteworthy.
Properties
The following properties can be used to change the behavior and design of the banner module.
Autoplay (optional) - Turn this on to automatically cycle through the banner items if there are more than 1. Users will be able to swipe through the items manually regardless of the value of this property.
Items - You can add between 1 and 5 items to the banner module. If more than 1 item is added a control will be shown at the bottom of the module indicating the current item.
Item properties
Each item that you add to a banner has the following properties:
Title (optional) - Title text shown over the item’s image. This will be truncated at 2 lines of text (exact character count varies by screen size).
Secondary Title (optional) - Smaller title text shown above the Title. This will be truncated at 1 line of text (exact character count varies by screen size).
Description (optional) - Longer descriptive text shown below the Title. This will be truncated at 3 lines of text (exact character count varies by screen size).
Action Link (optional) - A link to be shown over the item’s image. This can point to any location within the app or to an external URL. Adding an Action Link makes the entire image tappable/clickable. You may omit an Action Link if you are adding a Banner for purely decorative purposes.
Image - The banner image. The image will be scaled to cover the entire width of the app and will be cropped based on the image’s aspect ratio and the device’s screen sizes. A few tips:
Provide as wide an image as possible (aspect ratio 2:1 or 3:1) and keep the area of interest in the center of the image. This will reduce unexpected cropping issues across a range of devices. Use the device switcher in the App preview to see how your image will look on various devices.
Avoid baking text into the image if possible. Instead use the Title, Secondary Title, and Description properties to display text on top of the image. This will result in a more accessible experience for your users.
Avoid using an extremely light image in combination with the Title, Secondary Title, and Description properties as the text overlay can become somewhat difficult to read.