All Components
Reusable parts of the user interface that have been made to support a variety of applications. You can use individual components in many different patterns and contexts.
49 components
Accordion
Let users show and hide sections of related content on a page.
Badge
Small labels which hold small amounts of information, system feedback, or states.
Block
Group components into a block with consistent space between.
Button
Carry out an important action or navigate to another page.
Button group
Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
Callout
Communicate important information through a strong visual emphasis.
Checkbox
Let the user select one or more options.
Checkbox list
A multiple selection input.
Circular progress indicator
Provide feedback of progress to users while loading.
Container
Group information, create hierarchy, and show related information.
Data Grid
Advanced table with sorting and selection.
Date picker
Lets users select a date through a calendar without the need to manually type it in a field.
Details
Let users reveal more detailed information when they need it.
Divider
Indicate a separation of layout, or to distinguish large chunks of information on a page.
Drawer
A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.
Dropdown
Present a list of options to the user to select from.
File uploader
Help users select and upload a file.
Filter chip
Allow the user to enter information, filter content, and make selections.
Footer
Provides information related your service at the bottom of every page.
Form
Container for form inputs and validation.
Form item
Wraps an input control with a text label, requirement label, helper text, and error text.
Form stepper
Provides a visual representation of a form through a series of steps.
Grid
Arrange a number of components into a responsive grid pattern.
Header
Provide structure to help users find their way around the service.
Hero banner
A visual band of text, including an image and a call to action.
Icon button
A compact button with an icon and no text.
Icons
A simple and universal graphic symbol representing an action, object, or concept to help guide the user.
Input
A single-line field where users can input and edit text.
Linear progress indicator
Provide visual feedback to users while loading.
Link
Wraps an anchor element to add icons or margins.
Link Button
Button styled as a link for secondary actions.
Menu button
A button with more than one action.
Microsite header
Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.
Modal
An overlay that appears in front of all other content, and requires a user to take an action before continuing.
Notification banner
Display important page level information or notifications.
Page Block
Full-width section with optional background.
Pagination
Help users navigation between multiple pages or screens as part of a set.
Popover
A small overlay that opens on demand, used in other components.
Radio
Allow users to select one option from a set.
Side menu
A side navigation that helps the user navigate between pages.
Skeleton loader
Provide visual feedback to users while loading a content heavy page or page element.
Spacer
Negative area between the components and the interface.
Table
A set of structured data that is easy for a user to scan, examine, and compare.
Tabs
Let users navigate between related sections of content, displaying one section at a time.
Temporary notification
A notification that appears at the bottom of the screen.
Text
Provides consistent sizing, spacing, and colour to written content.
Text area
A multi-line field where users can input and edit text.
Tooltip
A small popover that displays more information about an item.
Work Side Menu
Side menu variant for worker applications.