Full Width Teaser
component preview#
| XS | SM | MD | LG |
|---|---|---|---|
 |  |  |  |
Teaser image#
Teaser image#
Headline#
Headline#
Text background#
Text background#Examples of use#
| example 1 (tablet) | example 2 (tablet) | example 3 (tablet) |
|---|---|---|
 |  |  |
| Full width teasers can use to promote special Sub-categries of a campaign or category | Promotions for products should always be reduced to the essentials. When prices are displayed, care must be taken to ensure that the price is always visible and legible. | Full width teasers can also be used as advertising space for campaigns or special offers or areas such as Lidl Plus or Lidl Travel. Overall, it is true for all application areas that text on images is associated with many challenges. |
Recommendations of Use – Do's and Don'ts#
- Provide clear and representative (sub-)category images and make sure that the user is immediately able to capture the context between the image and the products of the (sub-)category.
- The image itself should be kept more general. This can be achieved e.g. with more than one product shown or general topics that are related to the category.
- The label message or headline must be clear, quick to understand and clearly show the connection to the category.
SEO-Requirements#
Title = H2; 500 characters (Optional)
Label = Link Text; 30 characters (Required)
Link = Optional
The Full Width Teaser is mainly used to link to another page. If there is a relevant heading for the teaser, put it into the title (H2). Name the label similar as the page you want the teaser to link to.
Image - To optimize page speed, keep the image size small - Do not put relevant text on images, this could not be crawled by search engines - Use an alt tag to describe the content of the image (not available at the moment) - Pay attention that the focus area of the image (center) contains the main part of the image which is visible for each viewport.
Accessability, WCAG#
All elements of the component should fulfill the guidelines of the WCAG
Source references#
- baymard.com/blog/avoid-these-ecommerce-graphics
- Evaluation of customer survey - Hero Teaser