Layouts are the foundations on which you build your content, so let's get familiar with them! We have two layout types:
View
Column
Opt for Columns if you want to create homepages and desktop-only content. If you want to get more creative and have more flexibility, I'd opt for View Layouts 🙌
View Layouts are also great if you want to create content that needs to be responsive across all devices!
For example, if you want to have text, with a CTA and an image to the right, you can nest View Layouts within each other to achieve this...
🤩 Pro tip: If you want different layout boxes to be the same size horizontally or vertically, use Stretch alignment:
What are Flex Settings?
Flex is a method to offer space distribution within a component. This allows for powerful alignment capabilities and responsiveness for different devices. Flex settings allow you to format layouts within rows or columns. These settings are found under the Child Behavior Layout on the right-hand toolbar of the editor.
Using flexible widths and heights allows you to control how elements align and fill space within a component. These properties dictate how an item will grow or shrink to fit the space available. This is particularly important when you’re thinking about responsive designs, or how your content shows up on bigger and smaller screens.
Shrink if Necessary
If the size of all flex items is larger than the container, items will shrink to fit.
Grow if Possible
This property specifies how much of the remaining space should be assigned to the item/content.
Base Size
The base size is to set content aligned to a vertical grid. It works by adding padding above and below the text to balance the space. You can also make edits to the line height within the Styleguide.
For example, this can be useful when placing multiple cards on a page and keeping consistent alignment throughout each card. You can also use base sizes to create custom and unique layouts stepping out of the grid format.
Wrap Settings:
Wrap settings can be used to spill text over to a new line automatically as the margin is reached, or to fit around embedded elements such as images or video.
For example, 3 images in a row will automatically shift for smaller devices to one card per row, as opposed to shrinking or squeezing the content to fit.
With no-wrap settings, if you have a set of flex items that are too wide for their container, they will overflow. If you want to cause them to wrap once they become too wide you must change the property to wrap.
