Bricks Layouts

Bricks Builder Layouts Skill

Create ready-to-paste sections and importable templates for Bricks Builder.

Styling Priority

When styling elements, follow this order of preference:

1. Core Framework Classes (core-framework.css) - Use existing utility classes first
2. Inline Settings - Use element settings for element-specific styling
3. Custom CSS - Only for complex/unique styles not covered by framework

The Core Framework provides a comprehensive utility-first CSS library. Always prefer these classes over creating new global classes or inline styles.

Two Layout Formats

Bricks uses two distinct JSON formats:

1. Sections (Copy/Paste Format)

For pasting directly into the builder via clipboard. Used for hero sections, feature blocks, CTAs, etc.

{
  "content": [...elements...],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.0.1",
  "globalClasses": [...class definitions...],
  "globalElements": []
}

2. Templates (Site-Wide Assignment)

Full templates with metadata for importing via Bricks Templates system.

{
  "id": 1195,
  "name": "header-new",
  "title": "Header New",
  "date": "2025-07-24 14:09:56",
  "date_formatted": "July 24, 2025",
  "author": {
    "name": "Author Name",
    "avatar": "https://...",
    "url": "https://..."
  },
  "permalink": "https://example.com/template/header-new/",
  "thumbnail": null,
  "bundles": [],
  "tags": [],
  "type": "header",
  "header": [...elements...],
  "templateType": "header",
  "global_classes": [...class definitions...],
  "globalVariables": [...variables...],
  "globalVariablesCategories": [...]
}

Section Structure (Copy/Paste)

Required Keys

Element Structure

Each element in content array:

{
  "id": "enrntt",
  "name": "section",
  "parent": 0,
  "children": ["azdlaa"],
  "settings": {
    "_cssGlobalClasses": ["classId1", "classId2"]
  },
  "label": "Hero"
}

Element Types Reference

Layout Elements

Content Elements

Navigation Elements

Interactive Elements

Utility Elements

Element Settings by Type

Heading

{
  "text": "Welcome to Our Site",
  "tag": "h1",
  "_cssGlobalClasses": ["heading-1"],
  "_typography": {
    "font-family": "Inter",
    "font-size": "var(--text-3xl)",
    "font-weight": "700",
    "color": {"raw": "var(--color-secondary)"},
    "text-align": "center"
  }
}

Text (Rich Text)

{
  "text": "<p>Paragraph with <strong>bold</strong> and <em>italic</em> text.</p>",
  "_cssGlobalClasses": ["body-text"],
  "_typography": {
    "font-size": "var(--text-sm)",
    "color": {"raw": "var(--color-tertiary)"}
  }
}

Button

{
  "text": "Get Started",
  "style": "primary",
  "link": {"type": "external", "url": "#"},
  "icon": {"library": "fontawesomeSolid", "icon": "fas fa-arrow-right"},
  "iconPosition": "right",
  "_cssGlobalClasses": ["btn", "btn--primary"]
}

Button styles: primary, secondary, info, success, warning, danger, light, dark

Image

{
  "image": {
    "url": "https://example.com/image.jpg",
    "external": true,
    "filename": "image.jpg"
  },
  "_aspectRatio": "16 / 9",
  "_objectFit": "cover",
  "_objectPosition": "50%",
  "_border": {
    "radius": {"top": "var(--radius-m)", "right": "var(--radius-m)", "bottom": "var(--radius-m)", "left": "var(--radius-m)"}
  }
}

For internal images (from media library):

{
  "image": {
    "id": 123,
    "filename": "image.jpg",
    "size": "large",
    "full": "https://example.com/wp-content/uploads/image.jpg",
    "url": "https://example.com/wp-content/uploads/image-1024x768.jpg"
  }
}

Logo

{
  "logo": {
    "url": "https://example.com/logo.svg",
    "external": true,
    "filename": "logo.svg"
  },
  "logoWidth": "clamp(16.0rem, 14.7763rem + 3.8241vw, 20.0rem)",
  "logoHeight": "auto"
}

Nav Nested (Navigation Menu)

{
  "mobileMenu": "tablet_portrait",
  "_cssGlobalClasses": ["main-nav"]
}

