Hero image teaser

Preview#

XS	SM	MD	LG

Variants #

default	App	with ribbon	Lidl Connect


teaser image	headline
copy text	buttons
topic	App Buttons
ribbon	badges

Recommendations of Use – Do's and Don'ts#

Headlines & text#

dos	don'ts

Ensure the user is able to clearly see the image and the image is showing the breadth of the category/content.	Try to avoid text in images completely, if that's not possible, make sure there are no duplications and the text is big enough to see everything - for all breakpoints. Avoid very short headlines that are not providing enough information to encourage the user to interact with the element.

App promotion#

dos	don'ts

Ensure the user is able to clearly see the image and the image is showing the breadth of the category/content.	Try to avoid text in images completely, if that's not possible, make sure there are no duplications and the text is big enough to see everything - for all breakpoints. Avoid very short headlines that are not providing enough information to encourage the user to interact with the element.

Accessability, WCAG#

All elements and ingredients of the Hero image teaser component must fulfill the guidelines of the WCAG

SEO-Requirements#

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)

Recommendation: Please note that in CMS the field "Claim" is marked in h1 and according to our general SEO recommendations, it should contain the mainkeyword and be the only h1 on the page. See: here
The field "Button URL" should link to a relevant page. And the field "Button label" should match the linked URL.