Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.Support for the Long Term Support (LTS) version of the Design system will be available until September 2025. View the upgrade guide
AllAccordionCalloutContainerDetailsHero bannerListPopoverTableTextBadgeFilter chipModalNotification bannerProgress indicatorSkeleton loaderTooltipButtonButton groupCheckboxDate pickerDropdownFile uploaderIcon buttonInputRadioText areaDrawer FooterForm stepperHeaderMicrosite headerPaginationSide menuTabsBlockDividerForm itemGridIconsLinkSpacer
ListGitHub issues
FigmaOrganize information into brief and clear groups.Related:Details
Examples

Ordered list

  1. An ordered item
    • An unordered item
    • A longer item that wraps to a second line
      • An item on a 3rd level
  2. An ordered item
    • An unordered item
      • An item on a third level
      • A second item on a 3rd level
        • An item on a 4th level

Unordered list

  • Milk
  • Cheese
    • Blue cheese
    • Feta
Design
Detailed design documentation for this component can be found on its component page in Figma.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes