Design system

Block

Used when grouping components into a block with consistent space between.

Code playground

Item 1

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.

Design

To 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

Playground

Properties