Unknown Component

Received request from Uniform to render a component with the public ID: headlineLocation.

<UniformComposition /> does not have headlineLocation mapped to a React component yet.

To teach your app how to render this component:

  • Create a React component and register it with Uniform, for example
    function HeadlineLocation({ theme, title, isHeader, subtitle, hasLocation, headerDirection }) {
  return (
    <div>
      HeadlineLocation!
      
    </div>
  )
}

registerUniformComponent({ type: "headlineLocation", component: HeadlineLocation })
    Props that your React component will receive
    {
  "theme": "secondary",
  "title": "Hardie® Backer Board",
  "isHeader": true,
  "subtitle": "With industry-leading strength, composition, and performance, our cement backer board is the most preferred brand* of cement backer board by tile installers.",
  "hasLocation": true,
  "headerDirection": "row",
  "component": {
    "type": "headlineLocation",
    "parameters": {
      "theme": {
        "type": "select",
        "value": "secondary"
      },
      "title": {
        "type": "text",
        "value": "Hardie® Backer Board"
      },
      "isHeader": {
        "type": "checkbox",
        "value": true
      },
      "subtitle": {
        "type": "text",
        "value": "With industry-leading strength, composition, and performance, our cement backer board is the most preferred brand* of cement backer board by tile installers."
      },
      "hasLocation": {
        "type": "checkbox",
        "value": true
      },
      "headerDirection": {
        "type": "select",
        "value": "row"
      }
    }
  }
}
  • Import the component into the file where <UniformComposition /> is defined, for example 
    import "../components/HeadlineLocation.tsx"

Need more help? Check out the documentation.

Unknown Component

Received request from Uniform to render a component with the public ID: nonSapProduct.

<UniformComposition /> does not have nonSapProduct mapped to a React component yet.

To teach your app how to render this component:

  • Create a React component and register it with Uniform, for example
    function NonSapProduct({ itemId, ctaLink, ctaText, imageUrl, itemName, ctaSubText, productSlug, subItemsLabel, itemDescription }) {
  return (
    <div>
      NonSapProduct!
      <UniformSlot name="subItems" />
    </div>
  )
}

