Overview
The Full width promo is a block designed to be prominent and stand out in a page. You should use it to display information that you don’t want the user to miss and preferably on first-second level pages.
The block consists of an image, a title, a description, and a CTA.
Rules
Full width promo teasers are designed to take up the full width of a page. This block should never be placed in a column with other elements on the same row.
You shouldn’t overuse this block because it loses it’s significance. 1-4 full width promo teasers per page should be the limit and only if the page is long enough in order to be able to always have other blocks in between. You should never use one below the other.
The block has a fixed height. That means that there is a limit to how many characters can be displayed inside the yellow box. In case that the content is short, it will be centered and aligned in the middle.
Additionally, there is an option to show a pattern on the one side of the image or choose to replace the pattern with a yellow rectangle. Preferably, you should use the same ones in the same page.
Analytically for each element of a standard/inline teaser:
- Image (mandatory) – Should have a 16:9 ratio or a wide ratio in general
- Title (mandatory) – The title is clickable
- Description (mandatory) – Use it as a short promotional tag line
- CTA (optional)