Custom CSS

Pages support scoped custom CSS via customCss. CSS is sanitized and scoped to prevent leakage outside the page container.

Usage

{
  "slug": "styled-page",
  "components": [
    {
      "type": "hero",
      "props": {
        "headline": "Custom Styled"
      }
    }
  ],
  "customCss": "h1 { letter-spacing: 0.1em; } .hero { padding: 4rem 2rem; }"
}

Rules

• Maximum 10,240 characters
• CSS is automatically scoped to your page container
• Standard CSS properties are supported
• @import rules are stripped for security
• @media queries are supported but may have scoping limitations

Scope class

Each page gets a unique scope class:

• Single page creation: cb-page-temp (reassigned on save)
• Page updates: cb-page-{pageId}
• Bulk creation: cb-page-bulk-{index}

All selectors are automatically prefixed with the scope class.

Examples

Custom fonts via theme override

Prefer theme.overrides.font over CSS for font selection:

{
  "theme": {
    "overrides": {
      "font": "Playfair Display, serif"
    }
  }
}

Animation

{
  "customCss": "@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .hero { animation: fadeIn 1s ease-in; }"
}

Responsive adjustments

{
  "customCss": "@media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } }"
}