Opportunity Standard

Household

@nycopportunity/standard/src/components/household

Demonstration

So far you've told us about:

You, Head of Household, 30
Spouse, 30
Sister/Brother, 28
Sister/Brother, 31
Parent, 63
Parent, 67
Step-child, 6
Step-child, 10

<div>
  <p>
    <b>So far you've told us about:</b>
  </p>
  <ul class="c-household">
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>You,</b>
        <span>Head of Household, 30</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>Spouse,</b>
        <span>30</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>Sister/Brother,</b>
        <span>28</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>Sister/Brother,</b>
        <span>31</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>Parent,</b>
        <span>63</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>Parent,</b>
        <span>67</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>Step-child,</b>
        <span>6</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
    <li class="c-household__member">
      <svg class="c-household__member-icon icon-ui" role="img">
        <title>Household member</title>
        <use href="#nyco-person"></use>
      </svg>
      <span class="c-household__description">
        <b>Step-child,</b>
        <span>10</span>
      </span>
      <button title="Edit this household member">
        <span>Edit</span>
      </button>
    </li>
  </ul>
</div>

The Household Component displays a list of members within a household. It is used while filling out long forms of information for benefit eligibility. It helps the applicant to see who in their household they have added information about and provides actionable links for them to return to and edit specific member information.

Demonstration

Code