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
BlockGitHub issuesUsed when grouping components into a block with consistent space between.Related:Divider, Grid, Layout, Spacer
Code playground
Item 1
Item 2
Item 2
Item 3
<GoABlock>
  <div>
    Item 1
  </div>
  <div>
    <div>
      Item 2
    </div>
    <div>
      Item 2
    </div>
  </div>
  <div>
    Item 3
  </div>
</GoABlock>
Properties
gapnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Spacing between items
Defaults to m.
directionrow | column
Stacking direction of child components
Defaults to row.
alignmentcenter | start | end | normal
Primary axis alignment
Defaults to normal.
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.
DesignTo use Block in design, use Figma's built-in auto layout. This will group multiple things with consistent spacing between them, similar to the Block component in code.
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