Flap

Use this component to aknowledge the user about an additional LIDL Plus offer without the permission to display the explicit Lidl Plus pricebox and coupon.

Use it only to promote LIDL Plus offers and only in combination with a product tile, teaser or image.

Overall styling#

  • The text style is small-bold.
  • The line height is 100%.
  • The text-color is basic-black.
  • The color of the upper part always is brand-primary-base.
  • The color of the lower part always is mark-base.
  • The background-shadow is shadow-default.
  • The background has rounded corners of 2px on the lower-left and right side.

LIDL Plus: flap

Recommendations#

  • Keep the text short and at maximum three lines long.
  • At best, the width of the flap should not overlap more than 50% of the underlying element.

Spacing & measurements#

TypesAttributesPreview
Horizontal spacingLG: 8px
MD-XS: 4px
text-alignment: centered		Horizontal spacing (LG) Horizontal spacing (MD-XS)
Vertical spacingpadding-top: 4px
padding-bottom: 8px		Vertical spacing (LG) Vertical spacing (MD-XS)
Heighttop: 8px
bottom: height depending on content		Height (LG) Height (MD-XS)
Circle sizeLG: 24 x 12px
MD-XS: 16 x 8px		Size: cut out (LG) Size: cut out (MD-XS)

Position & combinations#

  • A flap takes its place at the upper left corner.
  • The distance of the flap to the upper left corner is 8px.
  • Don't place several flaps next to each other.
  • The component can not be displayed in combination with a LIDL Plus pricebox, ribbon or coupon.

position

Change log#

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

Changed#

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

Changed#

  • Sketch, Doc: "Flap" | New text color from gray-darker to basic-black

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

Changed#

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

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

Changed#

  • "LIDL Plus Flap" | Changed structure: LIDL Plus flap to own LIDL Plus section