Coupon
Use this component if there is no possibility to display a specific product pricebox because the discount relates to a complete category or offer.
Use it only to promote LIDL Plus offers and only in combination with a product tile, teaser or image.
Elements#
| Attributes | Preview |
|---|---|
| 1. Discount 2. Coupon text 3. Legal info ("Lidl Plus price") |  |
Recommendations#
- Keep the text short and single line.
Overall styling#
Discount#
- The text-style is pricebox-price.
| Attributes | Preview |
|---|---|
| text-color: basic-white background-color: info-base |  |
Coupon text#
- The text-style is small.
| Attributes | Preview |
|---|---|
| text-color: basic-black background-color: mark-base |  |
Legal info#
- The text-style is pricebox-basic-quantity.
- This element follows the styling of our positive link version.
- Tapping on this info guides the user directly to the legal info implemented at the bottom of a newsletter via jump mark.
The legal info is a required addon for the complete LIDL Plus coupon and has a fix notation of "Lidl Plus price".
| Attributes | Preview |
|---|---|
| text-color: info-base |  |
Spacing & measurements#
| Types | Attributes | Preview |
|---|---|---|
| Horizontal spacing | 4px |  |
| Vertical spacing | padding-top: 2px padding-bottom: 2px |  |
| Height | 24px Text horizontally centered |  |
| Distance | margin-top: 2px |  |
Position & combinations#
- The coupon is placed in the lower right corner instead of a pricebox.
- The distance of the coupon to the borders of the product tile is 8px each.
Change log#
4.0.0 Mail - 2022-07-25#
Highlights#
Sketch,Doc: "LIDL Plus Coupon" | Added LIDL Plus coupon with new legal info requirement