🏗️Generating Custom Rows from existing content

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.

General row parameters

name

The row’s name:

A string of plain text that identifies the row.
Displayed in the row card when the row is shown in the Rows panel.
Included in the textual content used in searches

background image

Set a row background image.

Properties:

background-image: valid image url
background-repeat: repeat | no-repeat
background-position: top | bottom + left | center | right
background-color: #c2c2c2 // CSS value

display conditions

Set a row display condition. Check the display conditions documentation for further details.

Properties:

display-condition
- type
- label
- description
- before
- after

mobile

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.

colStackOnMobile: true | false

columns

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:

12
9, 3
8, 4
6, 6
6, 3, 3
4, 8
4, 4, 4
3, 9
3, 3, 6
3, 6, 3
3, 3, 3, 3

All the columns weight inside a row must sum 12 as the total value.

Simplified Row Schema

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.

You can reference the simplified schema in the following code snippet:

{
  $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',
          },
        },
      },
    },
  },
}

modules

List of content modules inside a column

type

Every module is identified by a type parameter. Available types are:

title
paragraph
image
button
divider
HTML

Each module type has a set of available options. If none is included, the editor will use the default values.

Content types scheme and parameters

Text


{
  "type": "title",
  "text": "I'm a headline."
}, {
  "type": "paragraph",
  "text": "I can be a long paragraph, a short sentence, or a simple word."
}

title adds the text with the following attributes:

Font-size: 18px
Font-weight: Bold
Text-align: left

paragraph will use the following formatting:

Font-size: 14px
Text-align: left

text contains the string that will be displayed as content:

Must be a plain text string
Quotation marks must be escaped to be compliant with the JSON format
If not included, a default “Loren Ipsum” text string will be used

Additional text parameters


"align": "center" "left" "right"
"size": integer // value in px
"bold": boolean
"italic": boolean
"underline": boolean
"color": "#CFCFCF"
"linkColor": "#CFCFCF"

Image


{
    "type": "image",
    "src": "https://static.pexels.com/photos/248280/pexels-photo-248280.jpeg",
    "href": "https://www.beefree.io", //optional 
    "alt": "This is a sample image", //optional 
    "dynamicSrc": "http://srcto/dynamic/src" //optional 
}

src image public URL

href Image action URL (link)

alt alternate text

dynamicSrc when added, the content applies the dynamic image behavior and uses the value as dynamic URL

Button


{
  "type": "button",
  "text": "Read more",
  "href": "https://lipsum.com"
},{
  "module": "button",
  "text": "Keep in touch",
  "href": "mailto:growth@beefree.io?subject=Custom content test&body=Sent from a custom button"
}

text text string that will be displayed as the button content. Must be a plain text string.

If not included, a default text string will be used

href button action URL (link)

Additional button parameters


"color": "#CFCFCF"
"background-color": "#C2C2C2"

Divider


{"type":"divider"}

Currently there are no additional parameters.

HTML


{"type":"html","html":"<div class=\'our-class\'>This is custom HTML.<\/div>"}

PreviousDisplaying Saved Rows NextExtending Custom Rows with content dialog

Last updated 1 month ago