Back to Schema Browser

Background

Craft ROOT node (resolvedName Background). Holds the design system (pallet, styleGuide), site-wide HTML injection (header/footer), SEO fields, company variables for {{company.*}} templates, AI hints, integrations, redirects, and JSON-LD.

Required Props: idSupports Children: any

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

PropertyTypeDescriptionExamples
typestring
Must stay background for ROOT
Default: "background"
-
data-rendererboolean
Marks serialized design-system root
-
palletarray
Site palette slots (name + color)
-
typographyarray
Typography configuration entries
-
styleGuideobject
Design tokens: borderRadius, fonts, gaps, input styles, link colors, etc.
-
injectobject
-
-
seoobject
-
-
pageMediaarray
Media library index for the site
-
savedComponentsarray
Reusable saved blocks
-
companyobject
Branding/contact defaults; drives {{company.name}}, {{company.email}}, {{year}}, etc. in Text nodes
-
designobject
-
-
integrationsobject
Structured provider configs (not raw script tags). Rendered via IntegrationScripts on publish.
-
redirectsarray
Evaluated server-side before render (301 when permanent, else 302)
-
canDeleteboolean
-
-
canEditNameboolean
-
-
customobject
-
-
classNamestring
Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.
flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold
backgroundobject
-
-
activeTabnumber
-
-
rootobject
-
-

Examples

Root Page Background

A full-page background with design system palette and typography configuration

{
  "type": "background",
  "data-renderer": true,
  "pallet": [
    {
      "name": "Primary",
      "color": "blue-500"
    },
    {
      "name": "Primary Text",
      "color": "white"
    },
    {
      "name": "Secondary",
      "color": "purple-500"
    },
    {
      "name": "Secondary Text",
      "color": "white"
    },
    {
      "name": "Accent",
      "color": "orange-500"
    },
    {
      "name": "Accent Text",
      "color": "white"
    },
    {
      "name": "Neutral",
      "color": "gray-500"
    },
    {
      "name": "Neutral Text",
      "color": "white"
    },
    {
      "name": "Background",
      "color": "white"
    },
    {
      "name": "Text",
      "color": "gray-900"
    },
    {
      "name": "Alternate Background",
      "color": "gray-50"
    },
    {
      "name": "Alternate Text",
      "color": "gray-600"
    }
  ],
  "styleGuide": {
    "radiusBox": "0.5rem",
    "buttonPadding": "1.5rem 0.75rem",
    "containerPadding": "2rem 2rem",
    "sectionGap": "4rem",
    "containerGap": "1.5rem",
    "contentWidth": "80rem",
    "headingFont": "700",
    "headingFontFamily": "Open Sans",
    "bodyFont": "400",
    "bodyFontFamily": "Open Sans",
    "shadowStyle": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
    "border": "1px",
    "inputBorderColor": "palette:Muted",
    "radiusField": "0.375rem",
    "inputPadding": "1rem 1rem",
    "inputBgColor": "white",
    "inputTextColor": "gray-900",
    "inputPlaceholderColor": "gray-400",
    "inputFocusRing": "2px",
    "inputFocusRingColor": "palette:Primary",
    "linkColor": "palette:Primary",
    "linkHoverColor": "palette:Secondary",
    "linkUnderline": "no-underline",
    "linkUnderlineOffset": "underline-offset-2"
  },
  "typography": [
    {
      "name": "Heading Font",
      "fontFamily": "Inter",
      "fontSize": "2rem",
      "fontWeight": "700",
      "lineHeight": "1.2",
      "letterSpacing": "normal",
      "textTransform": "none"
    },
    {
      "name": "Body Font",
      "fontFamily": "Inter",
      "fontSize": "1rem",
      "fontWeight": "400",
      "lineHeight": "1.5",
      "letterSpacing": "normal",
      "textTransform": "none"
    },
    {
      "name": "Caption Font",
      "fontFamily": "Inter",
      "fontSize": "0.875rem",
      "fontWeight": "400",
      "lineHeight": "1.4",
      "letterSpacing": "normal",
      "textTransform": "none"
    }
  ],
  "className": "bg--() text--() font-[var(--body-font-family)] font-normal"
}

Simple Background

A basic background container without design system configuration

{
  "className": "bg-gradient-to-br from-blue-500 to-purple-600 flex flex-col min-h-screen"
}

Dark Theme Background

A dark-themed background with custom color scheme

{
  "className": "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white flex flex-col min-h-screen"
}

Light Theme Background

A clean light background perfect for content-focused designs

{
  "className": "bg-white text-gray-900 flex flex-col min-h-screen"
}