Get a QuoteUnknown 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": "white", "title": "Hardie® Products", "isHeader": true, "subtitle": "Create the stunning, durable, and stylish home you've been waiting for. Hardie® siding and trim products expertly integrate timeless beauty and enduring quality.", "hasLocation": true, "headerDirection": "row", "component": { "type": "headlineLocation", "parameters": { "theme": { "type": "select", "value": "white" }, "title": { "type": "text", "value": "Hardie® Products" }, "isHeader": { "type": "checkbox", "value": true }, "subtitle": { "type": "text", "value": "Create the stunning, durable, and stylish home you've been waiting for. Hardie® siding and trim products expertly integrate timeless beauty and enduring quality." }, "hasLocation": { "type": "checkbox", "value": true }, "headerDirection": { "type": "select", "value": "row" } } } } - Import the component into the file where
<UniformComposition />is defined, for exampleimport "../components/HeadlineLocation.tsx"
Need more help? Check out the documentation.
Unknown Component
Received request from Uniform to render a component with the public ID: productListing.
<UniformComposition /> does not have productListing 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 ProductListing({ title, subtitle, calloutInfo }) { return ( <div> ProductListing! </div> ) } registerUniformComponent({ type: "productListing", component: ProductListing })Props that your React component will receive
{ "title": "Hardie® Products", "subtitle": "Create the stunning, durable, and stylish home you've been waiting for. Hardie® siding and trim products expertly integrate timeless beauty and enduring quality.", "calloutInfo": { "nodeType": "document", "data": {}, "content": [ { "nodeType": "heading-2", "data": {}, "content": [ { "nodeType": "text", "value": "Swoonworthy color with serious staying power", "marks": [], "data": {} } ] }, { "nodeType": "paragraph", "data": {}, "content": [ { "nodeType": "text", "value": "With ColorPlus® Technology finishes, you don’t have to choose between beauty and performance. You’ll get vibrant, even color that lasts longer than a regular paint job.", "marks": [], "data": {} } ] }, { "nodeType": "embedded-asset-block", "data": { "target": { "metadata": { "tags": [], "concepts": [] }, "sys": { "space": { "sys": { "type": "Link", "linkType": "Space", "id": "dzi2asncd44t" } }, "id": "3vcKH4qWzAx6AzRYB3L9rQ", "type": "Asset", "createdAt": "2024-04-17T17:53:28.557Z", "updatedAt": "2024-04-17T18:17:26.320Z", "environment": { "sys": { "id": "master", "type": "Link", "linkType": "Environment" } }, "publishedVersion": 8, "revision": 2, "locale": "en-US" }, "fields": { "title": "All Products Callout Image", "description": "All Products Callout Image", "file": { "url": "//images.ctfassets.net/dzi2asncd44t/3vcKH4qWzAx6AzRYB3L9rQ/5420bbd76c3ea82eb1050854fd8afaf2/Image-compressed.jpg", "details": { "size": 90052, "image": { "width": 754, "height": 1014 } }, "fileName": "Image-compressed.jpg", "contentType": "image/jpeg" } } } }, "content": [] }, { "nodeType": "paragraph", "data": {}, "content": [ { "nodeType": "text", "value": "", "marks": [], "data": {} } ] } ] }, "component": { "type": "productListing", "parameters": { "title": { "type": "text", "value": "Hardie® Products" }, "subtitle": { "type": "text", "value": "Create the stunning, durable, and stylish home you've been waiting for. Hardie® siding and trim products expertly integrate timeless beauty and enduring quality." }, "calloutInfo": { "type": "json", "value": { "nodeType": "document", "data": {}, "content": [ { "nodeType": "heading-2", "data": {}, "content": [ { "nodeType": "text", "value": "Swoonworthy color with serious staying power", "marks": [], "data": {} } ] }, { "nodeType": "paragraph", "data": {}, "content": [ { "nodeType": "text", "value": "With ColorPlus® Technology finishes, you don’t have to choose between beauty and performance. You’ll get vibrant, even color that lasts longer than a regular paint job.", "marks": [], "data": {} } ] }, { "nodeType": "embedded-asset-block", "data": { "target": { "metadata": { "tags": [], "concepts": [] }, "sys": { "space": { "sys": { "type": "Link", "linkType": "Space", "id": "dzi2asncd44t" } }, "id": "3vcKH4qWzAx6AzRYB3L9rQ", "type": "Asset", "createdAt": "2024-04-17T17:53:28.557Z", "updatedAt": "2024-04-17T18:17:26.320Z", "environment": { "sys": { "id": "master", "type": "Link", "linkType": "Environment" } }, "publishedVersion": 8, "revision": 2, "locale": "en-US" }, "fields": { "title": "All Products Callout Image", "description": "All Products Callout Image", "file": { "url": "//images.ctfassets.net/dzi2asncd44t/3vcKH4qWzAx6AzRYB3L9rQ/5420bbd76c3ea82eb1050854fd8afaf2/Image-compressed.jpg", "details": { "size": 90052, "image": { "width": 754, "height": 1014 } }, "fileName": "Image-compressed.jpg", "contentType": "image/jpeg" } } } }, "content": [] }, { "nodeType": "paragraph", "data": {}, "content": [ { "nodeType": "text", "value": "", "marks": [], "data": {} } ] } ] } } } } } - Import the component into the file where
<UniformComposition />is defined, for exampleimport "../components/ProductListing.tsx"
Need more help? Check out the documentation.
Start your renovation
Ready to take the next step? Find a local pro to help you execute your design vision with Hardie® siding.
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": "James Hardie manufactures the #1 brand of siding in North America", "theme": "dark", "component": { "type": "disclaimerText", "parameters": { "text": { "type": "text", "value": "James Hardie manufactures the #1 brand of siding in North America" }, "theme": { "type": "select", "value": "dark" } } } } - Import the component into the file where
<UniformComposition />is defined, for exampleimport "../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({ theme }) { return ( <div> DisclaimerText! </div> ) } registerUniformComponent({ type: "disclaimerText", component: DisclaimerText })Props that your React component will receive
{ "theme": "dark", "component": { "type": "disclaimerText", "parameters": { "theme": { "type": "select", "value": "dark" } } } } - Import the component into the file where
<UniformComposition />is defined, for exampleimport "../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({ theme }) { return ( <div> DisclaimerText! </div> ) } registerUniformComponent({ type: "disclaimerText", component: DisclaimerText })Props that your React component will receive
{ "theme": "dark", "component": { "type": "disclaimerText", "parameters": { "theme": { "type": "select", "value": "dark" } } } } - Import the component into the file where
<UniformComposition />is defined, for exampleimport "../components/DisclaimerText.tsx"
Need more help? Check out the documentation.
Unable to find Uniform Context. Ensure the devtools plugin is activated.
Get a Quote