Values for mobileMenu: always, never, laptop, tablet_landscape, tablet_portrait, mobile_landscape, mobile_portrait

Dropdown (Menu Item)

{
  "text": "Services",
  "toggleOn": "both",
  "megaMenu": true,
  "megaMenuSelector": ".header__container",
  "link": {"type": "external", "url": "#"},
  "_cssGlobalClasses": ["dropdown-menu"]
}

Values for toggleOn: hover, click, both

Toggle (Mobile Menu Button)

{
  "icon": {
    "library": "svg",
    "svg": {
      "id": 2530,
      "filename": "bars.svg",
      "url": "https://example.com/bars.svg"
    }
  },
  "animation": "spin",
  "toggleSelector": ".mobile-menu",
  "ariaLabel": "Open Menu",
  "iconSize": "30",
  "barColor:tablet_portrait": {"raw": "var(--color-secondary)"}
}

Slider Nested (Carousel)

{
  "perPage": "3",
  "perPage:tablet_portrait": "2",
  "perPage:mobile_portrait": "1",
  "gap": "2rem",
  "autoplay": true,
  "interval": "5000",
  "pauseOnHover": true,
  "pagination": true,
  "paginationBottom": "-40",
  "arrows": true,
  "height": "none",
  "_cssCustom": ".slider-class .splide__list { transition-timing-function: linear !important; }"
}

Icon Box

{
  "icon": {"library": "fontawesomeSolid", "icon": "fas fa-rocket"},
  "iconSize": "3rem",
  "gap": "var(--spacing-xs)",
  "typographyHeading": {
    "color": {"raw": "var(--color-secondary)"},
    "font-size": "var(--text-md)"
  },
  "typographyBody": {
    "font-family": "Inter",
    "color": {"raw": "var(--color-tertiary)"},
    "font-size": "var(--text-sm)"
  },
  "_cssCustom": ".icon-box h3 { margin-bottom: var(--spacing-3xs); }"
}

Accordion

{
  "titleTypography": {
    "font-size": "var(--text-md)",
    "color": {"raw": "var(--color-secondary)"}
  },
  "contentTypography": {
    "font-size": "var(--text-sm)",
    "color": {"raw": "var(--color-tertiary)"}
  },
  "titleMargin": {"bottom": "var(--spacing-xs)"},
  "contentMargin": {"bottom": "var(--spacing-md)"},
  "titleBorder": {
    "width": {"bottom": "1"},
    "style": "solid",
    "color": {"raw": "var(--color-tertiary)"}
  },
  "_cssCustom": ".accordion .brxe-icon { transition: transform 0.3s ease; }\n.accordion .brx-open .brxe-icon { transform: rotate(90deg); }"
}

Form (Newsletter Style)

{
  "submitButtonWidth": "35",
  "submitButtonTypography": {
    "color": {"raw": "var(--color-light)"},
    "font-size": "var(--text-xs)"
  },
  "submitButtonBackgroundColor": {"raw": "var(--color-primary)"},
  "submitButtonBorder": {
    "width": {"top": "2", "right": "2", "bottom": "2", "left": "2"},
    "style": "solid",
    "color": {"raw": "var(--color-primary)"}
  },
  "fieldTypography": {
    "color": {"raw": "var(--color-secondary)"},
    "font-size": "var(--text-xs)"
  },
  "fieldBorder": {
    "width": {"top": "1", "right": "0", "bottom": "1", "left": "1"},
    "style": "solid",
    "color": {"raw": "var(--color-light)"}
  },
  "fieldPadding": {"top": "0.5rem", "bottom": "0.5rem", "left": "1.2rem", "right": "1.2rem"},
  "fieldMargin": {"bottom": "0"}
}

List (Footer Links)

{
  "separatorDisable": true,
  "itemMargin": {"bottom": "1.5rem"},
  "itemJustifyContent": "flex-start",
  "_typography": {
    "font-family": "Inter",
    "color": {"raw": "var(--color-tertiary)"},
    "font-size": "var(--text-sm)"
  }
}

Code Element

{
  "executeCode": true,
  "cssCode": ".my-section { background: linear-gradient(...); }",
  "javascriptCode": "(function() { console.log('Loaded'); })();",
  "signature": "hash-for-security",
  "user_id": 1,
  "time": 1720582839
}

