Your bookmarks

UI components

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.

React React Native

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.

Button A button is a simple component which displays a single action a user can perform on a page.

React React Native

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.

CallOutBanner Promotes content for users to make an action.

Card Card component is a simple container for grouping some relevant information. It’s possible to add the title and description.

React React Native

CarrierLogo Carrier logo displays one or more logos of transport carriers. It is usually together with the travel itinerary.

Checkbox A checkbox is a form control allowing users to pick more than one option.

ChoiceGroup A choice group adds label above checkboxes or radio buttons and handles them as one related group of choices.

Collapse Hides content that can be shown by user when needed.

CountryFlag A simple component showing flags of countries all over the world.

React React Native

Coupon Use this component when you need to highlight promo codes.

DestinationCard A destination card is clickable component that shows image of location with other related information.

DestinationHeader A destination header can be used as the header for content for any destination.

FeatureIcon Use this component when you need to use icon in PricingTable.

Heading Heading is used for showing content hierarchy and are important for improving the reading experience for our users.

React React Native

Icon Icon draws attention to specific actions in our products.

React React Native

Illustration Use illustration when you need to communicate some information, not just as a visual ornament.

React React Native

InputField An input field is a common form element when you ask users to fill some text information.

React React Native

InputFile An input file is a form element when you ask users to upload some document or attachment.

InputGroup Use input group when you have more related input fields – e.g. for date of birth or phone numbers.

InputStepper It’s great when you want users to incrementally change the amount of something.

List Use list when you need to show more related items.

ListChoice Use list choice to show a selectable list of related items, you can spice it up with an icon or description.

Loading Use loading when there is a chance of user waiting for response or result.

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.

NavigationList Multi-purpose list, using ButtonLinks as children to show navigation.

NotificationBadge Simple non-clickable badge showing information about an amount of something.

Pagination Gives you possibility to paginate pages with a lot of results in the list.

PictureCard Provides the wrapper for a card with picture on background and a few content areas for information.

Popover A simple wrapper for dropdown action.

PricingTable Allows users to choose from different pricing plans.

Radio A radio is a form control allowing users to pick exactly one option from the group.

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.

Separator Visual separator when you need to separate irrelevant content from each other.

ServiceLogo Use this component when you need to use logo for common service.

Slider Slider is great when you want people select from range of defined values.

Stepper It’s great when you want users to incrementally change the amount of something. Without having an input there.

StopoverArrow When you need to show how many stopovers is between two destinations.

Table Nice striped table for your content. We’re not in 1998, so don’t use it for layout. Please.

Tag When you need something that can be selected and unselected or removed later.

Text The most basic component for rendering text blocks.

Textarea When you need user to insert a longer text in your form.

TextLink Text links are used in paragraphs when part of the text needs to be actionable.

React React Native

Tile When you need to wrap your content into something clickable.

React React Native

Tooltip When you need to show additional context after hover.

TripSector When you need to show all your trip sector together.

TripSegment When you want to show info about each connection to user.