Overview
Teasers are used as an entry point to more detailed information and contain content and actions about a single subject. Additionally, they can be used for grouping information
They can include various sets of elements to serve users’ specific needs. In order to serve as many needs as possible there are different teasers available.
These are:
- Standard teasers (former Stacked teaser)
- Inline teasers (former inline teaser)
- Outline teasers (former promo teaser)
- Outline animated teasers
Stacked teasers & Inline teasers
Stacked
Inline teaser
Teaser title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue est at ante egestas aliquam et at neque. Praesent fringilla magna non tempus suscipit. Quisque vestibulum aliquam elit at varius. Maecenas finibus odio massa, nec placerat metus scelerisque vel. Nunc sit amet lacus lacus. Phasellus tristique porttitor orci, volutpat maximus ex faucibus vit
The stacked teasers are consisting of an image, a title, a description and a CTA. The height of standard teasers can be either fixed or free. Either way, if you add two or three stacked teasers in one row the height will adjust to be the same in every one of them so that we ensure visual balance.
Inline teasers are consisting of the same elements and they have the the same styling as standard teasers. Their difference is that instead of having the title, description and CTA below the image, in inline teasers these elements are placed besides the image on the right hand side.
Rules
Stacked teasers should be used in groups, ideally, they are designed to be in groups of 2 or 3 in each row.
Inline teasers should never be placed in three columns. They should be used in one or two columns max.
You must place them inside columns and don’t have any other element in the column.
Analytically for each element of a standard/inline teaser:
- Image (mandatory) – Should have a 5:4 ratio. A simple effect is occurring when a user hovers on the image just to indicate that the user can interact with this element. The image is also clickable and have the same destination as the CTA.
- Title (mandatory) – The title of each standard/inline teaser has a maximum length of 2 rows if the “Fixed” height is selected. Like the image, the title is also clickable.
- Description (mandatory) – The description of a standard teaser has a maximum length of 4 rows if the “Fixed” height is selected, and of an inline teaser a maximum of 6 rows. Use it as a very short and direct summary of what content is available on the main page if the user clicks on the standard teaser.
- CTA (mandatory)
Outline teasers
With image
Without image
The outline teasers are consisting of a title, a description, a CTA and there is also an option to include an image which is optional.
The height of outline teasers can be either fixed or free. Either way, if you add two or three outline teasers in one row the height will adjust to be the same in every one of them so that we ensure visual balance.
Rules
Outline teasers should be used in groups, ideally, they are designed to fit in rows with 2 or 3 columns each.
You must place them inside columns and don’t have any other element in the column.
Analytically for each element of a outline teaser:
- Image: (optional) – The image is optional and it should have a 5:4 ratio. The editor can choose either to include one or not.
It is strongly recommended, when using more than one outline teaser in one row to use the same logic. For example if you use one with an image you should use an image in every one of the same row. Same when using without image.
That way you will maintain the visual balance in the row. - Title: (mandatory) – The title of each outline teaser should have a maximum length of 2 rows if the “Fixed” height is selected. The title should be clickable.
- Description: (mandatory) – The description of each outline teaser should have a maximum length of 6 rows if the “Fixed” height is selected. Use it as a very short and direct summary of what content is available on the main page if the user clicks on the outline teaser.
- CTA (mandatory)
Outline animated teasers
The outline animated teasers are consisting of a title a description and a CTA. Their look and feel is designed to be very close to the outline teasers but their main difference is they have a hover effect that makes them more prominent. They should be used sparingly and for content that needs to stand out.
Rules
You must place them inside columns and don’t have any other element in the column.
Outline animated teasers should also be used in groups, ideally, they are designed to be in groups of 2 or 3 in each row.
Analytically for each element of a outline animated teaser:
- Title: (mandatory) – The title of each outline teaser should have a maximum length of 2 rows.
- Description: (mandatory) – The description of each outline teaser should have a maximum length of 3 rows.
- CTA (mandatory) – The CTA won’t be displayed on first view but it must have a text and a url because it will appear on hover.