Desktop view

Screenshot of 3 teasers

Mobile view

screenshot with three teasers

Downsized images and image placement left or right

screenshot with three teasers

How it works

  • Teasers consist of various elements
    • Image
    • Title
    • Text
    • Linklist
    • Button    
  • The image normaly fills the width completely ('bleeds to left and right edges') and keeps its ratio. In addition the image can be resized and placed to the center, left or right.
  • When image is downsized and horizontally (styles -> image placement: left or right) then the text is no longer overlapping the image, instead it is shown next to the asset in separate column
  • Depending on the viewport, the size of teasers varies
  • Multiple given ratios or the free crop option can be chosen

How to use it

  • Use teasers primarily on overview pages.
  • 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(s).
  • Use meaningful and concise phrases or keywords for link text and create a clear call-to-action.
  • Use the grid control component to apply background color to one or all teasers in a grid row.
  • If only one link is used for the teaser, which is actually recommended, it makes sense from a user experience point of view if the teaser image is equipped with the same link as the link at the end of the teaser.

Crosslinks

Note

If you want to use images from the database for the next publishing job, please mention the ID of the image when placing the order.

Reference for publisher

AEM view

Teaser component in authoring mode.

Use the grid control component to apply the number of teasers and background color.

Crosslinks