Layout – WET4 – CRA user-centred design guide
On this page
Banner
For details on the:
- Government of Canada signature
- Language toggle
- Site search box
- Theme and topic menu
- Breadcrumb trail
- Background colour
Refer to: Global header - Canada.ca design pattern
Footer
For details on the:
- Report a problem
- Share this page
- Date modified
- Footer links
- Sub-footer links
- Canada wordmark
Refer to: Site footer - Canada.ca design pattern
Width and breakpoints
The layout uses Bootstrap 3. For full details, refer to: Grids
Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
Large devices Desktops (≥1200px) |
|
|---|---|---|---|---|
| Container width | None (auto) | 750px | 970px | 1170px |
| Maximum number of columns | 12 | 12 | 12 | 12 |
| Individual column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 15px left and 15px right of each grid cell | 15px left and 15px right of each grid cell | 15px left and 15px right of each grid cell | 15px left and 15px right of each grid cell |
- Date modified: