Custom Rows allows you to easily generate draggable rows from your application content, or other application content, without any design process or complex user interaction.
Set a row background image.
Disable stacking on mobile. Set the value to “false” to disable stacking on mobile. If the value is “true”, or not provided, the columns will stack on mobile.
List of the row columns. Each column type is identified with a weight parameter to indicate how much horizontal space they fill.
We use a 12-column grid with the following values as available combinations:
All the columns weight inside a row must sum 12 as the total value.
This simplified row schema is designed to help you structure and validate rows. It allows you to define rows that contain columns, which can hold various design elements like buttons, images, text, and more, all while enforcing clear rules for responsiveness, styling, and structure. Its simplicity lies in its modular approach: each column and module follows a predictable pattern with reusable definitions like padding and predefined options for properties like alignment and color.
Copy {
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-row',
type: 'object',
required: [
'name',
'columns',
],
definitions: {
padding: {
type: 'integer',
minimum: 0,
maximum: 60,
},
},
properties: {
name: {
type: 'string',
},
colStackOnMobile: {
type: 'boolean',
},
rowReverseColStackOnMobile: {
type: 'boolean',
},
contentAreaBackgroundColor: {
type: 'string',
},
'background-color': {
type: 'string',
},
'background-image': {
type: 'string',
},
'background-position': {
type: 'string',
},
'background-repeat': {
type: 'string',
},
customFields: {
type: 'object',
},
'display-condition': {
type: 'object',
properties: {
type: {
type: 'string',
},
label: {
type: 'string',
},
description: {
type: 'string',
},
before: {
type: 'string',
},
after: {
type: 'string',
},
},
},
metadata: {
type: 'object',
},
columns: {
type: 'array',
minItems: 1,
items: {
type: 'object',
required: [
'weight',
'modules',
],
additionalProperties: false,
properties: {
weight: {
type: 'integer',
minimum: 1,
maximum: 12,
},
'background-color': {
type: 'string',
},
'padding-top': {
$ref: '#/definitions/padding',
},
'padding-right': {
$ref: '#/definitions/padding',
},
'padding-bottom': {
$ref: '#/definitions/padding',
},
'padding-left': {
$ref: '#/definitions/padding',
},
modules: {
type: 'array',
items: {
type: 'object',
discriminator: {
propertyName: 'type',
},
required: [
'type',
],
properties: {
type: {
enum: [
'button',
'divider',
'heading',
'html',
'icons',
'image',
'list',
'menu',
'paragraph',
'title',
],
},
},
oneOf: [
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-button',
type: 'object',
properties: {
type: {
const: 'button',
},
label: {
type: 'string',
format: 'noAnchorTags',
},
text: {
type: 'string',
format: 'noAnchorTags',
},
href: {
type: 'string',
format: 'urlOrMergeTags',
},
target: {
enum: [
'_blank',
'_self',
'_top',
],
},
color: {
type: 'string',
},
'background-color': {
type: 'string',
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-divider',
type: 'object',
properties: {
type: {
const: 'divider',
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-icons',
type: 'object',
properties: {
type: {
const: 'icons',
},
icons: {
type: 'array',
items: {
type: 'object',
additionalProperties: false,
required: [
'image',
'textPosition',
'width',
'height',
],
properties: {
alt: {
type: 'string',
},
text: {
type: 'string',
},
title: {
type: 'string',
},
image: {
type: 'string',
format: 'urlOrMergeTags',
},
href: {
type: 'string',
format: 'urlOrMergeTags',
},
height: {
type: 'string',
},
width: {
type: 'string',
},
target: {
enum: [
'_blank',
'_self',
'_top',
],
},
textPosition: {
enum: [
'left',
'right',
'top',
'bottom',
],
},
},
},
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-image',
type: 'object',
properties: {
type: {
const: 'image',
},
alt: {
type: 'string',
},
href: {
type: 'string',
format: 'urlOrMergeTags',
},
src: {
type: 'string',
format: 'urlOrMergeTags',
},
dynamicSrc: {
type: 'string',
},
target: {
enum: [
'_blank',
'_self',
'_top',
],
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-html',
type: 'object',
properties: {
type: {
const: 'html',
},
html: {
type: 'string',
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-list',
type: 'object',
properties: {
type: {
const: 'list',
},
underline: {
type: 'boolean',
},
italic: {
type: 'boolean',
},
bold: {
type: 'boolean',
},
html: {
type: 'string',
},
text: {
type: 'string',
},
align: {
enum: [
'left',
'center',
'right',
],
},
tag: {
enum: [
'ol',
'ul',
],
},
size: {
type: 'integer',
},
color: {
type: 'string',
},
linkColor: {
type: 'string',
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-menu',
type: 'object',
properties: {
type: {
const: 'menu',
},
items: {
type: 'array',
items: {
type: 'object',
additionalProperties: false,
properties: {
type: {
const: 'menu-item',
},
text: {
type: 'string',
},
link: {
type: 'object',
additionalProperties: false,
properties: {
title: {
type: 'string',
},
href: {
type: 'string',
format: 'urlOrMergeTags',
},
target: {
type: 'string',
enum: [
'_blank',
'_self',
'_top',
],
},
},
},
},
},
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-paragraph',
type: 'object',
properties: {
type: {
const: 'paragraph',
},
underline: {
type: 'boolean',
},
italic: {
type: 'boolean',
},
bold: {
type: 'boolean',
},
html: {
type: 'string',
},
text: {
type: 'string',
},
align: {
enum: [
'left',
'center',
'right',
],
},
size: {
type: 'integer',
},
color: {
type: 'string',
},
linkColor: {
type: 'string',
},
customFields: {
type: 'object',
},
},
},
{
$schema: 'http://json-schema.org/draft-07/schema',
$id: 'BEE-simplified-title',
type: 'object',
properties: {
type: {
enum: ['title', 'heading'],
},
underline: {
type: 'boolean',
},
italic: {
type: 'boolean',
},
bold: {
type: 'boolean',
},
html: {
type: 'string',
},
text: {
type: 'string',
},
align: {
enum: [
'left',
'center',
'right',
],
},
title: {
enum: [
'h1',
'h2',
'h3',
],
},
size: {
type: 'integer',
},
color: {
type: 'string',
},
linkColor: {
type: 'string',
},
customFields: {
type: 'object',
},
},
},
],
},
},
customFields: {
type: 'object',
},
},
},
},
},
} Every module is identified by a type parameter. Available types are:
Each module type has a set of available options. If none is included, the editor will use the default values.
Currently there are no additional parameters.
