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™ Weather Barrier Products",
  "isHeader": true,
  "subtitle": "No exterior cladding can prevent 100% of water intrusion. Give your home an additional line of defense with our suite of Hardie™ Weather Barrier products.",
  "hasLocation": true,
  "headerDirection": "row",
  "component": {
    "type": "headlineLocation",
    "parameters": {
      "theme": {
        "type": "select",
        "value": "secondary"
      },
      "title": {
        "type": "text",
        "value": "Hardie™ Weather Barrier Products"
      },
      "isHeader": {
        "type": "checkbox",
        "value": true
      },
      "subtitle": {
        "type": "text",
        "value": "No exterior cladding can prevent 100% of water intrusion. Give your home an additional line of defense with our suite of Hardie™ Weather Barrier products."
      },
      "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": "BR3",
  "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/5d0eEXlnevwnD5Zt6eANii/99d78736e0c68212ffc9ace2491e0ad3/hardie-weather-barrier.jpg",
  "itemName": "Explore Hardie™ Weather Barrier",
  "ctaSubText": "Availability may be limited by location.",
  "productSlug": "weather-barrier-products",
  "subItemsLabel": "Available products",
  "itemDescription": {
    "data": {},
    "content": [
      {
        "data": {},
        "marks": [],
        "value": "Help prevent moisture accumulation that may lead to mold and mildew growth.",
        "nodeType": "text"
      }
    ],
    "nodeType": "paragraph"
  },
  "component": {
    "type": "nonSapProduct",
    "slots": {
      "subItems": [
        {
          "type": "nonSapProductItem",
          "parameters": {
            "itemId": {
              "type": "text",
              "value": "TX27"
            },
            "iconUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/2A2mVIj7Boa1uQMOtAg840/c419ec883a9743b52ff72c7cff1cf160/hardie-weather-barrier.png"
            },
            "imageUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/2A2mVIj7Boa1uQMOtAg840/c419ec883a9743b52ff72c7cff1cf160/hardie-weather-barrier.png"
            },
            "itemName": {
              "type": "text",
              "value": "Housewrap"
            },
            "itemDescription": {
              "type": "text",
              "value": "Provides a balance of water resistance and breathability, helping to reduce water intrusion while allowing water vapor from inside your home to escape."
            }
          }
        },
        {
          "type": "nonSapProductItem",
          "parameters": {
            "itemId": {
              "type": "text",
              "value": "TX31"
            },
            "iconUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/7ushS6UEEiundjKfBpsJFU/557927c0bfe4dca63b78eb5434b2f4e1/hardie-weather-barrier-pro-flashing.png"
            },
            "imageUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/7ushS6UEEiundjKfBpsJFU/557927c0bfe4dca63b78eb5434b2f4e1/hardie-weather-barrier-pro-flashing.png"
            },
            "itemName": {
              "type": "text",
              "value": "Pro-Flashing"
            },
            "itemDescription": {
              "type": "text",
              "value": "Designed to peel and stick around windows and doors to help prevent water and air intrusion. It also self-seals around fasteners."
            }
          }
        },
        {
          "type": "nonSapProductItem",
          "parameters": {
            "itemId": {
              "type": "text",
              "value": "TX26"
            },
            "iconUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/2Dw2J7e4uqbI6OTRqvrS8e/0a78153d0f5ff01e7c8507eccb7d6e3d/hardie-weather-barrier-flex-flashing.png"
            },
            "imageUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/2Dw2J7e4uqbI6OTRqvrS8e/0a78153d0f5ff01e7c8507eccb7d6e3d/hardie-weather-barrier-flex-flashing.png"
            },
            "itemName": {
              "type": "text",
              "value": "Flex Flashing"
            },
            "itemDescription": {
              "type": "text",
              "value": "Designed to stretch and seal around complex shapes—even windows and doorsills—to help prevent water and air intrusion."
            }
          }
        },
        {
          "type": "nonSapProductItem",
          "parameters": {
            "itemId": {
              "type": "text",
              "value": "TX34"
            },
            "iconUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/5XQ5ixJIQHmJcmyxTvTZu8/d086e9539dee3828e5a546655579894a/hardie-weather-barrier-seam-tape.png"
            },
            "imageUrl": {
              "type": "image",
              "value": "//images.ctfassets.net/dzi2asncd44t/5XQ5ixJIQHmJcmyxTvTZu8/d086e9539dee3828e5a546655579894a/hardie-weather-barrier-seam-tape.png"
            },
            "itemName": {
              "type": "text",
              "value": "Seam Tape"
            },
            "itemDescription": {
              "type": "text",
              "value": "Seal every seam against water and air intrusion."
            }
          }
        }
      ]
    },
    "parameters": {
      "itemId": {
        "type": "text",
        "value": "BR3"
      },
      "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/5d0eEXlnevwnD5Zt6eANii/99d78736e0c68212ffc9ace2491e0ad3/hardie-weather-barrier.jpg"
      },
      "itemName": {
        "type": "text",
        "value": "Explore Hardie™ Weather Barrier"
      },
      "ctaSubText": {
        "type": "text",
        "value": "Availability may be limited by location."
      },
      "productSlug": {
        "type": "text",
        "value": "weather-barrier-products"
      },
      "subItemsLabel": {
        "type": "text",
        "value": "Available products"
      },
      "itemDescription": {
        "type": "json",
        "value": {
          "data": {},
          "content": [
            {
              "data": {},
              "marks": [],
              "value": "Help prevent moisture accumulation that may lead to mold and mildew growth.",
              "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™ Weather Barrier?

Hardie™ Weather Barrier products provide a superior balance of water resistance and breathability, keeping the area within the wall drier, while offering a range of installation advantages.

Superior durability

Thicker, more durable material for easier, quicker installation offers superior tear resistance to help prevent water infiltration.

Easy Installation

Can be installed with staples in place of cap nails for cost savings.

Design Flexibility

Provides a higher level of performance, no matter what type of cladding you specify.

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": "Tech Specs and Documents",
  "supporting": "Learn everything you need to know about installing and caring for Hardie™ Weather Barrier.",
  "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™ Weather Barrier housewrap. In English and Spanish."
            }
          }
        },
        {
          "type": "productSpecsFeature",
          "variant": "video",
          "parameters": {
            "title": {
              "type": "text",
              "value": "How to Install Hardie™ Weather Barrier Housewrap"
            },
            "bodyText": {
              "type": "text",
              "value": "Learn the basics of installing Hardie™ Weather Barrier housewrap, including 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": "Tech Specs and Documents"
      },
      "supporting": {
        "type": "text",
        "value": "Learn everything you need to know about installing and caring for Hardie™ Weather Barrier."
      }
    }
  }
}
  • 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.

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.