Pricebox

The use of the consistent LIDL pricebox is an elementary part of our brand awareness.

The pricebox contains several obligatory and optional elements and is available in different color combinations due to different visualizations (basic, offer, lidl-plus, etc.).

Recommendations#

  • If there is already a currency symbol in the pricebox no additional currency sign should be displayed in the recommended retail price or label.

Elements#

TypesAttributesPreview
Basic1. Prefix
2. Price
3. Asterisk
4. Currency		basic pricebox
Offer5. Offer
6. Basic pricebox		offer pricebox
Discount7. Discount text
8. Recommended Retail Price (rrp)		discount pricebox

Overall styling#

  • The text-style is pricebox-small or pricebox-medium for the two possible sizes of the price.
  • The line-height is set to default.
  • The text-style is pricebox-addon for asterisk, currency & prefix.
  • Additionally you can choose between a pricebox with or without prefix.
TypesAttributesPreview
Basictext-color: basic-black
background-color: basic-white
outline-color: gray-light		basic pricebox small pricebox with prefix
Actiontext-color: basic-white
background-color: danger-base		action pricebox action pricebox with prefix

Sizes#

  • There are two sizes of this component for different purposes.
  • For each breakpoint, you can select a corresponding symbol with different price text sizes to suit your layout.
Size UsagePreview
Smalli.e. product overviewsmall pricebox no prefix
Mediumi.e. product detail pagemedium pricebox no prefix

Label#

  • The text-style always is pricebox-label.
  • The line-height is set to default.
  • Combine the basic pricebox with a label to display promotions or discounts.
  • Use the label as an add-on for the offer pricebox.
  • You can advertise discounts, promotions or offers.
  • Like the pricebox, you can choose between different label colors.
  • Always use the base-color as background-color.
TypesAttributesPreview
Actiontext-color: basic-white
background-color: danger-base		action label
Offertext-color: basic-black
background-color: mark-base		offer label

Basic quantity#

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

Discount#

  • The text-style always is pricebox-addon for the discount text and the recommended retail price (rrp).
  • The line-height is set to default.
  • If you want to use a discount, it can be placed in the pricebox basic (positive) as well as in the pricebox offer (negative) - with or without prefix.
  • The strike comes either in danger-base or basic-black with a 1px thickness.

  • There is a positive and negative version matching the underlying basic pricebox.

TypesAttributesPreview
Positivetext-color: basic-black
strike-color: danger-base		discount positive
Negativetext-color: basic-white
strike-color: basic-black		disocunt negative

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.
  • The width of the label depends on the content of the pricebox.
  • The height of the label is fixed for a single-line text.

Pricebox#

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

Label#

TypesAttributesPreview
Vertical spacingMD+SM: 4px / 12px
XS: 2px / 10px		label MD+XS vertical spacing label XS vertical spacing
Horizontal spacingMD+SM: 8px
XS: 4px		label MD+SM horizontal spacing label XS horizontal spacing
HeightMD+SM: 32px
XS: 26px		label MD+SM height label XS height

Discount#

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

Position#

Label#

  • The pricebox always overlays the label by 8px.
TypesAttributesPreview
OffsetMD+SM: 8px top: 8px
XS: 4px top: 8px		label position MD+SM label position XS

Basic quantity#

  • This information always is placed to the right below the pricebox.
TypesAttributesPreview
Basic quantitytext and pricebox align right
margin-top: 2px		special offer

Combinations#

  • There are only three different combinations of priceboxes and labels in the LIDL universe.
TypesAttributesPreview
Offer #1label: action
pricebox: basic		offer #1
Offer #2label: offer
pricebox: basic		offer #2
Special offerlabel: offer
pricebox: action		special offer

Currencies examples#

Overview of priceboxes with different currency examples can be found here.

Our workflow in Sketch#

  • Use the "Overrides"-function to change the text.
  • Enter the text first. Then adjust the width of the symbol.
  • The color variants of the label can be selected in the complete pricebox via the "Overrides"-function.
  • The discount has to be added manually as a symbol to the pricebox:
    • First change the height.
    • Second, place the discount in the middle with the corresponding padding.
    • Finally insert the text via the "Overrides"-function.

Change log#

2.3.0 App - 2021-11-29#

Added#

  • Doc: "Pricebox" | Added currencies examples

2.1.0 App - 2021-07-22#

Changed#

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

2.0.0 App - 2021-06-24#

Highlights#

  • Sketch, Doc: "Pricebox" | Harmonized pricebox to be closer to the print pricebox with new text color, text size and spacings
  • Sketch, Doc: "Pricebox" | The info label is deleted and the documentation assets are replaced