registerUniformComponent({ type: "nonSapProduct", component: NonSapProduct })
    Props that your React component will receive
    {
  "itemId": "BR6",
  "ctaLink": {
    "path": "/find-dealer-near-you",
    "type": "projectMapNode",
    "nodeId": "2fdcc387-096b-4863-bb80-d4cfbe99ae2f",
    "projectMapId": "c350da3c-fcaf-49a5-9b94-1a73ef3408f9"
  },
  "ctaText": "Find a dealer near you",
  "imageUrl": "//images.ctfassets.net/dzi2asncd44t/3RfTQtYxVKktFFck7VE6MC/b1df57613485bbbfa1b553030c9a651d/pdp-hero-hardie-backer-board.jpg",
  "itemName": "Explore Hardie® Backer Board",
  "ctaSubText": "Availability may be limited by location.",
  "productSlug": "hardie-backer-cement-board",
  "subItemsLabel": "Available products",
  "itemDescription": {
    "nodeType": "paragraph",
    "data": {},
    "content": [
      {
        "nodeType": "text",
        "value": "Every quality tile job should start with the best tile underlayment: the industry-defining fiber cement innovation, Hardie",
        "marks": [],
        "data": {}
      },
      {
        "nodeType": "text",
        "value": "®",
        "marks": [
          {
            "type": "superscript"
          }
        ],
        "data": {}
      },
      {
        "nodeType": "text",
        "value": " Backer Board.",
        "marks": [],
        "data": {}
      }
    ]
  },
  "component": {
    "type": "nonSapProduct",
    "slots": {
      "subItems": [
        {
          "type": "nonSapProductItem",
          "parameters": {
            "itemId": {
              "type": "text",
              "value": "TX22"
            },
            "iconUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/4PLgTLIIamaG7Orb4gOWAD/d850db14aa83e31802f1ddeb54ce28df/Medium-SHOT_14_BATHROOM_TileFloorOutsideShower_MEDIUM__1_.jpg"
            },
            "imageUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/4PLgTLIIamaG7Orb4gOWAD/d850db14aa83e31802f1ddeb54ce28df/Medium-SHOT_14_BATHROOM_TileFloorOutsideShower_MEDIUM__1_.jpg"
            },
            "itemName": {
              "type": "text",
              "value": ".25\" inch Cement Board"
            },
            "itemDescription": {
              "type": "text",
              "value": "This light, simple-to-cut, no-mesh board features our exclusive EZ Grid® recessed grid and fastener pattern, making installation even easier."
            }
          }
        },
        {
          "type": "nonSapProductItem",
          "parameters": {
            "itemId": {
              "type": "text",
              "value": "TX23"
            },
            "iconUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/12OuXxwsYCXF2FRCqEB7Gs/7edffdd9ec4a2e787c9a3dba963ed769/Medium-SHOT_11_BATHROOM_ShowerWall_MEDIUM__1_.jpg"
            },
            "imageUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/12OuXxwsYCXF2FRCqEB7Gs/7edffdd9ec4a2e787c9a3dba963ed769/Medium-SHOT_11_BATHROOM_ShowerWall_MEDIUM__1_.jpg"
            },
            "itemName": {
              "type": "text",
              "value": ".42\" inch Cement Board"
            },
            "itemDescription": {
              "type": "text",
              "value": "Hardie® Backer Board 500 cement board is resistant to damage from moisture. Its smooth surface also allows for finishing with paint, wallpaper or texture."
            }
          }
        }
      ]
    },
    "parameters": {
      "itemId": {
        "type": "text",
        "value": "BR6"
      },
      "ctaLink": {
        "type": "link",
        "value": {
          "path": "/find-dealer-near-you",
          "type": "projectMapNode",
          "nodeId": "2fdcc387-096b-4863-bb80-d4cfbe99ae2f",
          "projectMapId": "c350da3c-fcaf-49a5-9b94-1a73ef3408f9"
        }
      },
      "ctaText": {
        "type": "text",
        "value": "Find a dealer near you"
      },
      "imageUrl": {
        "type": "image",
        "value": "//images.ctfassets.net/dzi2asncd44t/3RfTQtYxVKktFFck7VE6MC/b1df57613485bbbfa1b553030c9a651d/pdp-hero-hardie-backer-board.jpg"
      },
      "itemName": {
        "type": "text",
        "value": "Explore Hardie® Backer Board"
      },
      "ctaSubText": {
        "type": "text",
        "value": "Availability may be limited by location."
      },
      "productSlug": {
        "type": "text",
        "value": "hardie-backer-cement-board"
      },
      "subItemsLabel": {
        "type": "text",
        "value": "Available products"
      },
      "itemDescription": {
        "type": "json",
        "value": {
          "nodeType": "paragraph",
          "data": {},
          "content": [
            {
              "nodeType": "text",
              "value": "Every quality tile job should start with the best tile underlayment: the industry-defining fiber cement innovation, Hardie",
              "marks": [],
              "data": {}
            },
            {
              "nodeType": "text",
              "value": "®",
              "marks": [
                {
                  "type": "superscript"
                }
              ],
              "data": {}
            },
            {
              "nodeType": "text",
              "value": " Backer Board.",
              "marks": [],
              "data": {}
            }
          ]
        }
      }
    }
  }
}
  • Import the component into the file where <UniformComposition /> is defined, for example 
    import "../components/NonSapProduct.tsx"

Need more help? Check out the documentation.

Why Choose Hardie® Backer Board?

Help protect your work long after the job is done. See why Hardie® Backer Board is chosen in over 40 million kitchens and bathrooms.*

Moisture resistance

MoldBlock® Technology protects the board from mold growth or damage, helping it retain its strength and shape even after being exposed to water.

Superior strength

Made strongest of all leading backer board brands to withstand daily wear, prevent damage, and keep tiled surfaces secure.

Better tile adhesion

Engineered for grip that lasts, holding tiles tight to help prevent shifting, cracking, and costly call-backs.

Unknown Component

Received request from Uniform to render a component with the public ID: productSpecs.

<UniformComposition /> does not have productSpecs mapped to a React component yet.

To teach your app how to render this component:

  • Create a React component and register it with Uniform, for example
    function ProductSpecs({ cta2Link, cta2Text, headline, supporting }) {
  return (
    <div>
      ProductSpecs!
      <UniformSlot name="features" />
    </div>
  )
}

