UI Components

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.

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

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 12-column responsive grid allows layout and content to be resized based on screen resolution.

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 measurements or points of interest, illustrated along horizonta...

Gauges are designed to display real-time information to help monitor business operations. They are similar to KPIs, but differ by focusin...

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 charts are circular charts used to illustrate the relative value of each category making up a larger whole.

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.

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.

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.

Toggles can take one of three forms: text-based toggles, icon-based toggles or switches.

Inline text links are used to provide navigation to another screen and/or to prompt additional information to be displayed on the current...

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.

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

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 that don’t require a side panel menu.

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.