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

Text

Provides consistent sizing, spacing, and colour to written content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<GoAText>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</GoAText>
ash1 | h2 | h3 | h4 | h5 | span | div | p
Sets the tag and text size. Defaults to div.
sizeheading-xl | heading-l | heading-m | heading-s | heading-xs | body-l | body-m | body-s | body-xs
Overrides the text size from the 'as' property.
maxWidthstring
Sets the max width. Defaults to 65ch.
colorprimary | secondary
Sets the text colour. Defaults to primary.
mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
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