registerUniformComponent({ type: "productSpecs", component: ProductSpecs })
    Props that your React component will receive
    {
  "cta2Link": {
    "path": "/installation-instructions-technical-docs",
    "type": "projectMapNode",
    "nodeId": "fe1fde08-dcbd-4304-aff6-649137fd6efe",
    "projectMapId": "c350da3c-fcaf-49a5-9b94-1a73ef3408f9"
  },
  "cta2Text": "View All Tech Docs",
  "headline": "Hardie® Backer Board Tech Specs and Documents",
  "supporting": "Learn everything you need to know about installing and maintaining Hardie® Backer Board.",
  "component": {
    "type": "productSpecs",
    "slots": {
      "features": [
        {
          "type": "productSpecsFeature",
          "variant": "installGuidance",
          "parameters": {
            "title": {
              "type": "text",
              "value": "Installation Instructions"
            },
            "bodyText": {
              "type": "text",
              "value": "View instructions for installing Hardie® Backer Board. In English and Spanish."
            }
          }
        },
        {
          "type": "productSpecsFeature",
          "variant": "video",
          "parameters": {
            "title": {
              "type": "text",
              "value": "How to Cut Hardie® Backer Board"
            },
            "bodyText": {
              "type": "text",
              "value": "Our experts will show you how to make straight lines and circular cuts so that you have all of the necessary techniques to apply to your specific project."
            }
          }
        },
        {
          "type": "productSpecsFeature",
          "variant": "allDocs",
          "parameters": {
            "title": {
              "type": "text",
              "value": "Browse tech docs library"
            },
            "ctaText": {
              "type": "text",
              "value": "See all documents for this product"
            },
            "bodyText": {
              "type": "text",
              "value": "Quickly browse the installation guidance and technical documentation you'll need for a successful install project."
            }
          }
        }
      ]
    },
    "parameters": {
      "cta2Link": {
        "type": "link",
        "value": {
          "path": "/installation-instructions-technical-docs",
          "type": "projectMapNode",
          "nodeId": "fe1fde08-dcbd-4304-aff6-649137fd6efe",
          "projectMapId": "c350da3c-fcaf-49a5-9b94-1a73ef3408f9"
        }
      },
      "cta2Text": {
        "type": "text",
        "value": "View All Tech Docs"
      },
      "headline": {
        "type": "text",
        "value": "Hardie® Backer Board Tech Specs and Documents"
      },
      "supporting": {
        "type": "text",
        "value": "Learn everything you need to know about installing and maintaining Hardie® Backer Board."
      }
    }
  }
}
  • Import the component into the file where <UniformComposition /> is defined, for example 
    import "../components/ProductSpecs.tsx"

Need more help? Check out the documentation.

Find a retailer near you

Hardie® Backer Board is widely available at major retailers, making it easy to get the durable, moisture-resistant foundation you need for tile projects.

Unknown Component

Received request from Uniform to render a component with the public ID: disclaimerText.

<UniformComposition /> does not have disclaimerText mapped to a React component yet.

To teach your app how to render this component:

  • Create a React component and register it with Uniform, for example
    function DisclaimerText({ text, theme }) {
  return (
    <div>
      DisclaimerText!
      
    </div>
  )
}

registerUniformComponent({ type: "disclaimerText", component: DisclaimerText })
    Props that your React component will receive
    {
  "text": "According to the 2021 Tile and Stone Installation Contractor Market Study conducted by Clear Seas Research in partnership with the NTCA and TILE Magazine.",
  "theme": "dark",
  "component": {
    "type": "disclaimerText",
    "parameters": {
      "text": {
        "type": "text",
        "value": "According to the 2021 Tile and Stone Installation Contractor Market Study conducted by Clear Seas Research in partnership with the NTCA and TILE Magazine."
      },
      "theme": {
        "type": "select",
        "value": "dark"
      }
    }
  }
}
  • Import the component into the file where <UniformComposition /> is defined, for example 
    import "../components/DisclaimerText.tsx"

Need more help? Check out the documentation.

Unable to find Uniform Context. Ensure the devtools plugin is activated.

logo
© 2026 James Hardie Building Products Inc. All rights reserved. Unless otherwise noted ™ or ® denote trademarks or registered trademarks of James Hardie Technology Ltd.