Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxContainerDate pickerDetailsDividerDropdownFile uploaderFilter chipFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsTextText areaTooltip

Tabs

Let users navigate between related sections of content, displaying one section at a time.

Code examples
Tab Item 1Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Tab Item 2Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Tab Item 3Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Show different views of data in a table

All
StatusTextNumberAction
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Review pending
StatusTextNumberAction
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Complete
StatusTextNumberAction
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action

Set a specific tab to be active

All
StatusTextNumberAction
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Review pending
StatusTextNumberAction
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Complete
StatusTextNumberAction
Lorem Ipsum1234567890Action
Lorem Ipsum1234567890Action
Design guidelines
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 startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes