Components
Components are 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.
Content layout
AccordionLet users show and hide sections of related content on a page.
CalloutCommunicate important information through a strong visual emphasis.
ContainerGroup information, create hierarchy, and show related information.
DetailsLet users reveal more detailed information when they need it.
Hero bannerA visual band of text, including an image and a call to action.
ListOrganize information into brief and clear groups.
PopoverA small overlay that opens on demand, used in other components.
TableA set of structured data that is easy for a user to scan, examine, and compare.
Feedback and alerts
BadgeSmall labels which hold small amounts of information, system feedback, or states.
ChipAllow the user to enter information, filter content, and make selections.
ModalAn overlay that appears in front of all other content, and requires a user to take an action before continuing.
Notification bannerDisplay important page level information or notifications.
Progress indicatorProvide feedback of progress to users while loading.
Skeleton loadingProvide visual feedback to users while loading a content heavy page or page element.
TooltipA small popover that displays more information about an item.
Inputs and actions
ButtonCarry out an important action or navigate to another page.
Button groupDisplay multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
CheckboxLet the user select one or more options.
Date pickerLets users select a date through a calendar without the need to manually type it in a field.
DropdownPresent a list of options to the user to select from.
File uploaderHelp users select and upload a file.
Icon buttonA compact button with an icon and no text.
InputA single-line field where users can input and edit text.
RadioAllow users to select one option from a set.
Text areaA multi-line field where users can input and edit text.
Structure and navigation
FooterProvides information related your service at the bottom of every page.
Form stepperProvides a visual representation of a form through a series of steps.
HeaderProvide structure to help users find their way around the service.
Microsite headerCommunicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.
PaginationHelp users navigation between multiple pages or screens as part of a set.
Side menuA side navigation that helps the user navigate between pages.
TabsLet users navigate between related sections of content, displaying one section at a time.
Utilities
BlockUsed when grouping components into a block with consistent space between.
DividerIndicate a separation of layout, or to distinguish large chunks of information on a page.
Form itemWraps an input control with a text label, requirement label, helper text, and error text.
GridArrange a number of components into a responsive grid pattern.
IconsA simple and universal graphic symbol representing an action, object, or concept to help guide the user.
SpacerNegative area between the components and the interface.
TextProvides consistent sizing, spacing, and colour to written content.
Book time in drop in hours