About this block
The LayoutBlock is a multi-column layout container. It divides the page horizontally into 2 or 3 columns, each of which can hold its own ContentArea with any combination of blocks. The column distribution is controlled by the Width field, which accepts values like 50-50, 33-67, 67-33 and 33-33-33.
LayoutBlock is essential whenever you need to present two related pieces of content side by side — for example, a RichTextBlock next to a QuickLinksBlock, or an ImageBlock next to a QuoteBlock.
Width values
| Value | Layout | Best for |
|---|---|---|
| 50-50 | Two equal columns | Balanced comparisons, text + quote, two images |
| 67-33 | Wide left, narrow right | Body text + sidebar navigation or quick links |
| 33-67 | Narrow left, wide right | Icon/label column + main content |
| 33-33-33 | Three equal columns | Three parallel items without images |
Tips
- Do not nest LayoutBlocks inside each other — it leads to unpredictable responsive behaviour
- On mobile, columns stack vertically in order (Column 1 first, then Column 2, then Column 3)
- Keep column content at roughly equal length to avoid awkward whitespace on desktop