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 with HydroDefense® Technology",
  "isHeader": true,
  "subtitle": "The unmatched strength, ease of use, and excellent tile adhesion you’ve come to expect from Hardie® Backer Board—with a 100% waterproof* composition throughout the board thanks to HydroDefense® Technology.",
  "hasLocation": true,
  "headerDirection": "row",
  "component": {
    "type": "headlineLocation",
    "parameters": {
      "theme": {
        "type": "select",
        "value": "secondary"
      },
      "title": {
        "type": "text",
        "value": "Hardie® Backer Board with HydroDefense® Technology"
      },
      "isHeader": {
        "type": "checkbox",
        "value": true
      },
      "subtitle": {
        "type": "text",
        "value": "The unmatched strength, ease of use, and excellent tile adhesion you’ve come to expect from Hardie® Backer Board—with a 100% waterproof* composition throughout the board thanks to HydroDefense® Technology."
      },
      "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": "BR13",
  "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/4PKSk2cbO1NJiqEbXHqGI9/ebbdf98f02dede23979285a7757081b4/pdp-hero-hardie-backer-board-hydrodefense.jpg",
  "itemName": "Explore Hardie® Backer Board with HydroDefense® Technology",
  "ctaSubText": "Availability may be limited by location.",
  "productSlug": "hydro-defense-backer-board",
  "subItemsLabel": "Available products",
  "itemDescription": {
    "data": {},
    "content": [
      {
        "data": {},
        "marks": [],
        "value": "An unmatched combination of strength, performance and protection, our cement backer board is the most preferred brand by tile installers** and is 100% waterproof*.",
        "nodeType": "text"
      }
    ],
    "nodeType": "paragraph"
  },
  "component": {
    "type": "nonSapProduct",
    "slots": {
      "subItems": [
        {
          "type": "nonSapProductItem",
          "parameters": {
            "itemId": {
              "type": "text",
              "value": "TX43"
            },
            "iconUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/6pGC5UcmkMZaM5ypmnkIhc/7c778878a11e3478794373afed28c429/hardie-backer-with-hydrodefense-technology.png"
            },
            "imageUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/6pGC5UcmkMZaM5ypmnkIhc/7c778878a11e3478794373afed28c429/hardie-backer-with-hydrodefense-technology.png"
            },
            "itemName": {
              "type": "text",
              "value": ".42\" inch Waterproof Cement Board"
            },
            "itemDescription": {
              "type": "text",
              "value": "Hardie® Backer Cement Board with HydroDefense® Technology is a long-lasting, waterproof* solution for areas prone to moisture including walls, floors, and countertops."
            }
          }
        }
      ]
    },
    "parameters": {
      "itemId": {
        "type": "text",
        "value": "BR13"
      },
      "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/4PKSk2cbO1NJiqEbXHqGI9/ebbdf98f02dede23979285a7757081b4/pdp-hero-hardie-backer-board-hydrodefense.jpg"
      },
      "itemName": {
        "type": "text",
        "value": "Explore Hardie® Backer Board with HydroDefense® Technology"
      },
      "ctaSubText": {
        "type": "text",
        "value": "Availability may be limited by location."
      },
      "productSlug": {
        "type": "text",
        "value": "hydro-defense-backer-board"
      },
      "subItemsLabel": {
        "type": "text",
        "value": "Available products"
      },
      "itemDescription": {
        "type": "json",
        "value": {
          "data": {},
          "content": [
            {
              "data": {},
              "marks": [],
              "value": "An unmatched combination of strength, performance and protection, our cement backer board is the most preferred brand by tile installers** and is 100% waterproof*.",
              "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 with HydroDefense® Technology?

Count on exceptional performance and rock-solid waterproof* protection for your customers, your work, and your reputation.

100% Waterproof*

Helps protect tile installations from the damaging effects of water thanks to 100% waterproof* composition throughout the cement board.

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.

Mold & mildew resistance

MoldBlock® Technology protects the board from mold and mildew growth.

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 with HydroDefense® Technology Tech Specs and Documents",
  "supporting": "Learn everything you need to know about installing Hardie® Backer Board with HydroDefense® Technology.",
  "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 with HydroDefense® Technology. In English and Spanish."
            }
          }
        },
        {
          "type": "productSpecsFeature",
          "variant": "video",
          "parameters": {
            "title": {
              "type": "text",
              "value": "How to Install Hardie® Backer Board with HydroDefense® Technology"
            },
            "bodyText": {
              "type": "text",
              "value": "Learn how to install Hardie® Backer Board with HydroDefense® Technology waterproof* cement board and the appropriate materials and tools that you’ll need for the job."
            }
          }
        },
        {
          "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 with HydroDefense® Technology Tech Specs and Documents"
      },
      "supporting": {
        "type": "text",
        "value": "Learn everything you need to know about installing Hardie® Backer Board with HydroDefense® Technology."
      }
    }
  }
}
  • 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": "Passes ANSI A118.10 waterproofness. Some application areas, such as shower pans, may require additional waterproofing. Refer to local building code requirements.",
  "theme": "dark",
  "component": {
    "type": "disclaimerText",
    "parameters": {
      "text": {
        "type": "text",
        "value": "Passes ANSI A118.10 waterproofness. Some application areas, such as shower pans, may require additional waterproofing. Refer to local building code requirements."
      },
      "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.

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.