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.