Landscape style
Desktop view - up to 6 teasers
Desktop view - up to 6 teasers
Desktop view - more than 6 teasers
Desktop view - more than 6 teasers
Desktop view - with 'inverted' text color
Desktop view - with 'inverted' text color
Mobile view
Mobile view
Portrait style
Desktop view
Desktop view
Mobile view
Mobile view
How it works
How it works
- The container can be added to the top level grid control
- The styles of the topic teasers are portrait (default) or landscape
- Title font color can be inverted for dark images
- The topic teaser allows to define
- Title
- Text
- Background color
- Link
- Image
- Title
- The text is not displayed to the visitors until:
- user hovers over the component (or tap on in in mobile devices)
- on-hover (or on tap), the text and the arrow suggesting the link are revealed, also the image behind the text is replaced by the background color
- It is possible to auto play (5 seconds is the minimum time required for accessibility reasons)
How to use it
How to use it
- Select images that fit together in regards to their style and motives. Images comply with UBS image guidelines.
- Keep text limited to a short phrase and give some context to the subsequent link.
- Use meaningful and concise phrases or keywords for link text.
- Attention
If longer texts are integrated in the portrait style, they are not displayed correctly in the mobile view. Therefore, please make sure that the text is as short as possible or use the landscape style.
Reference for publisher
First you need to insert the container and select the style
After that you can insert the topic teaser into the container
After inserting the images it is important to select the aspect ratio for the corresponding style. See the screenshots below.
