Layout and spacing
Last updated on August 27, 2024Understand how to lay out and space B.C. Design System components.
On this page:
Layout principles
If needed, use the Bootstrap v5.x grid system and breakpoints as a reference.
The B.C. Design System does not use a hard grid. It provides a set of standardized spacing and sizing measures to help users structure layouts consistently. You can access and use these measures using design tokens.
Sizing and spacing is modelled on an 8-point grid, to:
- Help ensure a harmonious relationship between user interface elements
- Make it easy to assemble layouts that work well across common screen sizes and layouts
The design system currently defines 't-shirt size' options for:
- Margins
- Padding
- Border radius
- Border width
- Icon sizing
Sizing and spacing measures
This list of tokens is provided as a reference. To use tokens, you need to install the package as a dependency and use the appropriate variables for your tech stack.
Most sizing and spacing measures are defined in relative (rem) units. Pixel values assuming a root font size of 16px (the default for most browser user agents) are shown in brackets for reference.
| Property | Usage notes | Token | Value |
|---|---|---|---|
| Margin | No margin | layout.margin.none | 0rem (0px) |
| Margin | layout.margin.hair | 0.125rem (2px) | |
| Margin | layout.margin.xsmall | 0.25rem (4px) | |
| Margin | Default margin value for layout | layout.margin.medium | 0.5rem (8px) |
| Margin | layout.margin.large | 1rem (16px) | |
| Margin | layout.margin.xlarge | 1.5rem (24px) | |
| Margin | layout.margin.xxlarge | 2rem (32px) | |
| Margin | layout.margin.xxxlarge | 2.5rem (40px) | |
| Margin | layout.margin.huge | 3rem (48px) | |
| Padding | No padding | layout.padding.none | 0rem (0px) |
| Padding | layout.padding.hair | 0.125rem (2px) | |
| Padding | layout.padding.xsmall | 0.25rem (4px) | |
| Padding | layout.padding.small | 0.5rem (8px) | |
| Padding | Default padding value for layout | layout.padding.medium | 1rem (16px) |
| Padding | layout.padding.large | 1.5rem (24px) | |
| Padding | layout.padding.xlarge | 2rem (32px) | |
| Border radius | layout.borderRadius.none | 0px | |
| Border radius | layout.borderRadius.small | 2px | |
| Border radius | Default border radius | layout.borderRadius.medium | 4px |
| Border radius | layout.borderRadius.large | 6px | |
| Border width | layout.borderWidth.none | 0px | |
| Border width | layout.borderWidth.small | 1px | |
| Border width | Default border width | layout.borderWidth.medium | 2px |
| Border width | layout.borderWidth.large | 4px | |
| Icon size | icons.size.xsmall | 14px | |
| Icon size | icons.size.small | 16px | |
| Icon size | Default icon size. Assumes icon is a square image | icons.size.medium | 20px |
| Icon size | icons.size.large | 24px | |
| Icon size | icons.size.xlarge | 32px |
Accessibility
Refer to the simplified WCAG guidance to help you ensure your product is accessible:
- Support portrait and landscape display orientation (WCAG Success Criterion 1.3.4, Level AA)
- Use responsive design to avoid losing content or context (WCAG Success Criterion 1.4.10, Level AA)