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
DetailsGitHub issuesFigmaLet users reveal more detailed information when they need it.Related:Accordion, Form item
Code playground
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel lacinia metus, sed sodales lectus. Aliquam sed volutpat velit. Sed in lacus ut dui placerat accumsan malesuada quis erat. Aenean mi diam, rhoncus vitae justo eu, venenatis maximus nunc. In vel est commodo, porttitor sem vel, tincidunt ipsum. In hac habitasse platea dictumst. Mauris varius mollis dui. Aenean ut dui eu arcu rutrum auctor. Curabitur cursus velit vel libero sollicitudin tincidunt. Proin tincidunt, enim et ultrices rhoncus, nibh leo imperdiet sapien, sed porttitor ipsum nulla non massa. Nulla facilisi.
Properties
Examples

Show more information to help answer a question

This question helps us better understand your situation and ensure that you receive the right information and support.

Example below: Advanced Education - Pay for my education

Show lists as more information to help answer a question

Examples of education expenses
  • Laptop and computer hardware
  • Computer apps and subscriptions
  • Home internet
  • Testing and exam fees
  • Work or school clothing, like work boots
Do not include
  • Tuition
  • Mandatory fees
  • Books and supplies
  • School association fees

Ask a user for direct deposit information

Direct deposit information

Find this information on your bank's website or on your personal cheques. Contact your bank if you can't find this information.

Below is an example of where you can find the required bank information on a personal cheque.

Design
Detailed design documentation for this component can be found on its component page in Figma.
Accessibility
Accessibility documentation for this component can be found on its component page in Figma. More accessibility guidance for design and development is coming soon.
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