Content pages
Stage style
Key characteristics
This style allows to define the number of items of the list which is displayed between the info line and the button if it was set.- Used when no full bleed image is needed
Image handling
- Possible ratios: 23:8 or 327:167
- Given that the text is overlaying the image and needs to be readable at all times (for accessibility reasons), selecting the right image is very difficult.
- Image definition for viewports XS/S and M/L/XL
- Image can be set hidden for S- and/or XS viewports
Link handling
- Link is showed with a button
Text handling
- Key line font size flexible
- Infoline with red accent
- Text position flexible
- Text width flexible
Stage full bleed
Key characteristics
- The 'full bleed image' or video, spanning from browser edge to browser edge.
- This style allows to define the number of items of the list which is displayed between the info line and the button if it was set.
- Used when full bleed image or video is needed
Image handling
- Image height flexible
- Given that the text is overlaying the image and needs to be readable at all times (for accessibility reasons), selecting the right image is very difficult.
- Image definition for viewports XS/S and M/L/XL
- Image can be set hidden for S- and/or XS viewports
- Image occupies entire width of browser window
- Instead of a picture a video can also be inserted
Link handling
- Link is showed with a button
Text handling
- Key line font size flexible
- Infoline with red accent
- Text position flexible
- Text width flexible
Hero style
Key characteristics
- Image/video is also in the mobile view in the background of the text
- Key and infoline are hidden. Therefore this style allows to add a promotion text that is not indexed and not displayed in the SDAS.
- Used when temporarly a promotion should be on top
Image handling
- Image ratio 12:5
- Given that the text is overlaying the image and needs to be readable at all times (for accessibility reasons), selecting the right image is very difficult.
- Image definition for viewports XS- and S- and M/L-viewports
- Image occupies entire width of browser window
- Instead of a picture a video can also be inserted
Link handling
- Link is showed with a button
Text handling
- Key and infoline are hidden and therefore formating is not needed
- Text position of the promotion is flexible
- Promotion infoline can have red accent
Welcome style
Key characteristics
- The welcome stlye gives the possibility to refer directly to different topics.
Image handling
- Image height flexible
- Image definition for viewports XS/S and M/L/XL
- Instead of a picture a video can also be inserted
- Image occupies entire width of browser window
Link handling
- Link is showed with a button
- More than one link possible
Text handling
- Key line font size flexible
- Infoline with red accent
Regular style
Key characteristics
- Regular style (default) is used if no image and button are needed
Image handling
- No image can be integrated here
Link handling
- No link can be integrated here
Text handling
- Key line font size flexible
- Infoline with red accent
Slogan style
Key characteristics
- Slogan is displayed on top of the page (before the Keyline) and can have a background color
- It is a special header in order to have a continuous visual experience from social channels like Instagram to ubs.com, used mainly on mobile devices.
Image handling
- No image can be integrated here
Link handling
- No link can be integrated here
Text handling
- Slogan text size is flexible
- Key line font size is flexible
- Infoline with red accent
Invisible style
Key characteristics
- Page head is only visible to screen readers and facilitate the page navigation.
- The invisible style is only used to integrate applications which by themselves already have a keyline.
Image handling
- No image can be integrated here
Link handling
- No link can be integrated here
Text handling
- As keyline and infoline are hidden, no formating is needed
Article pages
Article style
Key characteristics
- This style contains text only.
- This style is the standard.
Image handling
- No image can be integrated here
Text handling
- Key line font size flexible
- Infoline with red accent
Mandatory elements
- Keyline
- Infoline
Stage full bleed
Key characteristics
- Used when full bleed image or video is needed.
- The image or video is shown below the standard elements.
- The image or video is spanning from browser edge to browser edge.
Image handling
- Image height flexible
- Image occupies entire width of browser window
- Instead of a image a video can also be inserted
Text handling
- Key line font size flexible
- Infoline with red accent
Mandatory elements
- Keyline
- Infoline
- Image
Slogan style
Key characteristics
- Slogan is displayed on top of the page (before the Keyline) and can have a background color
- It is a special header in order to have a continuous visual experience from social channels like Instagram to ubs.com, used mainly on mobile devices.
Image handling
- No image can be integrated here
Text handling
- Slogan text size is flexible
- Key line font size is flexible
- Infoline with red accent
Mandatory elements
- Keyline
- Infoline
- Slogan text
User action style
Key characteristics
- The whole header section is displayed indented.
- Additional author elements like author's image, author's division and link to detailed author-profile are visible.
- More then one author can be added.
- Action links like 'download', 'add to calendar' or like button can be integrated.
Image handling
- No image can be integrated here
Text handling
- Key line font size is flexible
- Infoline with red accent
Mandatory elements
- Keyline
- Infoline