Common Layout Settings

Flexbox Container

{
  "_display": "flex",
  "_direction": "row",
  "_direction:tablet_portrait": "column",
  "_justifyContent": "space-between",
  "_alignItems": "center",
  "_flexWrap": "wrap",
  "_columnGap": "var(--spacing-md)",
  "_rowGap": "var(--spacing-md)"
}

Grid Container

{
  "_display": "grid",
  "_gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
  "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))",
  "_gridTemplateColumns:mobile_portrait": "repeat(1, minmax(0, 1fr))",
  "_gridGap": "var(--spacing-md)",
  "_alignItemsGrid": "stretch"
}

Width & Sizing

{
  "_width": "100%",
  "_width:tablet_portrait": "50%",
  "_widthMax": "1200",
  "_widthMin": "300",
  "_height": "auto",
  "_heightMin": "400",
  "_aspectRatio": "16 / 9"
}

Spacing

{
  "_padding": {"top": "var(--spacing-lg)", "right": "var(--spacing-md)", "bottom": "var(--spacing-lg)", "left": "var(--spacing-md)"},
  "_margin": {"top": "0", "bottom": "var(--spacing-xl)"}
}

Typography

{
  "_typography": {
    "font-family": "Inter",
    "font-size": "var(--text-md)",
    "font-weight": "600",
    "line-height": "1.5",
    "letter-spacing": "0.02em",
    "text-transform": "uppercase",
    "text-align": "center",
    "color": {"raw": "var(--color-secondary)"}
  }
}

Background

{
  "_background": {
    "color": {"raw": "var(--color-primary)"},
    "videoUrl": "https://example.com/video.mp4"
  },
  "_gradient": {
    "applyTo": "background",
    "colors": [
      {"id": "c1", "color": {"raw": "transparent"}, "stop": "0"},
      {"id": "c2", "color": {"raw": "var(--color-dark-70)"}, "stop": "100"}
    ]
  }
}

Borders & Radius

{
  "_border": {
    "width": {"top": "1", "right": "1", "bottom": "1", "left": "1"},
    "style": "solid",
    "color": {"raw": "var(--border-primary)"},
    "radius": {"top": "var(--radius-m)", "right": "var(--radius-m)", "bottom": "var(--radius-m)", "left": "var(--radius-m)"}
  }
}

Position & Overlay

{
  "_position": "relative",
  "_zIndex": "1",
  "_overflow": "hidden",
  "_isolation": "isolate"
}

For absolute positioned overlays:

{
  "_position": "absolute",
  "_top": "0",
  "_right": "0",
  "_bottom": "0",
  "_left": "0",
  "_zIndex": "-1"
}

Shadows

{
  "_boxShadow": {
    "values": {"blur": "20", "offsetY": "8", "offsetX": "0", "spread": "0"},
    "color": {"raw": "var(--shadow-primary)"}
  }
}

Custom CSS

{
  "_cssCustom": ".my-element { transition: all 0.3s ease; }\n.my-element:hover { transform: translateY(-5px); }"
}

Global Classes Definition

Basic Class

{
  "id": "btn-primary",
  "name": "btn-primary",
  "settings": {
    "_typography": {"color": {"raw": "var(--color-light)"}},
    "_background": {"color": {"raw": "var(--color-primary)"}},
    "_padding": {"top": "1rem", "right": "2rem", "bottom": "1rem", "left": "2rem"},
    "_border": {"radius": {"top": "var(--radius-s)", "right": "var(--radius-s)", "bottom": "var(--radius-s)", "left": "var(--radius-s)"}}
  }
}

Class with Category

{
  "id": "heading-1",
  "name": "heading-1",
  "settings": {
    "_typography": {"font-family": "Inter", "font-size": "var(--text-3xl)"}
  },
  "category": "typography",
  "_categoryData": {"id": "typography", "name": "Typography"},
  "modified": 1733551470,
  "user_id": 1
}

Class with Custom CSS

{
  "id": "card-hover",
  "name": "card-hover",
  "settings": {
    "_cssCustom": ".card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n.card-hover:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); }"
  }
}

Responsive Settings

Append breakpoint suffix to any setting:

