# 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](/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/other-customizations/advanced-options/display-conditions.md) 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:
```json
{
$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**
```javascript
{
"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**
```javascript
"align": "center" "left" "right"
"size": integer // value in px
"bold": boolean
"italic": boolean
"underline": boolean
"color": "#CFCFCF"
"linkColor": "#CFCFCF"
```
### **Image**
```javascript
{
"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**
```javascript
{
"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**
```javascript
"color": "#CFCFCF"
"background-color": "#C2C2C2"
```
### **Divider**
```javascript
{"type":"divider"}
```
Currently there are no additional parameters.
### **HTML**
```json
{"type":"html","html":"This is custom HTML.<\/div>"}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.beefree.io/beefree-sdk/~/changes/3EjxmC5rAYEIQ0JKR16k/rows/custom-rows/generating-custom-rows-from-existing-content.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.