This guided content tool is focused on helping low-income users who are struggling to make rent payments. The Steps team decided to build a guide around this topic after observing the results of a survey placed on NerdWallet.com in which people identified housing as the bill they struggle with most.
Through a quick selection of statement cards, the guide leads people to personalized, tangible action items—including some which provide access to appropriate local and national resources. Our team developed the content and design of the guide internally while collaborating with Phuong Luong at Compass Working Capital to define the experience and logic. We are now providing this guide as an open source framework which can be adapted by any organization to assist their clients. The guide can be viewed at https://steps.ideo.org/housing-guide.
- Go to the /dist folder. You should see three files with the extension .html, .js, .css.
- If you'd like this housing guide on a separate page by itself, simply copy the three files into the same folder. Then open the index.html page with your favorite browser.
- If you'd like this housing guide embedded inside of your own website template, include the following snippet of code into the section of the html file where you wish to display the guide:
<div id="steps-guided-content-tool"></div> - Then right before the end
</body>tag (after all other code), insert this<script type="text/javascript" src="main.c02ab41617811adab211.js"></script> - Right before the end
</head>tag (after all other stylesheets), insert this<link href="main.a9bcb82c74a102506c4c96f8af330c2c.css" rel="stylesheet">
git clone https://github.com/IDEOorg/steps-guide-housingcd steps-guide-housingnpm install- Running the code on your server:
- To run the development build:
npm run startthen go to http://localhost:3000 - To run the production build
npm run buildthen go to http://localhost:4000. The production files will be in the /dist folder.
We welcome all contributions to this code base, as well as bug reports. To suggest a contribution please open a pull request against this repository. It is likely a good idea to get in touch before doing any work so we can coordinate.
Please submit any bug reports via GitHub issues. Click on the Issues tab at the top of this page.
This project is licensed under the MIT license. The license can be read here.
Much of the project directory structure and build scripts are adapted from react-slingshot. Its license can be read here