{
  "_direction": "row",
  "_direction:tablet_portrait": "column",
  "_direction:mobile_portrait": "column",
  "_display": "flex",
  "_display:mobile_portrait": "none",
  "_width": "50%",
  "_width:tablet_portrait": "100%",
  "_gridTemplateColumns": "repeat(3, minmax(0, 1fr))",
  "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))",
  "_gridTemplateColumns:mobile_portrait": "repeat(1, minmax(0, 1fr))"
}

Breakpoints

Template Structure (Site-Wide)

Required Keys

Template Types

Author Object

{
  "name": "Author Name",
  "avatar": "https://secure.gravatar.com/avatar/...",
  "url": "https://example.com"
}

Global Variables

{
  "id": "primary",
  "name": "primary",
  "value": "#2364a9",
  "category": "corefrm"
}

Variable Categories

{
  "id": "corefrm",
  "name": "Core Framework"
}

Complete Layout Examples

Hero Section with CTA

{
  "content": [
    {
      "id": "sec001",
      "name": "section",
      "parent": 0,
      "children": ["con001"],
      "settings": {"_cssGlobalClasses": ["pad-top-bottom-lg"]},
      "label": "Hero"
    },
    {
      "id": "con001",
      "name": "container",
      "parent": "sec001",
      "children": ["col001", "col002"],
      "settings": {
        "_direction": "row",
        "_direction:tablet_portrait": "column",
        "_alignItems": "center",
        "_cssGlobalClasses": ["gap-md"]
      }
    },
    {
      "id": "col001",
      "name": "block",
      "parent": "con001",
      "children": ["hdg001", "txt001", "btns01"],
      "settings": {"_cssGlobalClasses": ["gap-xs"]},
      "label": "Content Column"
    },
    {
      "id": "hdg001",
      "name": "heading",
      "parent": "col001",
      "children": [],
      "settings": {
        "text": "Speak directly to the visitor's challenge",
        "tag": "h1",
        "_cssGlobalClasses": ["heading-1", "text-secondary"]
      }
    },
    {
      "id": "txt001",
      "name": "text",
      "parent": "col001",
      "children": [],
      "settings": {
        "text": "<p>Clearly explain how your product or service solves the problem—keep it simple and direct.</p>",
        "_cssGlobalClasses": ["text-p", "text-tertiary"]
      }
    },
    {
      "id": "btns01",
      "name": "block",
      "parent": "col001",
      "children": ["btn001", "btn002"],
      "settings": {
        "_direction": "row",
        "_cssGlobalClasses": ["gap-xs", "margin-top-xs"]
      },
      "label": "Buttons"
    },
    {
      "id": "btn001",
      "name": "button",
      "parent": "btns01",
      "children": [],
      "settings": {
        "text": "Get Started",
        "_cssGlobalClasses": ["btn", "btn--primary"]
      }
    },
    {
      "id": "btn002",
      "name": "button",
      "parent": "btns01",
      "children": [],
      "settings": {
        "text": "Learn More",
        "_cssGlobalClasses": ["btn", "btn--outline"]
      }
    },
    {
      "id": "col002",
      "name": "block",
      "parent": "con001",
      "children": ["img001"],
      "settings": {},
      "label": "Image Column"
    },
    {
      "id": "img001",
      "name": "image",
      "parent": "col002",
      "children": [],
      "settings": {
        "image": {"url": "https://example.com/hero.jpg", "external": true},
        "_cssGlobalClasses": ["object-cover", "full-width"]
      }
    }
  ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.0.1",
  "globalClasses": [
    {"id": "pad-top-bottom-lg", "name": "pad-top-bottom-lg", "settings": {"_padding": {"bottom": "var(--spacing-lg)", "top": "var(--spacing-lg)"}}},
    {"id": "gap-md", "name": "gap-md", "settings": {"_columnGap": "var(--spacing-md)", "_rowGap": "var(--spacing-md)"}},
    {"id": "gap-xs", "name": "gap-xs", "settings": {"_columnGap": "var(--spacing-xs)", "_rowGap": "var(--spacing-xs)"}},
    {"id": "heading-1", "name": "heading-1", "settings": {"_typography": {"font-family": "Inter", "font-size": "var(--text-3xl)"}}},
    {"id": "text-secondary", "name": "text-secondary", "settings": {"_typography": {"color": {"raw": "var(--color-secondary)"}}}},
    {"id": "text-p", "name": "text-p", "settings": {"_typography": {"font-size": "var(--text-sm)", "font-family": "Inter"}}},
    {"id": "text-tertiary", "name": "text-tertiary", "settings": {"_typography": {"color": {"raw": "var(--color-tertiary)"}}}},
    {"id": "margin-top-xs", "name": "margin-top-xs", "settings": {"_margin": {"top": "var(--spacing-xs)"}}},
    {"id": "btn", "name": "btn", "settings": {"_padding": {"top": "1rem", "right": "2rem", "bottom": "1rem", "left": "2rem"}}},
    {"id": "btn--primary", "name": "btn--primary", "settings": {"_background": {"color": {"raw": "var(--color-primary)"}}, "_typography": {"color": {"raw": "var(--color-light)"}}}},
    {"id": "btn--outline", "name": "btn--outline", "settings": {"_border": {"color": {"raw": "var(--color-primary)"}}, "_typography": {"color": {"raw": "var(--color-primary)"}}}},
    {"id": "object-cover", "name": "object-cover", "settings": {"_objectFit": "cover"}},
    {"id": "full-width", "name": "full-width", "settings": {"_width": "100%"}}
  ],
  "globalElements": []
}

Features Grid (3 Columns)

{
  "content": [
    {
      "id": "sec001",
      "name": "section",
      "parent": 0,
      "children": ["con001"],
      "settings": {"_cssGlobalClasses": ["pad-top-bottom-lg"]},
      "label": "Features"
    },
    {
      "id": "con001",
      "name": "container",
      "parent": "sec001",
      "children": ["hdr001", "grid01"],
      "settings": {"_cssGlobalClasses": ["gap-md", "container-width-md"]}
    },
    {
      "id": "hdr001",
      "name": "block",
      "parent": "con001",
      "children": ["tag001", "hdg001"],
      "settings": {"_cssGlobalClasses": ["text-center", "gap-xs"]},
      "label": "Section Header"
    },
    {
      "id": "tag001",
      "name": "heading",
      "parent": "hdr001",
      "children": [],
      "settings": {"text": "Features", "tag": "h6", "_cssGlobalClasses": ["heading-6", "text-font-600"]}
    },
    {
      "id": "hdg001",
      "name": "heading",
      "parent": "hdr001",
      "children": [],
      "settings": {"text": "Everything you need", "tag": "h2", "_cssGlobalClasses": ["heading-2"]}
    },
    {
      "id": "grid01",
      "name": "block",
      "parent": "con001",
      "children": ["feat01", "feat02", "feat03"],
      "settings": {"_cssGlobalClasses": ["grid-3col", "grid-gap-md"]},
      "label": "Features Grid"
    },
    {
      "id": "feat01",
      "name": "icon-box",
      "parent": "grid01",
      "children": [],
      "settings": {
        "icon": {"library": "fontawesomeSolid", "icon": "fas fa-rocket"},
        "_cssGlobalClasses": ["icon-box"]
      }
    },
    {
      "id": "feat02",
      "name": "icon-box",
      "parent": "grid01",
      "children": [],
      "settings": {
        "icon": {"library": "fontawesomeSolid", "icon": "fas fa-shield-alt"},
        "_cssGlobalClasses": ["icon-box"]
      }
    },
    {
      "id": "feat03",
      "name": "icon-box",
      "parent": "grid01",
      "children": [],
      "settings": {
        "icon": {"library": "fontawesomeSolid", "icon": "fas fa-chart-line"},
        "_cssGlobalClasses": ["icon-box"]
      }
    }
  ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.0.1",
  "globalClasses": [
    {"id": "pad-top-bottom-lg", "name": "pad-top-bottom-lg", "settings": {"_padding": {"bottom": "var(--spacing-lg)", "top": "var(--spacing-lg)"}}},
    {"id": "gap-md", "name": "gap-md", "settings": {"_columnGap": "var(--spacing-md)", "_rowGap": "var(--spacing-md)"}},
    {"id": "gap-xs", "name": "gap-xs", "settings": {"_columnGap": "var(--spacing-xs)", "_rowGap": "var(--spacing-xs)"}},
    {"id": "container-width-md", "name": "container-width-md", "settings": {"_width": "90%", "_widthMax": "900"}},
    {"id": "text-center", "name": "text-center", "settings": {"_typography": {"text-align": "center"}}},
    {"id": "heading-2", "name": "heading-2", "settings": {"_typography": {"font-family": "Inter", "font-size": "var(--text-2xl)"}}},
    {"id": "heading-6", "name": "heading-6", "settings": {"_typography": {"font-size": "var(--text-xs)", "font-family": "Inter", "text-transform": "uppercase"}}},
    {"id": "text-font-600", "name": "text-font-600", "settings": {"_typography": {"font-weight": "600"}}},
    {"id": "grid-3col", "name": "grid-3col", "settings": {"_gridTemplateColumns": "repeat(3, minmax(0, 1fr))", "_display": "grid", "_gridTemplateColumns:tablet_portrait": "repeat(2, minmax(0, 1fr))", "_gridTemplateColumns:mobile_portrait": "repeat(1, minmax(0, 1fr))"}},
    {"id": "grid-gap-md", "name": "grid-gap-md", "settings": {"_gridGap": "var(--spacing-md)"}},
    {"id": "icon-box", "name": "icon-box", "settings": {"typographyBody": {"font-family": "Inter", "color": {"raw": "var(--color-tertiary)"}, "font-size": "var(--text-sm)"}, "typographyHeading": {"color": {"raw": "var(--color-secondary)"}, "font-size": "var(--text-md)"}, "gap": "var(--spacing-xs)", "iconSize": "3rem"}}
  ],
  "globalElements": []
}

Core Framework Classes Reference

The core-framework.css provides utility classes. Use these via _cssGlobalClasses setting.

Components

Layout & Flexbox

Grid

Spacing (Gap)

Padding

Margin

Width & Height

Aspect Ratio

Background Colors

Text Colors

Text Size

Text Alignment

Text Style

Border Colors

Border Radius

Shadows

Position

Display & Visibility

Object Fit

Overflow

Effects

Cursor

Lists

Usage Example

{
  "id": "sec001",
  "name": "section",
  "parent": 0,
  "children": ["con001"],
  "settings": {
    "_cssGlobalClasses": ["padding-vertical-xl", "bg-surface"]
  }
}

{
  "id": "hdg001",
  "name": "heading",
  "parent": "con001",
  "children": [],
  "settings": {
    "text": "Welcome",
    "tag": "h1",
    "_cssGlobalClasses": ["text-3xl", "text-primary", "text-center", "margin-bottom-m"]
  }
}

{
  "id": "btn001",
  "name": "button",
  "parent": "con001",
  "children": [],
  "settings": {
    "text": "Get Started",
    "_cssGlobalClasses": ["btn", "shadow-m"]
  }
}

ID Generation

Element IDs must be 6-character alphanumeric strings:

function generateId() {
  return Math.random().toString(36).substring(2, 8);
}

Or use patterns:

• Semantic: sec001, hdr001, btn001, img001
• Random: jdhuyf, hxbbms, towhmc

CSS Variables Reference (from core-framework.css)

Spacing (--space-*)

--space-4xs  --space-3xs  --space-2xs  --space-xs  --space-s
--space-m    --space-l    --space-xl   --space-2xl --space-3xl  --space-4xl

All spacing values use fluid clamp() for responsive scaling.

Typography (--text-*)

--text-xs  --text-s  --text-m  --text-l  --text-xl
--text-2xl --text-3xl --text-4xl

Colors

Brand Colors:

--primary    --secondary    --tertiary

Opacity Variants (5-90%):

--primary-5 ... --primary-90
--secondary-5 ... --secondary-90
--tertiary-5 ... --tertiary-90

Shade Variants:

--primary-d-1 to --primary-d-4   (darker)
--primary-l-1 to --primary-l-4   (lighter)

Neutral Colors:

--base        --light       --dark
--bg-body     --bg-surface
--text-body   --text-title

Status Colors:

--success  --error
--success-5 to --success-90
--error-5 to --error-90

Grid Columns (--columns-*)

--columns-1 to --columns-12

Border Radius (--radius-*)

--radius-xs  --radius-s  --radius-m  --radius-l  --radius-xl  --radius-full

Shadows (--shadow-*)

--shadow-xs  --shadow-s  --shadow-m  --shadow-l  --shadow-xl

Shadows use --shadow-primary for color.

How to Use Layouts

Copy/Paste Sections

1. Copy JSON content to clipboard
2. In Bricks Builder, right-click in structure panel
3. Select "Paste" or use Ctrl/Cmd+V
4. Elements and classes are pasted together

Import Templates

1. Go to Bricks > Templates in WordPress admin
2. Click Import
3. Upload JSON file or paste content
4. Template appears in template list
5. Assign to pages via template conditions

Interactions & Animations

Bricks uses _interactions for animations and dynamic behaviors. The deprecated _animation property (pre-v1.6) should not be used.

Interaction Structure

{
  "_interactions": [
    {
      "id": "anim01",
      "trigger": "enterView",
      "action": "startAnimation",
      "animationType": "fadeInUp",
      "animationDuration": "0.8s",
      "animationDelay": "0.2s",
      "runOnce": true
    }
  ]
}

Interaction Properties

Triggers

Actions

Animation Types

Staggered Animations

Create sequential reveal effects by incrementing animationDelay:

{
  "id": "card01",
  "settings": {
    "_interactions": [
      {"id": "a1", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.6s", "animationDelay": "0", "runOnce": true}
    ]
  }
},
{
  "id": "card02",
  "settings": {
    "_interactions": [
      {"id": "a2", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.6s", "animationDelay": "0.1s", "runOnce": true}
    ]
  }
},
{
  "id": "card03",
  "settings": {
    "_interactions": [
      {"id": "a3", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.6s", "animationDelay": "0.2s", "runOnce": true}
    ]
  }
}

Hover Effects via Custom CSS

Use _cssCustom for hover states and transitions:

{
  "id": "card01",
  "settings": {
    "_cssCustom": "#brxe-card01 { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n#brxe-card01:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }"
  }
}

Common hover patterns:

Card Lift Effect:

"_cssCustom": "#brxe-card01 { transition: all 0.3s ease; }\n#brxe-card01:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }"

Background Color Change:

"_cssCustom": "#brxe-card01 { transition: background 0.3s ease; }\n#brxe-card01:hover { background: var(--primary-10); }"

Image Zoom:

"_cssCustom": "#brxe-imgwrap img { transition: transform 0.5s ease; }\n#brxe-imgwrap:hover img { transform: scale(1.05); }"

Border Accent:

"_cssCustom": "#brxe-card01 { transition: border-color 0.3s ease; border-left: 3px solid transparent; }\n#brxe-card01:hover { border-left-color: var(--primary); }"

Button Glow:

"_cssCustom": "#brxe-btn01 { transition: all 0.3s ease; }\n#brxe-btn01:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }"

Popup Interactions

Show/hide popups with click triggers:

{
  "id": "closebtn",
  "settings": {
    "_interactions": [
      {
        "id": "close01",
        "trigger": "click",
        "action": "hide",
        "target": "popup",
        "templateId": "1323"
      }
    ]
  }
}

Entrance Animation on Section

Animate entire section when scrolled into view:

{
  "id": "sec001",
  "name": "section",
  "parent": 0,
  "children": ["con001"],
  "settings": {
    "_cssGlobalClasses": ["padding-vertical-xl"],
    "_interactions": [
      {"id": "secAnim", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeIn", "animationDuration": "1s", "animationDelay": "0", "runOnce": true}
    ]
  }
}

Complete Animated Card Example

{
  "id": "card01",
  "name": "block",
  "parent": "grid01",
  "children": ["cardimg", "cardtxt"],
  "settings": {
    "_cssGlobalClasses": ["card", "padding-m", "radius-m"],
    "_interactions": [
      {"id": "cardAnim", "trigger": "enterView", "action": "startAnimation", "animationType": "fadeInUp", "animationDuration": "0.8s", "animationDelay": "0", "runOnce": true}
    ],
    "_cssCustom": "#brxe-card01 { transition: transform 0.3s ease, box-shadow 0.3s ease; }\n#brxe-card01:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); }"
  },
  "label":

…(truncated)