Member List

The Member List Component is an illustration of a household using colored dots to represent individual members.

  • You Head of Household 30
  • Spouse 30
  • Sister/Brother 28
  • Sister/Brother 31
  • Parent 63
  • Parent 67
  • Step-child 6
  • Step-child 10 
<ul class="c-member-list screen-tablet:layout-columns">
  <li>
    <span class="c-member-list__item">You</span>
    <span class="c-member-list__item">Head of Household</span>
    <span class="c-member-list__item">30</span>
  </li>
  <li>
    <span class="c-member-list__item">Spouse</span>
    <span class="c-member-list__item">30</span>
  </li>
  <li>
    <span class="c-member-list__item">Sister/Brother</span>
    <span class="c-member-list__item">28</span>
  </li>
  <li>
    <span class="c-member-list__item">Sister/Brother</span>
    <span class="c-member-list__item">31</span>
  </li>
  <li>
    <span class="c-member-list__item">Parent</span>
    <span class="c-member-list__item">63</span>
  </li>
  <li>
    <span class="c-member-list__item">Parent</span>
    <span class="c-member-list__item">67</span>
  </li>
  <li>
    <span class="c-member-list__item">Step-child</span>
    <span class="c-member-list__item">6</span>
  </li>
  <li>
    <span class="c-member-list__item">Step-child</span>
    <span class="c-member-list__item">10</span>
  </li>
</ul>