Web Components
What are Web Components
Components are the reusable building blocks of our design system. They are a collection of carefully crafted user interface elements that are designed to help engineers and designers to create consistent experiences for Red Bull consumers.
A component’s visual appearance and functionality can be controlled with so-called properties that can be passed to a component in Figma and Code. The combination of properties results in a unique variant of a component. The design guidelines on a component’s documentation page will further guide the usage and application of variants in certain use cases.
Overview
Actions
Asset Items
A Default Item is a fallback for creating visual and engaging teasers for unspecific types of content.
A Link Item is a teaser for linked external content.
A Person Item can either serve as a teaser for a person’s internal or external profile page or to feature a person.
A Product Item is a teaser to the detail page of a product.
A Story Item is a teaser for editorial content, leading users to a story page.
A Video Item serves as a teaser for a Video asset linking to it.
Cards
A Default Card is a fallback for creating visual and engaging teasers for unspecific types of content.
A Link Card is a way to feature external assets on Red Bull's web platforms.
A Person Card is a teaser for a person's profile page.
A Product Card is a teaser of the detail page of a product.
A Story Card is a teaser for an editorial content piece.
A Video Card is a teaser for an online video.
Form Fields
Checkbox
Checkboxes allow users to select none, one, or more options from a list.
A Checkbox Group combines two or more Checkboxes as one form field, providing multiple choices to a user.
Input
Inputs allow users to submit or edit data.
Radios provide users with a single choice in a list of options.
Select
A Select allows a user to make a selection from a list of options.
Textarea
Textareas allow users to submit or edit long data.
Images & Icons
Avatar
An Avatar refers to a visual element that represents a user or a person.
Flag
A Flag is a visual representation of a country, nationality, or language.
Icon
Icons are visual representations of commands and actions or common information.
Image
A component to preload and display image assets.
Use the Media Preview component to display media within components or content.
Indicators
Popups & Overlays
Tooltip
Tooltips are floating, user-triggered messages that provide contextual information about a user interface element or feature.
Typography
Utilities
Mode
The Mode is a utility that allows you to control the appearance of nested components in one go.