Skip to main content

Patterns

Member List

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

  • YouHead of Household30
  • Spouse30
  • Sister/Brother28
  • Sister/Brother31
  • Parent63
  • Parent67
  • Step-child6
  • Step-child10
<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>