Alert Alert messages intend to break the flow of the user. They aim to raise awareness about key decisions that users have to make.
Badge We use badges when we need to inform our users about relevant information, e.g., booking status. The badge is not clickable.
Breadcrumbs Breadcrumbs show the user where the current page in the hierarchy of the whole site. They’re not supposed to show the following steps.
ButtonGroup A button group is a component allowing to put more buttons together when actions are related to each other.
ButtonLink Button links are mix of text links and buttons. They are supposed to be used when a context says it’s clickable element.
Card Card component is a simple container for grouping some relevant information. It’s possible to add the title and description.
CarrierLogo Carrier logo displays one or more logos of transport carriers. It is usually together with the travel itinerary.
ChoiceGroup A choice group adds label above checkboxes or radio buttons and handles them as one related group of choices.
DestinationCard A destination card is clickable component that shows image of location with other related information.
Heading Heading is used for showing content hierarchy and are important for improving the reading experience for our users.
Illustration Use illustration when you need to communicate some information, not just as a visual ornament.
InputField An input field is a common form element when you ask users to fill some text information.
InputGroup Use input group when you have more related input fields – e.g. for date of birth or phone numbers.
ListChoice Use list choice to show a selectable list of related items, you can spice it up with an icon or description.
Modal Use modal when you need user to interact with some action but you don’t want user to lose the context of previous page.
PictureCard Provides the wrapper for a card with picture on background and a few content areas for information.
RatingStars Rating stars shows a rating of some item, e.g. hotel. They are not supposed to be interactive.
Select A select is a simple form control element to use when user needs to select from bigger amount of choices.
Stepper It’s great when you want users to incrementally change the amount of something. Without having an input there.