Product Tile

Each product is presented with the product tile.

The product tile is a basic component which can be combined with other components (e.g.: price-fields, ribbons, availabilities, etc).

Recommendations#

  • Ideally, the product title should be single-line or a maximum of two lines.
  • Please use as less text as possible in the product description.

Overall styling#

  • The text style of the product title is basic bold.
  • The text style of the product description is small.
  • The label text style is label text.
  • The rating text in brackets is basic.
  • The line-height is set to default.
  • The image ratio always is 4:3.
  • The height of the white area depends on the content and the additional components shown.
  • All widths are fixed and aligned to the layout grid of the breakpoints.
  • The width of the component is divisible by 8 and equal to the image-width.
  • The product tile has no hover, active or disabled status.
  • You can choose between two tile formats in the SM breakpoint for your newsletter needs.
TypesAttributesPreview
DefaultProduct title text-color: gray-darker
Label text-color: danger-base
Rating text-color: brand-primary-base
background-color: basic-white		product-tile default

Formats#

BreakpointsAttributesPreview
SMPortrait or landscapeproduct-tile SM portrait
product-tile SM landscape
XSOnly portraitproduct-tile XS portrait

Spacing & measurements#

TypesAttributesPreview
Image sizeAlways ratio 4:3product-tile image
PaddingOverall
SM: 16px
XS: 8px

Title to description
SM: 8px
XS: 8px		product-tile padding SM product-tile padding XS

Our workflow in Sketch#

  • To change the text or image use the "Overrides"-function.
  • Place additional elements like the pricebox element on top of the product tile.
  • To demonstrate a multi-line product title, the symbol must be detached from the library.

Change log#

3.0.0 Mail - 2022-05-30#

Changed#

  • Sketch: "Product tile" | Adapted component to new grid settings

2.0.0 Mail - 2022-05-03#

Changed#

  • Sketch: "Product tile" | Adapted component to new grid settings

1.3.0 Mail - 2022-02-21#

Changed#

  • Doc: "Product tile" | Updated documentation preview assets with new star rating

1.1.0 Mail - 2021-07-22#

Changed#

  • Doc: "Product tile" | Cleaned up the documentation for the right structure and sentence case

1.0.0 Mail - 2021-06-24#

Highlights#

  • Sketch: "Product tile" | New layer-styles, text-styles and color-variables settings

Changed#

  • Doc: "Product tile" | Updated documentation

1.0.0-beta.2 - 2020-01-16#

Changed#

  • "Product tile" | Changed symbols to new smart layout of Sketch
  • "Product tile" | Updated assets due to sketch file changes