Grid
Arc's 12-column responsive grid allows a layout to change dynamically based on the size of the viewport. This helps make layouts consistent across all products built using Arc.
Breakpoints and dimensions
Arc includes 5 breakpoints, each scaling responsively from a minimum width. Most content should not exceed the maximum width. Some elements, like background images, may exceed it.
| Breakpoint | Min Width | Max Width | # Columns | Gutters | Margins |
|---|---|---|---|---|---|
| xs | 320px | 100% | 6 | 24px | 16px |
| s | 636px | 100% | 6 | 24px | 24px |
| m | 768px | 100% | 12 | 24px | 24px |
| l | 1024px | 100% | 12 | 24px | 32px |
| xl | 1280px | 1280px | 12 | 32px | 32px |
Components
Columns
Use Columns to place content on the 12-column grid. Offset columns to guide users on their journey.
Section
Use Section to bound the max width of your content and apply the correct content margins.
Group
Use Group to place items in a row that don't need to align to the 12-column grid. Group places 16px spacing between each item.
In Figma
- Use Figma grid styles to access the Arc breakpoints and columns.
- Use a suitably sized frame for the grid style you're using.
- Adjust the device property on components depending on the viewport you're designing to.
- Use auto layout wherever possible.
Usage guidelines
Don't align every component to the grid.
The grid is for creating layouts that adapt to different viewport sizes, and may not be suitable for all designs. If you need a flexible layout, use the Group component instead.
Don't introduce new gutters or margins.
Use the Arc values for gutters and margins to keep your content on the Arc grid. Watch out for the 32px on the largest breakpoint, which provides extra breathing room on large displays.