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-small.
- This element has rounded corners of 2px on the upper left and right corner.
| Attributes | Preview |
|---|---|
| text-color: basic-white background-color: info-base |  |
Coupon text#
- The text-style is small.
- This element has rounded corners of 2px on the lower left and right corner.
| 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.
- Hovering over this info opens a popover that shows the Lidl Plus info text.
- The offset of the popover follows its spacing & measurement guidelines.
The legal info is a required addon for the complete LIDL Plus coupon and has a fix notation of "Lidl Plus price".
| Attributes | Preview | Behavior |
|---|---|---|
| text-color: info-base |  |  |
Spacing & measurements#
| Types | Attributes | Preview |
|---|---|---|
| Horizontal spacing | 4px |  |
| Vertical spacing | padding-top: 18px (LG & MD+SM) padding-top: 10px (XS) padding-bottom: 2px |   |
| Height | 24px Text horizontally centered |  |
| Circle size | LG & MD+SM: 32px / 16px XS: 16px / 8px |   |
| 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 16px each.
Change log#
Highlights#
Sketch,Doc: "LIDL Plus Coupon" | Updated LIDL Plus coupon with new legal info requirement
Changed#
Doc: "LIDL Plus Coupon" | Clean up the documentation for the right structure and sentence case
Changed#
Sketch,Doc: "LIDL Plus Coupon" | New text color from gray-darker to basic-black
Changed#
- "LIDL Plus Coupon" | Changed symbols: with layer-style settings