UI Components

The Accordion is a toggle control for displaying content or form elements within a closely related set.

Carousels allow users to cycle through a series of related content within a single row of space.

Expand/collapse allows users to toggle between displaying and hiding a section of content.

Filters allow users to narrow a set of data based on one or more criteria.

A footer appears at the bottom of all pages and provides access to links and other content.

A header appears on every screen and provides navigation to main sections within the application. It may also include branding and persis...

Links are used to provide navigation to another screen or prompt the display of additional information on the current screen.

Modal windows are secondary content areas that allow a user to focus on a subtask without leaving the context of the current screen. They...

Pagination & View More are controls that allow users to view additional records within a data set.

Panels are a type of container that provide a means of grouping and arranging sections of content in a visually pleasing manner. Panels m...

Panel menus are used to display links related to a section of an application.

The scroll-to-top button allows the user to quickly return to the top of a page.

Tables display related data in a series of columns and rows to allow users to compare, analyze or edit large sets of information.

Tabs allow users to explore multiple views of a related data set.

Toolbars provide access to functions related to a single screen or container within a screen. They may appear in Tables, Panels, and othe...

Our approach to data visualization is in keeping with the broader guiding principles of Spark

Color should be used in a manner that is consistent with the Spark Color Palette

Bar charts are used to compare the relationship of a data set against two primary measurements or points of interest, illustrated along h...

Drilldown navigation appears in the context of a data visualization when the user “drills down” to a detailed view within the chart or gr...

Gauges are focused visualizations that show the current state of a metric in relation to another value of that metric, usually a target.

KPI Bars display numerical or graphical indications of important business measurements. They provide at-a-glance status of specific busin...

A legend is a key that defines the visual representation of the data shown in a graph, chart or other visualization.

Line graphs display data points connected by a line. They may include a single line to represent one category within the data set or mult...

Pie and Donut Charts are circular charts that illustrate the relationship between parts to the greater whole.

Our approach to designing forms is in keeping with the broader guiding principles of Sabre Spark

Error Messages communicate problems that have occurred and what users can do to resolve them.

Auto Suggest provides a short list of suggested responses based on a user’s input. The suggestions may include icons and other informati...

Buttons allow users to perform actions.

A checkbox allows a user to select one or more items from a set of options. It may also be used to agree to a statement.

Date Selection allows users to specify a single date or a range of dates.

The FAB represents the primary action on a screen and can trigger a single action or display a menu of multiple actions.

A Multi-Select input is a form control for selecting multiple items from a list of options. There are two variations in Spark: a custom c...

A Number Selector allows the user to add or remove quantities incrementally.

The Payment components offer users one or more methods of entering credit card and/or other payment information.

Radio buttons allow users to select a single option from a set of options.

A select input is a form control for selecting a single item from a list of options.

Sliders allow users to select a single value or multiple values from a defined range.

Text input fields allow users to enter or edit text.

Time Selection components allow users to specify a time, timeframe or range of time (beginning and end).

Toggles allow users to select between a small number of mutually exclusive options.

Our approach to messaging is in keeping with the broader guiding principles of Sabre Spark.

Content loading elements and progressive loading techniques provide information about a page’s structure while the user waits for it to l...

Avatars provide a quick visual identification of people and are used to access profile-related functions, such as sign-in/out, preference...

Badges are a way of making elements in the interface stand out to users. They should be used sparingly to call attention to important sta...

Messaging is used to communicate important information related to a screen, section of a screen, or specific form field. Messages may app...

Popovers are a type of container that appear over existing content on the page. Popovers allow users to either enter additional data rela...

Progress indicators inform the user that something is happening and give users confidence that things are going smoothly.

The Step Indicator guides users through a number of steps across multiple screens in order to complete the task.

Toast notifications are messages that disappear automatically after a defined amount of time.

Tooltips are brief labels that may be displayed when the user hovers over a link, button or icon on desktop.

The Transaction Summary Bar displays a summary of key information about a transaction, such as a hotel or flight reservation.

This template illustrates how filters could be used in conjunction with other components and page elements

This template is suitable for most form input pages and can be customized to fit a variety of application types.

This template may be used when a form appears inside of a tabbed set.

This template may be used when a form input page also requires a panel menu to appear on the screen (medium, large, xl sizes only).

A sign-in screen is displayed when a user must provide a username, password or other credentials before accessing an application.

This layout provides a starting point for screens with a side panel menu.

A splash screen is an optional screen that may appear when the user first opens an application.

This layout provides a starting point for screens that use a tabbed set as the primary content container and don’t require a side panel m...

This layout provides a starting point for screens displaying a basic panel container with a side panel menu.

This layout provides a starting point for a Table with a Toolbar