Components Overview
Components and patterns are basic UI elements which can be used to build on-brand UIs.
| Accordion | Component | The Accordion component allows users to show and hide sections of content. | Live |
| Alert | Component | The Alert component highlights important information, warnings, or feedback to the user. | Live |
Autocomplete | Component | The Autocomplete component provides a user with pre-loaded suggestions as they type. | Live |
| Badge | Component | The Badge component highlights an item's status or category. | Live |
| Banner | Example | The Banner example highlights key content and actions on a page. | Live |
Brand Provider | Component | The Brand Provider component sets the brand tokens and base level styling for applications. | Live |
| Button | Component | The Button component allows users to perform or trigger an action. | Live |
Button Group | Pattern | The Button Group pattern keeps related buttons visually linked and arranged across viewports. | Live |
| Card | Example | The Card example visually groups related content or tasks. | Live |
| Checkbox | Component | The Checkbox component allows users to make one or more selections from a set of options. | Live |
| Column | Component | The Column component allows you to set individual column widths in a layout. | Live |
| Container | Component | The Container component groups UI elements in a fixed area. | Live |
Content Switcher | Example | The Content Switcher example allows users to edit content in context. | Live |
Date Format | Pattern | The Date Format pattern automatically formats a users date input. | Live |
| Datepicker | Component | The Datepicker component provides a visual representation for selecting dates. | Live |
| Divider | Pattern | The Divider pattern provides the user a visual break between content. | Live |
| Favicon | Component | The Favicon component generates the brand specific favicon for an application. | Live |
| Footer | Component | The Footer component holds persistent links and information at the bottom of each page. | Live |
| Form Group | Pattern | The Form Group pattern is a consistent layout to show the relationship between form fields and labels. | Live |
| Grid | Component | The Grid component allows you to set equally sized columns in a grid layout. | Live |
| Header | Component | The Header component displays core branding and navigation at the top of each page. | Live |
| Headings | Pattern | Defines HTML headings | Live |
| Icon | Component | The Icon component ensures consistent styling of icons across applications. | Live |
| Input | Component | The Input component allows users to enter a single-line of text. | Live |
Input Format | Pattern | The Input Format pattern automatically formats a users input to the data type. | Live |
Input Group | Component | The Input Group component joins a single-line text input with a defined input context or available action. | Live |
| Label | Component | The Label component guides a user on the expected input of a form field. | Live |
| Legend | Component | The Legend component guides a user on the expected selection for a group of form fields. | Live |
| Link | Component | The Link component ensures consistent styling of text links across applications. | Live |
| Lists | Pattern | The List pattern allows content to be presented in ordered and unordered lists. | Live |
| Logo | Component | The Logo component displays the brand's logo. | Live |
| Message | Component | The Message component displays contextual text based alerts to users. | Live |
| Modal | Component | The Modal component displays critical information or actions that require immediate user response. | Live |
| Navigation | Example | The Navigation example guide users through site content. | Live |
Number Plate | Pattern | The Number Plate pattern styles text to resemble a number plate. | Live |
| Password | Component | The Password component provides a secure single-line input for password entry. | Live |
| Price | Pattern | The Price pattern provides consistent formatting for presenting numbers in currently format. | Live |
Progress Loader | Component | The Progress Loader component shows the progress of an ongoing action. | Live |
| Radio | Component | The Radio component allows users to make a single selection for a set of options. | Live |
Radio Block | Component | The Radio Block component provides users with block-styled, visual options which are individually selectable. | Live |
Segmented Control | Component | The Segmented Control component presents mutually exclusive options horizontally. | Live |
| Select | Component | The Select component allows users to make a single choice from a list of available options. | Live |
| Skip Links | Component | The Skip Links component allows users to jump to different content areas on a page. | Live |
| Spinner | Component | The Spinner component indicates an ongoing process or loading state. | Live |
| Tabs | Component | The Tabs component allows users to switch between different panels of content. | Live |
| Text | Example | Defines HTML text | Live |
| Textarea | Component | The Textarea component allows users to enter multiple lines of text. | Live |
| Timepicker | Example | The Timepicker example automatically formats a users time input. | Live |
Toggle Content | Pattern | The Toggle Content pattern allows users to show and hide snippets of content. | Live |
| Tooltip | Component | The Tooltip component provides helpful or contextual information on interaction. | Live |