Orbit offers options for developing clear layouts in a systematic way that fits the Orbit system. There are a few different components that offer specific possibilities.
To see which component is right for you, try out this interactive decision tree. The reasons for the recommendations are below.
Each of the five basic layout components has specific cases where it’s used:
| Component | Use cases |
|---|---|
| Layout | Fixed page layouts |
| Grid | General screen layout (including modals) |
| Box | Component layout, positioning,spacing, visual style (universal building block for layouts) |
| Stack | For single-direction groups of components
|
| Inline | For groups of components that could go in both directions
|
Components
Page layout
For laying out everything on a screen there are two basic options:
The Layout component offers three basic options for columns. These can be slightly customized in terms of when they appear. But the basic format is set.
Grids offer more flexibility in laying out your screens. It lets you set up rows and columns for your screens that can change based on screen size and media queries. There are many more options that you have to set.
Building block
To build your screens, Orbit offers the basic building block of a box.
It provides a range of options on position, layout, spacing, and visuals. Use it within your page layout to get your components exactly where you want them.
The many options available offer you freedom for your layouts. But it also means you have more things you need to set.
Boxes work well for positioning and providing spacing for both individual and groups of components.
Groups of components
In addition to boxes, there are two components that offer consistent spacing for groups of components:
Stacks work when you want to focus on a group of components laid out in a single direction. The direction can be either horizontal or vertical and there are lots of options for the components to fit into the space. In all cases, there is consistent spacing in a single direction.
Inline components give you consistent spacing both horizontally and vertically. They work for sets of components that might span multiple lines. There are fewer options for fitting the components into the space, but there is consistent spacing in two directions.