Ribbon

Use this component to promote the LIDL Plus app directly. That's why the ribbon shows the special app icon.

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

Overall styling#

  • The background-color always is mark-base.
  • The color of the triangle always is gray-darker.
  • The background-shadow is shadow-default.
  • The background has rounded corners of 2px on the upper- & lower-left.
  • It always comes with the LIDL Plus app icon in different sizes for each breakpoint.

LIDL Plus: ribbon

Spacing & measurements#

TypesAttributesPreview
Horizontal spacingLG: 8px
MD-XS: 4px		Horizontal spacing (LG) Horizontal spacing (MD-XS)
Vertical spacingLG: 8px
MD-XS: 8px		Vertical spacing (LG) Vertical spacing (MD-XS)
SizeApp icon: 48x48px (LG) / 32x32px (MD-XS)
Triangle: 8x8px (LG) / 4x4px (MD-XS)		Size: cut out (LG) Size: cut out (MD-XS)
HeightLG: 64px
MD-XS: 40px		Height (LG) Height (MD-XS)
WidthLG: 64px
MD-XS: 40px		Width (LG) Width (MD-XS)

Position & combinations#

  • The ribbon is positioned in the upper right corner like every other standard ribbon.
  • The distance of the ribbon to the upper right corner is 8px.
  • It can be displayed in combination with a LIDL Plus pricebox or coupon.
  • It can't be displayed in combination with the LIDL Plus flap.

position

Change log#

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

Changed#

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