Page Grid Component
UI Component
Changed on:
7 Sept 2026
Overview
The Page Grid is a Mystique layout component that groups related content into a section. Optional padding and a configurable background can be applied to set the section apart visually.It renders as a grid container and does not display any content of its own - it lays out its descendants.| Plugin Name | Core |
|---|
Alias
fc.page.grid
Detailed technical description
How It Renders
The Page Grid renders its descendants inside a grid container and applies optional padding and background styling:- When
`indent`is`true`, the container is given 16px of padding; when`false`or omitted, no padding is applied - When
`background`is set, the value is first resolved as a theme palette path (for example`mystique.colours.constants.lightgrey`); if the path does not resolve, the value is used as a raw CSS color (for example a hex value such as`#ff0000`) - When
`background`is omitted, no background color is applied
Behavior
The Page Grid is nestable - a Page Grid can contain other Page Grids or components to build a sectioned layout.It is registered under`category: layout`Properties
| Name | Type | Required | Default | Description |
`indent` | `boolean` | No | `false` | Adds 16px of padding to the container when `true` |
`background` | `string` | No | None |
|
Configuration example
1{
2 "component": "fc.page.grid",
3 "props": {
4 "indent": true,
5 "background": "mystique.colours.constants.lightgrey"
6 },
7 "descendants": []
8}Version History
Recommended Placement
Use the Page Grid to group related content into sections and to build the overall layout of a page or tab - for example, the sections of the Sourcing tab.It is nestable, so it can wrap other Page Grids or components to form nested layout regions.
