Preview your design ideas on a model of your actual home
See how different siding choices can completely change your home's look
Instantly swap out different colors to find your favorite color palette
Share your design with a contractor who can bring it to life
Play with possibility
Turn the spark of imagination into the heartbeat of your home. Initiate your journey into real-time inspiration with the Hover® Design Studio app, brought to you by James Hardie. With tons of color and siding options to choose from, realizing your dream design is simple.
Unknown Component
Received request from Uniform to render a component with the public ID: hoverSlider
.
<UniformComposition />
does not have hoverSlider
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 HoverSlider({ body, headline }) { return ( <div> HoverSlider! <UniformSlot name="content" /> </div> ) } registerUniformComponent({ type: "hoverSlider", component: HoverSlider })
Props that your React component will receive
{ "body": "Ready to begin your journey with Hover® Design Studio and unlock the possibilities for your dream home? Here’s how you can get started on the path to envisioning and creating your ideal space.", "headline": "From ordinary to extraordinary", "component": { "type": "hoverSlider", "slots": { "content": [ { "type": "media", "parameters": { "src": { "type": "text", "value": "//images.ctfassets.net/dzi2asncd44t/2iaIpE5moYEd9eaFIPvznJ/c21567e454fec79cb0dd7f48df6c270d/ranch-hardie-panel-hardie-trim-batten-arctic-white-after.jpg" }, "altText": { "type": "text", "value": "ranch hardie panel hardie trim batten arctic white after" } } }, { "type": "media", "parameters": { "src": { "type": "text", "value": "//images.ctfassets.net/dzi2asncd44t/20lol7NVHar6GhlnScNFdG/874debe87fdfe53f8848165cd826ad5a/ranch-before-hardie-siding-project-beige-siding.jpg" }, "altText": { "type": "text", "value": "ranch before hardie siding project beige siding" } } } ] }, "parameters": { "body": { "type": "text", "value": "Ready to begin your journey with Hover® Design Studio and unlock the possibilities for your dream home? Here’s how you can get started on the path to envisioning and creating your ideal space." }, "headline": { "type": "text", "value": "From ordinary to extraordinary" } } } }
- Import the component into the file where
<UniformComposition />
is defined, for exampleimport "../components/HoverSlider.tsx"
Need more help? Check out the documentation.
Complete and submit the form; then look for a text or email with a unique download link.
Use the unique link that was sent to your email or text inbox and get started unlocking your home’s potential.
Using the app, capture images of your home and watch the virtual model of your home come to life.
Play with textures and palettes to see how Hardie® products can transform your home’s exterior.
Build your vision, start your project
Redefine the boundaries of what’s possible
Embark on a transformative journey where your unique vision shines and your dreams become reality. It’s all at your fingertips with Hover® Design Studio, brought to you by James Hardie.
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": "Hover is a registered trademark of Hover Inc. Hardie® siding complies with ASTM E136 as a noncombustible cladding and with ASTM E84 for surface burning characteristics of building materials.", "theme": "dark", "component": { "type": "disclaimerText", "_pattern": "86bfbe85-3e37-4029-ac5e-97b14948d5a6", "parameters": { "text": { "type": "text", "value": "Hover is a registered trademark of Hover Inc. Hardie® siding complies with ASTM E136 as a noncombustible cladding and with ASTM E84 for surface burning characteristics of building materials." }, "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.