The Section Layout Component helps authors arrange content in a structured, grid-like layout. This component allows you to customize the number of items displayed per row and adjust the spacing between items. When using this component to display cards, each card will automatically have the same height, ensuring a consistent visual presentation regardless of the content inside.
Example
Content Options
There are no content options on the Section Layout Component itself, but content can be added by dropping components in the “Component drop zone.”
Note: If you want to arrange button components in a grid-like layout, it is recommended to use the “Layout Component - Button Group” instead.
Cards
Example
Lorem ipsum odor amet, consectetuer adipiscing elit. Odio egestas dapibus per in ante nibh quam. Habitasse magnis cubilia proin himenaeos dignissim. Luctus dolor cubilia tristique sapien dolor venenatis egestas ipsum.
Example
Lorem ipsum odor amet, consectetuer adipiscing elit. Odio egestas dapibus per in ante nibh quam. Habitasse magnis cubilia proin himenaeos dignissim. Luctus dolor cubilia tristique sapien dolor venenatis egestas ipsum.
Example
Lorem ipsum odor amet, consectetuer adipiscing elit. Odio egestas dapibus per in ante nibh quam. Habitasse magnis cubilia proin himenaeos dignissim. Luctus dolor cubilia tristique sapien dolor venenatis egestas ipsum.
Images
Text
Lorem ipsum odor amet, consectetuer adipiscing elit. Odio egestas dapibus per in ante nibh quam. Habitasse magnis cubilia proin himenaeos dignissim. Luctus dolor cubilia tristique sapien dolor venenatis egestas ipsum.
Lorem ipsum odor amet, consectetuer adipiscing elit. Odio egestas dapibus per in ante nibh quam. Habitasse magnis cubilia proin himenaeos dignissim. Luctus dolor cubilia tristique sapien dolor venenatis egestas ipsum.
Lorem ipsum odor amet, consectetuer adipiscing elit. Odio egestas dapibus per in ante nibh quam. Habitasse magnis cubilia proin himenaeos dignissim. Luctus dolor cubilia tristique sapien dolor venenatis egestas ipsum.
Image Buttons
Layout and Styling Options
Cards per row
Although the option is called "Card per row," it will work with non-card components.
1
2
3 (default)
4
5
Gutter spacing
Small (default)
Medium
Large
None
Margin Bottom
Margin Bottom: None
Margin Bottom: X-Small
Margin Bottom: Small
Margin Bottom: Medium
Margin Bottom: Large
Margin Bottom: X-Large
the end
Top Bottom
Margin Top: None
Margin Top: X-Small
Margin Top: Small
Margin Top: Medium
Margin Top: Large
Margin Top: X-Large
the end
Usage
Do
- Consider the type of content you’re placing in the grid to ensure a balanced and organized layout.
- Use the component’s settings to adjust the number of items per row for optimal visual appeal.
- Group similar types of content together, such as images, text blocks, or videos, for a cohesive look.
- Preview the layout in different screen sizes to ensure the content displays correctly across devices.
Don't
- Don’t overload the grid with too many items, as it can make the layout feel cluttered and overwhelming.
- Avoid using inconsistent item sizes or shapes within the grid, which can disrupt visual alignment.
- Don't place unrelated content next to each other, as it can confuse the viewer.
- Avoid placing Section Layout Components inside other Section Layout Components, as it can cause layout conflicts.
- Refrain from using this component to display single items; it’s best suited for organizing multiple pieces of content.