Guidelines
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.