Pricebox

Use this component only to promote LIDL Plus price to the customer.
Use the color combination danger-base / mark-base and the label "With Lidl Plus" to communicate a coherent price visualisation for Lidl Plus. If there is a need to combine an discount price for customers who don't have Lidl Plus, please use the color combination basic-white / danger-base and label text "Price without Lidl Plus".

Usage of the LIDL Plus price must be coordinated with and permitted by the legal department of your LIDL country.

Elements#

AttributesPreview
1. Label “With Lidl Plus”
2. Label
3. Recommended retail price (rrp)
4. LIDL Plus Pricebox
5. Basic quantity		LIDL Plus: pricebox

Overall styling#

Pricebox#

  • The text-style is pricebox-small or pricebox-medium for the two possible sizes of the price.
  • The text-style is pricebox-addon for asterisk, currency & prefix.
  • The text-color is basic-white.
  • The background-color is danger-base.
  • The line-height is set to default.
  • There are two variant alignemnt of this component for different purposes, left-aligned and right-aligned.
  • For each breakpoint, you can select a corresponding symbol with different price text sizes to suit your layout.
  • Additionally you can choose between a pricebox with or without prefix.
  • Keep the text short and single line.
  • Always show the Lidl Plus label with the wordings "With Lidl Plus".
Size UsagePreview
Smalli.e. product overviewLIDL plus pricebox: small
Mediumi.e. product detail pageLIDL plus pricebox: medium

Label#

  • The text-style is always pricebox-label.
  • The line-height is set to default.
  • The label is a required addon for the complete LIDL Plus price.
AttributesPreview
text-color: basic-back
background-color: mark-base		LIDL Plus label

Legal info#

The text style for label "With Lidl Plus" is font-family: "Lidl Font Pro";
- LG: font-size: 13px; font-style: normal; font-weight: 600; line-height: 20px; letter-spacing: 0.25px;
- SM-MD: font-size: 11px; font-style: normal; font-weight: 600; line-height: 16px; letter-spacing: 0.3px;
- XS: font-size: 11px; font-style: normal; font-weight: 600; line-height: 16px; letter-spacing: 0.3px;
- it is always positioned as first information.

The legal info is a required addon for the complete LIDL Plus Price communication and has a fix notation of "Lidl Plus price".

AttributesPreview
text-color: info-baselegal info: LG

Basic quantity#

  • The text-style is always pricebox-basic-quantity.
  • The line-height is set to default.
  • It's used as additional info for the packaging unit, quantity or drained weight.
AttributesPreview
text-color: basic-blackbasic quantity

Discount#

  • The text-style is always pricebox-addon for the recommended retail price (rrp).
  • The line-height is set to default.
  • The positive discount is a required addon for the complete LIDL Plus price.
AttributesPreview
text-color: basic-white
strike-color: basic-black		discount positive

Spacing & measurements#

  • The height of the pricebox depends on the content and the additional components shown.
  • The width of the pricebox depends on the content.

Pricebox#

TypesAttributesPreview
Vertical spacingLG: 6px / 4px
MD+SM: 6px / 4px
XS: 4px / 2px		pricebox horizontal spacing LG pricebox horizontal spacing XS pricebox horizontal spacing XS
Horizontal spacingLG: 8px / 4px
MD+SM: 8px / 4px
XS: 4px / 4px		pricebox vertical spacing LG pricebox vertical spacing LG pricebox vertical spacing XS

Label#

  • The width of the label depends on the content of the pricebox.
  • The height of the label is fixed for a single-line text.
TypesAttributesPreview
Vertical spacingLG: 4px / 12px
MD+SM: 4px / 12px
XS: 2px / 10px		label LG vertical spacing label MD+XS vertical spacing label XS vertical spacing
Horizontal spacingLG: 8px
MD+SM: 8px
XS: 4px		label LG horizontal spacing label MD+SM horizontal spacing label XS horizontal spacing
HeightLG: 34px
MD+SM: 32px
XS: 26px		label LG height label MD+SM height label XS height

Discount#

TypesAttributesPreview
DiscountLG: 8px / 0px
MD+SM: 8px / 0px
XS: 4px / 0px		discount LG discount SM-MD discount XS

Legal info & basic quantity#

TypesAttributesPreview
Legal infotext and pricebox align right
margin-top: 2px		legal info: LG legal info: SM-MD legal info: XS
Basic quantitytext and pricebox align right
margin-top: 0px		special offer

Position & combinations#

Use it only in combination with a product tile, teaser or image.

  • The pricebox is placed in the lower left corner.
  • The distance of the price to the borders of the product tile margins.

position

Example#

Variants of visualisation Price with Lidl Plus

position

Change log#

12.0.0 Fundamental & 12.0.0 Web - 2024-06-27#

Added#

  • Figma: "Lidl Plus Pricebox" | Lidl Plus Pricebox

Changed#

  • Doc: "Component" | Lidl Plus Pricebox documentation with the new standards informations

11.0.0 Fundamental & 11.0.0 Web - 2022-07-25#

Highlights#

  • Sketch, Doc: "LIDL Plus Pricebox" | Updated LIDL Plus pricebox with new legal info requirement

8.1.0 Fundamental & 8.1.0 Web - 2021-07-22#

Changed#

  • Doc: "LIDL Plus Pricebox" | Clean up the documentation for the right structure and sentence case

8.0.0 Fundamental & 8.0.0 Web - 2021-06-24#

Highlights#

  • Sketch, Doc: "LIDL Plus Pricebox" | Harmonized LIDL Plus pricebox to be closer to the print pricebox with new text color, text size and spacings

6.0.0 Fundamental & 6.0.0 Web - 2021-03-22#

Changed#

  • "LIDL Plus Pricebox" | Changed symbols: with layer-style settings

5.2.0 Fundamental & 5.2.0 Web - 2020-08-27#

Added#

  • "LIDL Plus Pricebox" | Added description: LIDL Plus pricebox to LIDL Plus section