animated svg

Component used to display animated Scalable Vector Graphics (SVG)

banner alert

Banners which inform users about important things

banner announcement

Banners for extremely important messages that affect the whole website

breadcrumbs

Breadcrumb trails that show a page's position in the site hierarchy

button

Clickable elements for anything you want people to click on

callout

Popouts for rich tooltips

card

Wrapping containers for consistently styled cards, used instead of custom CSS

checkbox card

Checkbox input with built-in layouting subcomponents

checkbox

Checkboxes for choosing zero, one or more items from a range of options

container

Centres content at standard maximum widths, with no padding on mobile

countdown timer

A countdown timer with a circular progress bar showing the time remaining

currency input

Currency input field for use with CurrenciesCollection

date input

A text input that picks a date or a date range from a calendar

date range calendar

Always-open date range calendar for filter panels and callouts

drawer

Overlay panel that slides in from the screen edge to show additional content

dropdown filter

Button that opens a rich popout of filtering or sorting options

file select

File attachment UI with drag-and-drop or icon modes; it doesn't upload files

file viewer

Previews files in a native viewer on mobile apps and in a modal on desktop

floating action

Floating action is used to notify and provide action for the user.

gallery mosaic

Mosaic grid previews of images and other files, laid out by item count

grid

Responsive 12-column Flexbox grid system, built mobile first

highlight

Highlighting a component

hr

A horizontal divider between sections; check Card and List Item first

icon

Icons from our icon set; ask Design or UI Engineering to add a missing one

image cropper

Crops and resizes base64 images, with a set aspect ratio and output format

input

Inputs that accept typed input from users

label

Form input labels built on the HTML label element, with screen-reader support

link

Anchor tags for links in a line of text, or actions where a button is too big

loading template

Animated placeholders shown while content loads, to reduce layout jitter

location input

Autocompleting location input that sets latitude and longitude on its control

modal

Overlay that blocks the main content until it is explicitly interacted with

more options

Compact list of additional action items

multi select

Multiselects for typing multiple options

multiple location input

Autocompleting "from" and "to" location inputs that can be swapped or cleared

otp input

Single-digit input boxes for one-time codes that move focus as you type

page layout

Base page wrapper with standard background colour, max width and min height

pagination

Pagination buttons only; the paging logic is up to you

phone input

Phone number input field for use with CountriesCollection

progress bar

Bar for showing unitless progress, with values bound to 0 to 100

progress steps

A widget for showing progress of the user on a funnel with multiple steps

pull refresh

Pull-to-refresh container that triggers when pulled down from the top

radio

Radio buttons, used in groups, for selecting one of a set of related options

search

General purpose search with optional rich results rendered from item templates

segmented date input

Date input split into day, month and year fields, with a calendar as backup

select

Inputs for selecting from a menu of items

share buttons

Social Media Platform's sharing buttons

share link

Component that allows users to copy a shareable link.

slider

Slider for choosing a value, or a range with two handles, within set bounds

smart textarea

Textarea that shows customized callouts based on the user's text selection

social buttons

Icons for linking to social media platforms or providing sharing buttons

spinner

A component that indicates loading or processing

split button

Button with a default action and a drop-down list of other predefined actions

table

Tables for dynamic data; follow the examples closely, including the #cell ref

tabs

Tabs for switching between views, with a color input for light or dark text

tag

Tags for skills or filters, which can be clicked or dismissed

textarea

Multi-line inputs for forms

timepicker

Time input with a dropdown of options at set intervals, built on MatTimepicker

toggle buttons

Group of toggle buttons bound to a FormControl, built on fl-button

toggle

Toggle switches for switching between two states or options

widget

The widget card display the information in a single element.