Guidelines

Usage

A Story Item should:

Be used as a teaser for leading a user to a Story page.

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

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

Appearance

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