Guidelines

Usage

A Link Item should:

Be used as a teaser for external assets on Red Bull's web platforms.

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 Link 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 an URL with a prefix for maximum engagement and better context, even though the URL 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 URL to a maximum of 1 row of text so that the ellipsis is displayed before the last letter of the domain name when it runs out of space, i.e. "domain.nam...e.com".

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 url and additional-info have the same color as the text when it is an Icon.

🎨 How to implement a prefix in Figma

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