---
canonical: https://amplience.com/developers/docs/schema-reference/layout-components/
title: Layout
interactive: true
- Schema examples
description: Reference for Amplience schema layout components including grids, tabs and dividers, used to organise and group properties on the Dynamic Content content form.
audience: Developer
date_published: 2026-04-10
date_modified: 2026-06-02
---
# Layout components
The content form can be used with layout components such as **tabs** and **grids**. These features help organise properties, making forms easier to use by grouping related fields together.
> **Tip: Try the interactive examples on this page**
> Edit the schemas to see how your changes affect the fields they generate.
## Grids
The grid component allows you to group related properties in columns and specify how these columns should be displayed.
### Parameters
| Param | Type | Description |
| ------------ | ------- | ------------------------------------------------------------------ |
| `name` | string | `grid` |
| `numColumns` | integer | The number of columns in each row. |
| `columns` | array | The `span` of each group of columns and the properties it contains |
The `span` parameter specifies how many columns each column group takes up. Each item in the `columns` arrays includes `span` and a `pointers` array containing the properties contained within it.
### Grid example
The example schema below groups image properties together in a grid divided into 12 columns, with each property spanning 6 columns (half the available space). In the form, **Image Link** and **Image SVG** are aligned in one section of the grid, while **Image alt text**, **Image URL**, and **Image Link Target** are grouped on the other.
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://example.com/grid-test",
"title": "Title",
"description": "Description",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"imageLinkGrid": {
"type": "object",
"properties": {
"imageLink": {
"title": "Image Link",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"imageAltText": {
"type": "string",
"title": "Image alt text",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "Description of image for alt tag"
}
}
},
"isSVG": {
"type": "boolean",
"title": "Image SVG",
"description": "Check if image is an SVG"
},
"imageLinkHref": {
"type": "string",
"title": "Image URL",
"format": "uri",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "https://..."
}
}
},
"imageTarget": {
"title": "Image Link Target",
"type": "string",
"oneOf": [
{
"title": "New Tab",
"const": "_blank"
},
{
"title": "Same Tab",
"const": "_self"
}
]
}
},
"ui:component": {
"name": "grid",
"params": {
"numColumns": 12,
"columns": [
{
"span": 6,
"pointers": [
"/imageLink",
"/isSVG"
]
},
{
"span": 6,
"pointers": [
"/imageAltText",
"/imageLinkHref",
"/imageTarget"
]
}
]
}
}
}
},
"propertyOrder": []
}
```
> **Tip: Try the example**
> Try changing the grid groupings, or move properties, to see how the form layout changes.
## Tabs
The tabs component allows you to organise your form so it can be navigated using tabs. You may choose to add advanced options in a separate tab and keep the most commonly used properties in the main tab, for example.
Specify the tab labels, the default tab and the properties that will be included in each tab.
Start with the simple tabs example below, then try the more advanced example with [vertical tabs](#tabs-more-params).
### Parameters
| Parameter | Description |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | `tabs` |
| defaultTab | The name of the tab that will be selected initially |
| orientation | How the tabs are displayed. `horizontal` (default) or `vertical` |
| variant | `default` or `outline`. Should an outline be displayed around the selected tab. |
| grow | `true` or `false` (default). Should the tabs expand to fit the size of the form. |
| items | An array of tabs.
For each entry in the items array there is a `label` and a `pointers` array that contains the property names in JSON pointer format. See [example](#tabs-example). |
### Tabs example
In the simple schema shown below, there are two tabs: image and video, each containing a property for the media itself and a string field.
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://example.com/tabbed-media",
"title": "Image and video tabs",
"description": "Example showing the use of tabs",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"image": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"altimagetext": {
"title": "Alt image text",
"description": "The text to be displayed if the image cannot be displayed",
"type": "string",
"minLength": 0,
"maxLength": 100
},
"video": {
"title": "video",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
}
]
},
"videotitle": {
"title": "Video title",
"description": "Enter the title for the video",
"type": "string",
"minLength": 0,
"maxLength": 50
}
},
"ui:component": {
"name": "tabs",
"params": {
"tabs": {
"defaultTab": "Image",
"items": [
{
"label": "Image",
"pointers": [
"/image",
"/altimagetext"
]
},
{
"label": "Video",
"pointers": [
"/video",
"/videotitle"
]
}
]
}
}
},
"propertyOrder": []
}
```
> **Tip: Try the example**
> Try adding a new tab or move properties between tabs to see how the form layout changes.
## Tabs: more params
This tabs example shows options for a banner, with the fields for an optional banner overlay shown in a separate tab.
The example shows how to use more tabs parameters, including setting the tab orientation to `vertical` (the default is `horizontal`). You can also set `grow` to true so that the tabs fill the space on the form (depending on the tabs orientation). Set `variant` to "outline" to show an outline around each selected tab.
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-vertical-tabs",
"title": "Vertical tabs example",
"description": "A tabs example demonstrating vertical tabs for a banner. Requires Next Generation Authoring to be switched on",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-authoring/schema-examples/#tabs-more-params",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"bannerdesktopimage": {
"title": "Desktop Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"bannermobileimage": {
"title": "Mobile Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"bannerappimage": {
"title": "App Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"banneralttext": {
"type": "string",
"title": "Alt Text",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "Add image alt tag"
}
}
},
"bannerlink": {
"type": "string",
"title": "Banner Link",
"format": "uri",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "/..."
}
}
},
"banneroverlay": {
"type": "object",
"title": "Banner Overlay",
"description": "Add if required",
"properties": {
"overlayshadow": {
"title": "Set shadow",
"type": "boolean"
},
"overlaytheme": {
"title": "Dark mode",
"type": "boolean"
},
"overlayalign": {
"title": "Overlay align",
"type": "string",
"oneOf": [
{
"title": "Left",
"const": "l"
},
{
"title": "Center",
"const": "c"
},
{
"title": "Right",
"const": "r"
}
]
},
"overlayfontsize": {
"title": "Overlay Font Size",
"type": "number",
"ui:component": {
"name": "slider",
"params": {
"px": "xl",
"min": 10,
"max": 18,
"marks": [
{
"value": 10,
"label": "Small"
},
{
"value": 14,
"label": "Medium"
},
{
"value": 18,
"label": "Large"
}
],
"step": 4
}
}
},
"overlaylines": {
"type": "array",
"title": "Overlay Text Line",
"items": {
"type": "string"
},
"maxItems": 2
}
},
"ui:component": {
"params": {
"withHeader": false
}
}
}
},
"ui:component": {
"name": "tabs",
"params": {
"tabs": {
"defaultTab": "Banner",
"orientation": "vertical",
"variant": "default",
"grow": false,
"items": [
{
"label": "Banner",
"pointers": [
"/bannerdesktopimage",
"/bannermobileimage",
"/bannerappimage",
"/banneralttext",
"/bannerlink"
]
},
{
"label": "Overlay (optional)",
"pointers": [
"/banneroverlay"
]
}
]
}
}
},
"propertyOrder": []
}
```
## Divider
A divider is a line of variable width, with an optional label. It’s particularly useful for labelling groups of properties to create notional sections that don’t impact output.
> **Note: Navigation with dividers**
> The divider also provides users with navigation to form sections by automatically generating a menu that is displayed at the top of the form.
>
> Note: Only top level section dividers appear in the generated menu. Nested dividers and dividers within arrays are excluded.
### Parameters
| Param | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `name` | `divider` |
| `label` | The label shown on the divider |
| `labelPosition` | The divider label alignment. `left`, `right` or `center` (default). |
| `size` | The divider line size. `xs` (default), `sm`, `md`, `lg`, `xl` or `xxl`.
Note that the size of the label will not be changed |
| `variant` | The divider line style. `dotted` or `dashed`. A solid line will be used by default if `variant` is not specified |
### Divider example
In the example below, the `numberDivider` property includes a label and has a line size set to medium. Dividers are used for form layout only and are not included in the content item’s JSON output.
Here, the divider acts as a heading for a group of number properties (taken from the number schema example).
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/next-gen-divider",
"title": "Title",
"description": "Description",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"numberDivider": {
"type": "string",
"ui:component": {
"name": "divider",
"params": {
"label": "Number examples",
"size": "md"
}
}
},
"percentValue": {
"type": "integer",
"title": "Percentage",
"description": "Shows use of the suffix parameter",
"examples": [
"20%",
"40%",
"65%"
],
"minimum": 0,
"maximum": 100,
"ui:component": {
"params": {
"placeholder": "50%",
"variant": "filled",
"suffix": "%",
"allowNegative": false
}
}
},
"temperature": {
"type": "number",
"title": "Number Temperature",
"examples": [
"2.5",
"3.7"
],
"minimum": -10,
"maximum": 10,
"ui:component": {
"params": {
"suffix": "\u00b0",
"allowNegative": true,
"step": 0.1,
"precision": 1
}
}
},
"sliderInteger": {
"type": "integer",
"description": "A slider with labels",
"ui:component": {
"name": "slider",
"params": {
"placeholder": "Some useful initial text",
"marks": [
{
"value": 0,
"label": "Transparent"
},
{
"value": 25,
"label": "Faint"
},
{
"value": 50,
"label": "Light"
},
{
"value": 75,
"label": "Dark"
},
{
"value": 100,
"label": "Solid"
}
],
"step": 25
}
}
},
"labelledListWithDecimals": {
"title": "Decimal dropdown with labels",
"description": "A dropdown with user friendly labels",
"type": "number",
"oneOf": [
{
"title": "Low",
"const": 0.45
},
{
"title": "Medium",
"const": 0.75
},
{
"title": "High",
"const": 0.85
}
]
}
},
"propertyOrder": []
}
```
> **Tip: Try the example**
> Try adding another divider to see how the form adjusts.
## Field set
The field set allows you to group items together, display them with a text label, and choose a style variant to differentiate these items from other fields in the form.
### Parameters
| Param | Description |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `fieldset` |
| `variant` | The style of field set box.
`default` a round cornered bounding box with no fill. (Used if no variant is specified)
`filled` filled with the background color and no bounding box line.
`unstyled` just the title, no bounding box and no fill. |
| `radius` | The radius of the bounding box (if shown) `xs` `sm`, `md`, `lg`, `xl` or `xxl`. |
### Field set example
The following schema example shows 3 field set objects with different style variants.
- `fieldset-Tabs` is an object that contains tabs and uses the default style.
- `fieldset-validation` shows the fill variant with the background of the object filled in.
- `dateTimeFields` shows a field set object with no styling and just the title.
On the form, the "Media configuration" group of fields uses the default style, while the "Fields with validation" field set uses the fill variant to make it stand out from the rest of the form.
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/field-set",
"title": "Field set example",
"description": "Schema example for the field set layout component",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"fieldset-Tabs": {
"title": "Media configuration",
"type": "object",
"properties": {
"Media": {
"type": "object",
"ui:component": {
"name": "tabs",
"params": {
"tabs": {
"defaultTab": "tab1",
"items": [
{
"label": "Image",
"pointers": [
"/image",
"/altimagetext"
]
},
{
"label": "Video",
"pointers": [
"/video",
"/videotitle"
]
}
]
}
}
},
"properties": {
"image": {
"title": "Image",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"altimagetext": {
"title": "Alt image text",
"description": "The text to be displayed if the image cannot be displayed",
"type": "string",
"minLength": 0,
"maxLength": 100
},
"video": {
"title": "video",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
}
]
},
"videotitle": {
"title": "Video title",
"description": "Enter the title for the video",
"type": "string",
"minLength": 0,
"maxLength": 50
}
}
}
},
"ui:component": {
"name": "fieldset",
"params": {
"variant": "default"
}
}
},
"fieldset-validation": {
"title": "Fields with validation",
"type": "object",
"properties": {
"simplestringwithmaxandmin": {
"title": "Simple string with maximum length",
"description": "A string that can contain up to 255 characters",
"type": "string"
},
"datewithpatternvalidation": {
"title": "Date validated with a pattern",
"description": "Creation date (YYYY-MM-DD)",
"type": "string",
"maxLength": 10,
"minLength": 10,
"pattern": "^[0-9]{4}-((0[1-9])|(1[0-2]))-((0[1-9])|([1-2][0-9])|(3[0-1]))$"
},
"urlslugpatternvalidation": {
"title": "URL slug",
"description": "URL slug (a-z and 0-9)",
"type": "string",
"minLength": 1,
"maxLength": 100,
"pattern": "^[a-z0-9-]+$"
},
"numbervalidationexample": {
"title": "Number validation example",
"description": "Enter a rating between 10- 100. (must be a multiple of 10)",
"type": "integer",
"minimum": 10,
"maximum": 100,
"multipleOf": 10
}
},
"ui:component": {
"name": "fieldset",
"params": {
"variant": "filled"
}
}
},
"dateTimeFields": {
"title": "Choose the date and time",
"type": "object",
"properties": {
"date": {
"type": "string",
"title": "Date field",
"description": "User selectable date",
"format": "date",
"ui:component": {
"params": {
"placeholder": "Choose a date"
}
}
},
"time": {
"type": "string",
"title": "Time field",
"description": "User selectable time component",
"examples": [
"00:00:01",
"23:59:59"
],
"format": "time",
"ui:component": {
"params": {
"placeholder": "00:00:00",
"pointer": false
}
}
}
},
"ui:component": {
"name": "fieldset",
"params": {
"variant": "unstyled"
}
}
}
}
}
```
> **Tip: Try the example**
> Try changing the `radius` parameter to see how it affects the appearance of the form.
## Field set grid
The field set grid component combines the features of [Grids](#grids) and [Field sets](#field-set) to group related fields in a grid with a title and customizable style. This helps differentiate the fields from the rest of the form and improves the content entry process for users.
### Parameters
| Param | Description |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `fieldset-grid` |
| `numColumns` | The number of columns in each row. |
| `columns` | The `span` of each group of columns and the properties it contains |
| `variant` | The style of field set box.
`default` a round cornered bounding box with no fill. (Used if no variant is specified)
`filled` filled with the background color and no bounding box line. |
The `span` parameter specifies how many columns each column group takes up. Each item in the `columns` arrays includes `span` and a `pointers` array containing the properties contained within it.
### Field set grid example
An example field set grid schema example is shown below. This uses the same example as the [Grid example](#grid-example) with image properties grouped together in a grid divided into 12 columns and each property using half the available space. The field set grid object is configured to fill the background, as well as showing the object title.
The form shows how the field set grid object uses the fill style.
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/field-set-grid",
"title": "Next generation schema examples: field set grid",
"description": "An example of fields arranged in a field set grid",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"imageLinkGrid": {
"title": "Image configuration",
"type": "object",
"properties": {
"imageLink": {
"title": "Image Link",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"imageAltText": {
"type": "string",
"title": "Image alt text",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "Description of image for alt tag"
}
}
},
"isSVG": {
"type": "boolean",
"title": "Image SVG",
"description": "Check if image is an SVG"
},
"imageLinkHref": {
"type": "string",
"title": "Image Link",
"format": "uri",
"ui:component": {
"name": "text-area",
"params": {
"placeholder": "https://..."
}
}
},
"imageTarget": {
"title": "Image Link Target",
"type": "string",
"oneOf": [
{
"title": "New Tab",
"const": "_blank"
},
{
"title": "Same Tab",
"const": "_self"
}
]
}
},
"ui:component": {
"name": "fieldset-grid",
"params": {
"variant": "filled",
"numColumns": 12,
"columns": [
{
"span": 6,
"pointers": [
"/imageLink",
"/isSVG"
]
},
{
"span": 6,
"pointers": [
"/imageAltText",
"/imageLinkHref",
"/imageTarget"
]
}
]
}
}
}
},
"propertyOrder": []
}
```
> **Tip: Try the example**
> Try adjusting the `variant` parameter to `default` to see how the form changes.
## The matrix- question and answer
This example shows an example of how to model a question and answer section using the matrix component.
The `questions` property is an array of `questions` and `answers` strings, with the title of each column defined in the params. In this example we're using text area properties to implement multi lines strings for the user input.
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/matrix-q-and-a",
"title": "Matrix Q and A example",
"description": "How to use the matrix for building a Q and A",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/schema-examples/#the-matrix-question-and-answer",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"sizeGuide": {
"type": "array",
"title": "Questions and answers",
"ui:component": {
"name": "matrix",
"params": {
"columns": [
{
"pointer": "/questions",
"title": "Questions"
},
{
"pointer": "/answers",
"title": "Answers"
}
]
}
},
"items": {
"type": "object",
"properties": {
"questions": {
"type": "string",
"ui:component": {
"name": "text-area",
"params": {
"maxRows": 2,
"autosize": "true"
}
}
},
"answers": {
"type": "string",
"ui:component": {
"name": "text-area",
"params": {
"maxRows": 2,
"autosize": "true"
}
}
}
}
}
}
}
}
```
## The matrix- buyers guide
This example shows how to use the matrix to model a feature comparison buyers guide, in this case for bed linen.
The example includes an image property, together with a boolean and string fields. The `idealFor` property is markdown format and double clicking this field will open the rich text editor.
```json
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://schema-examples.com/buyers-guide-with-images",
"title": "Matrix example- buyers guide",
"description": "Using the matrix to model a buyers guide with images",
"$comment": "Docs: https://amplience.com/developers/docs/next-gen-content-authoring/schema-examples/#the-matrix-buyers-guide",
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
}
],
"type": "object",
"properties": {
"sizeGuide": {
"type": "array",
"title": "Fabric comparison",
"ui:component": {
"name": "matrix",
"params": {
"columns": [
{
"pointer": "/fabric",
"title": "Fabric"
},
{
"pointer": "/image",
"title": "Look",
"width": 200
},
{
"pointer": "/machineWashable",
"title": "Machine washable"
},
{
"pointer": "/durability",
"title": "Durability"
},
{
"pointer": "/idealFor",
"title": "Ideal for"
}
]
}
},
"items": {
"type": "object",
"properties": {
"bedSize": {
"type": "string"
},
"fabric": {
"type": "string",
"ui:component": {
"name": "text-area",
"params": {
"maxRows": 2,
"autosize": "true"
}
}
},
"image": {
"allOf": [
{
"$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
}
]
},
"machineWashable": {
"type": "boolean",
"default": true
},
"durability": {
"type": "string",
"ui:component": {
"name": "text-area",
"params": {
"maxRows": 2,
"autosize": "true"
}
}
},
"idealFor": {
"type": "string",
"format": "markdown"
}
}
}
}
}
}
```