Design system

Spacer

Negative area between the components and the interface.

Code playground

Item 1

<GoABlock gap="none">
  <div>
    Item 1
  </div>
  <GoASpacer></GoASpacer>
  <div>
    Item 1
  </div>
  <GoASpacer></GoASpacer>
  <div>
    Item 1
  </div>
</GoABlock>

Item 1

<GoABlock direction="column" gap="none">
  <div>
    Item 1
  </div>
  <GoASpacer></GoASpacer>
  <div>
    Item 1
  </div>
  <GoASpacer></GoASpacer>
  <div>
    Item 1
  </div>
</GoABlock>

Properties

hSpacingfill | none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Horizontal spacing
Defaults to none.

vSpacingnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Vertical spacing
Defaults to none.

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

Playground

Properties