Guidelines

Usage

A Product Item should:

Be used for leading users to a product detail page on the same platform.

Entirely be a click-target and never include interactive elements like links or buttons.

Have the amount of its content with the other items aligned when used in a group.

Content

A Product Item should:

Use enticing content that sets expectations correctly. For the images, check out the Image guidelines.

Have its content avoid call-to-action type of callouts, like “Check out...”, or “New...”.

Have its content remain the same on all sizes.

Include a headline and meta-text for maximum engagement and better context, even though the meta-text is an optional field.

Limit the headline to a maximum of 2 rows of text, after which it's truncated with an ellipsis.

Limit the meta-text to a maximum of 1 row of text.

Have its additional-info used for content when more than a single line of meta-text is needed. Additional-info is not truncated.

Have its prefix of the additional-info have the same color as the text when it is an Icon.

🎨 How to implement a prefix in Figma

A Product Items' meta-information can include a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as flags for the nationality meta-information or icons for additional meta-information. Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.

Image Format

A Product Item should:

Have its image-containers' width and height fixed to 40x40px for 'small' and 88x88px for 'medium' asset items.

Have its inserted image in portrait format centered horizontally in the image-container.

To add a custom aspect ratio in Figma

The Figma component provides image formats with aspect ratios 1:1 for square and 2:3 for portrait images.

A special approach in Figma is necessary to insert an image with a custom aspect ratio to the Product Item:

Process for adding a custom aspect ratio:

Create an Element, 40x40px for 'small' or 88x88px for 'medium' size Product Item.

Wrap it in an auto-layout container with 0px padding and make sure the element has no background color. Set alignment to 'Align Center'.

Set containers’ resizing constraints to ‘fixed’.

Insert an image to the auto-layout and adjust the width and height to have its long side be a maximum of 40 or 88 pixels, respectively.

Create a component out of the element.

Swap the ‘product-image-container’ in the asset item with the new component.

Appearance

A Product Item should:

Have appearance be set to 'dark' in light interfaces and 'light' in dark interfaces.

Have its appearance align with the other Items when used in a group.

Size

A Product Item should:

Use size 'small' for condensed layout where multiple Items are displayed in a list or rail.

Have its width set, in size 'small', to constrain the width to be a maximum of 30% of the total viewport width on desktop and tablet and a maximum of 50% viewport width on mobile for optimized presentation and readability.

Use size 'medium' for more generous layouts where there is only one Item presented at a time.

Have its width, in size 'medium', to be constrained to a maximum of 30% on desktop, 40% on tablet, and less than 90% on mobile of the total viewport width.