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": {
        "data": {},
        "content": [
          {
            "data": {},
            "marks": [],
            "value": "Hardie",
            "nodeType": "text"
          },
          {
            "data": {},
            "marks": [
              {
                "type": "superscript"
              }
            ],
            "value": "®",
            "nodeType": "text"
          },
          {
            "data": {},
            "marks": [],
            "value": " Backer Board provides high-performance, water resistant protection to back up your next bathroom or kitchen renovation.",
            "nodeType": "text"
          }
        ],
        "nodeType": "paragraph"
      },
      "component": {
        "type": "nonSapProduct",
        "slots": {
          "subItems": [
            {
              "type": "nonSapProductItem",
              "parameters": {
                "itemId": {
                  "type": "text",
                  "value": "TX22"
                },
                "iconUrl": {
                  "type": "image",
                  "value": "//images.ctfassets.net/dzi2asncd44t/oEUmv5OZ56AACo1iPZ4Nj/f61bfa1473142ade79e9501bbcd0b504/hardie-backer-board-quarter-inch-product-image.jpg"
                },
                "imageUrl": {
                  "type": "image",
                  "value": "//images.ctfassets.net/dzi2asncd44t/oEUmv5OZ56AACo1iPZ4Nj/f61bfa1473142ade79e9501bbcd0b504/hardie-backer-board-quarter-inch-product-image.jpg"
                },
                "itemName": {
                  "type": "text",
                  "value": "1/4\" 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/3d9u76BPAKHEYcdRI1UQRn/183f8c28f651b8fe7898d849b80d771c/hardie-backer-board-42.jpg"
                },
                "imageUrl": {
                  "type": "image",
                  "value": "//images.ctfassets.net/dzi2asncd44t/3d9u76BPAKHEYcdRI1UQRn/183f8c28f651b8fe7898d849b80d771c/hardie-backer-board-42.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": {
              "data": {},
              "content": [
                {
                  "data": {},
                  "marks": [],
                  "value": "Hardie",
                  "nodeType": "text"
                },
                {
                  "data": {},
                  "marks": [
                    {
                      "type": "superscript"
                    }
                  ],
                  "value": "®",
                  "nodeType": "text"
                },
                {
                  "data": {},
                  "marks": [],
                  "value": " Backer Board provides high-performance, water resistant protection to back up your next bathroom or kitchen renovation.",
                  "nodeType": "text"
                }
              ],
              "nodeType": "paragraph"
            }
          }
        }
      }
    }
  • 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?

Use the easy-to-install cement backer board that offers industry-leading strength and performance.

Water resistance

Helps protect tile installations from moisture penetration and inhibit the damaging effects of water thanks to a cement composition that maintains its strength, integrity, and tile adhesion even when wet.

Superior strength

Unmatched compressive and flexural strength offers up to 3 times the compressive strength of competitors, offering greater protection against cracked mortar or tile.

Excellent tile adhesion

Creates a solid foundation as an underlayment for tile applications. Easy to score and snap for quicker installation and better alignment.

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 dealer near you.

Find Hardie® fiber cement siding and trim, weather barrier products, and backer board near you.

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
© 2024 James Hardie Building Products Inc. All rights reserved. ™ or ® denote trademarks or registered trademarks of James Hardie Technology Ltd.