🧭 Guide

#Nesting

We have five components to control the layout of content on a page. They’re all invisible, except for the card component. They can be nested inside each other, like Russian dolls. The nesting order, from largest to smallest doll, is as follows:

1. Grid. Wrap it around Grid.Section components to display the cards inside them in a grid.
2. Grid.Section. Wrap it around one or multiple cards. Use it to control their size. It also provides appropriate padding and makes cards responsive, by adjusting their width on smaller viewports.
3. Card. Wrap it around layout, content, or other “regular” components. Use it to visually group related information, controls and actions.
4. Content.Layout. Wrap it around multiple content components. Use it to control their padding, alignment, and positioning.
5. Content. Wrap it around one or multiple “regular” components, such as a text-container. Use it to control the padding, position, and aligmnent of the components.

#Interactive Visualization

An interactive visualization of this nested layout system be seen below. Borders and backgrounds have been added to make the normally invisble components visible. This styling can be toggled on and off with the checkboxes below the example.