Guidelines

Usage

A Default Item should:

Be used as a fallback teaser for leading a user to unspecific content.

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

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

Content

A Default Item should:

Use enticing content that sets expectations correctly. For the images, check out the Image guidelines. The image is a slot where a custom component can be swapped into if wanted.

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-primary for maximum engagement and better context, even though the reading time is an optional field.

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

Have its meta-text-secondary used for content when more than a single line of meta-text is needed. Both primary and secondary meta-text are truncated to 1 line, but can be changed if needed or if it helps it align with other Items in a group.

Have its prefix of meta-text-primary and meta-text-secondary have the same color as the text when it is an Icon.

🎨 How to implement a prefix in Figma

A Default Items' primary and secondary meta-text 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.

When multiple prefixes are presented in a Default Item, have the size of the prefixes be harmonious. 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 Default Item should:

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

How to add a custom aspect ratio

The Figma component provides a square image format as default. A special approach in Figma is necessary to insert an image with a custom aspect ratio to the Default Item:

Create an Element, 40x40px for 'small' or 88x88px for 'medium'

Wrap it in an auto-layout container with 0px padding

Set containers’ resizing constraints to ‘fixed’

Insert an image into the auto layout and adjust the height and width so that the longest side of the image is 88px and 40px long respectively.

4px border radius aligns it with the Asset Item style, if applied check "Clip content" on.

Center align the image

Set the images resizing constraints to ‘fill’ set it to “fit”

Go to the image settings and set the image set it to “fit”

Make sure the element has no background color.

Create a component out of the element.

Swap the ‘default-item-image-slot’ in the Default Item with the new component.

Appearance

A Default 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 Default 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.