Skip to main content

Household details

Household details let me verify I’ve provided accurate information about my family or the people I live with.

The Household details component displays a summary of user’s household composition data they have provided in an online form. It allows them to review the information they’ve provided and the opportunity to correct any information they may have entered incorrectly. It can be used to summarize household members and their relationship to the applicant. It can also display special information about each household member such as income, expenses, or benefits they may have.

Details

The Household details is a custom component created using USWDS CSS Utilities.

Examples

Household details

Review your household

Add a person

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="border-2px border-base-light padding-3 radius-md">
  <div>
    <h3 class="font-body-xs margin-bottom-1 text-center" id="aria-db-054ff4bb6c5ae">Review your household</h3>
  </div>
  <ul role="list" aria-describedby="aria-db-054ff4bb6c5ae" class="add-list-reset">
    <li class="margin-0 padding-y-2 border-bottom-1px border-base-lighter">
      <div class="margin-bottom-1">
        <svg class="usa-icon margin-bottom-neg-2px" aria-hidden="true" focusable="false">
          <use href="https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person"></use>
        </svg>
        <b>You, Firstname Middlename Lastname</b>
      </div>
      <div class="margin-top-1">
        <a class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto" href="#">edit person</a>
        <span class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
        <a class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto" href="#">delete <span class="usa-sr-only">person</span>
        </a>
      </div>
    </li>
    <li class="margin-0 padding-y-2 border-bottom-1px border-base-lighter">
      <div class="margin-bottom-1">
        <svg class="usa-icon margin-bottom-neg-2px" aria-hidden="true" focusable="false">
          <use href="https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person"></use>
        </svg>
        <b>Secondname Middlename Lastname</b>
      </div>
      <div class="margin-top-1">
        <a class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto" href="#">edit person</a>
        <span class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
        <a class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto" href="#">delete <span class="usa-sr-only">person</span>
        </a>
      </div>
    </li>
  </ul>
  <div class="text-center padding-top-2">
    <a class="usa-button cfa-button usa-button--outline" href="#">
      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
        <use href="https://codeforamerica.github.io/uswds/assets/img/sprite.svg#add"></use>
      </svg>
      <span>Add a person</span>
    </a>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "header": {
    "heading": {
      "text": "Review your household",
      "id": "aria-db-054ff4bb6c5ae"
    }
  },
  "list": {
    "modifier": "add-list-reset",
    "item": {
      "modifier": "border-bottom-1px border-base-lighter"
    }
  },
  "household": [
    {
      "icon": "https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person",
      "label": "You, Firstname Middlename Lastname",
      "utility": {
        "edit": {
          "label": "edit person",
          "href": "#"
        },
        "delete": {
          "label": "delete <span class=\"usa-sr-only\">person</span>",
          "href": "#"
        }
      }
    },
   {
      "icon": "https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person",
      "label": "Secondname Middlename Lastname",
      "utility": {
        "edit": {
          "label": "edit person",
          "href": "#"
        },
        "delete": {
          "label": "delete <span class=\"usa-sr-only\">person</span>",
          "href": "#"
        }
      }
    }
  ],
  "add": [
    {
      "prefix": "https://codeforamerica.github.io/uswds/assets/img/sprite.svg#add",
      "label": "Add a person",
      "modifier": "cfa-button usa-button--outline",
      "href": "#"
    }
  ]
}
Household details wi, dictionary: dictionary %}annual income details

Your household income

Add an income

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="border-2px border-base-light padding-3 radius-md">
  <div>
    <h3 class="font-body-xs margin-bottom-1 text-center" id="aria-db-be2e86f54a68b">Your household income</h3>
  </div>
  <ul role="list" aria-describedby="aria-db-be2e86f54a68b" class="add-list-reset">
    <li class="margin-0 padding-y-2 border-bottom-1px border-base-lighter">
      <div class="margin-bottom-1">
        <svg class="usa-icon margin-bottom-neg-2px" aria-hidden="true" focusable="false">
          <use href="https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person"></use>
        </svg>
        <b>You, Firstname Middlename Lastname</b>
      </div>
      <div>
        <div class="text-end">
          <div>
            <i>Employer name</i>
            <br> $29,500.00
            <br> (Annual)
          </div>
          <div>
            <a class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto" href="#">edit income</a>
            <span class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
            <a class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto" href="#">delete <span class="usa-sr-only">income</span>
            </a>
          </div>
        </div>
      </div>
    </li>
    <li class="margin-0 padding-y-2 border-bottom-1px border-base-lighter">
      <div class="margin-bottom-1">
        <svg class="usa-icon margin-bottom-neg-2px" aria-hidden="true" focusable="false">
          <use href="https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person"></use>
        </svg>
        <b>Secondname Middlename Lastname</b>
      </div>
      <div>
        <div class="text-end">
          <div>
            <i>Employer name</i>
            <br> $28,300.00
            <br> (Annual)
          </div>
          <div>
            <a class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto" href="#">edit income</a>
            <span class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
            <a class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto" href="#">delete <span class="usa-sr-only">income</span>
            </a>
          </div>
        </div>
      </div>
    </li>
    <li class="border-top-1px border-base-light margin-top-neg-1px padding-top-2 mobile-lg:display-flex flex-justify">
      <div class="text-end">
        <b>Total</b>
      </div>
      <div class="text-end">$57,800.00</div>
    </li>
  </ul>
  <div class="text-center padding-top-2">
    <a class="usa-button cfa-button usa-button--outline" href="#">
      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
        <use href="https://codeforamerica.github.io/uswds/assets/img/sprite.svg#add"></use>
      </svg>
      <span>Add an income</span>
    </a>
  </div>
</div>

The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "header": {
    "heading": {
      "text": "Your household income",
      "id": "aria-db-be2e86f54a68b"
    }
  },
  "list": {
    "modifier": "add-list-reset",
    "item": {
      "modifier": "border-bottom-1px border-base-lighter"
    }
  },
  "household": [
    {
      "icon": "https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person",
      "label": "You, Firstname Middlename Lastname",
      "details": [
        {
          "modifier": "text-end",
          "content": "<i>Employer name</i> <br> $29,500.00 <br> (Annual)",
          "utility": {
            "edit": {
              "label": "edit income",
              "href": "#"
            },
            "delete": {
              "label": "delete <span class=\"usa-sr-only\">income</span>",
              "href": "#"
            }
          }
        }
      ]
    },
   {
      "icon": "https://codeforamerica.github.io/uswds/assets/img/sprite.svg#person",
      "label": "Secondname Middlename Lastname",
      "details": [
        {
          "modifier": "text-end",
          "content": "<i>Employer name</i> <br> $28,300.00 <br> (Annual)",
          "utility": {
            "edit": {
              "label": "edit income",
              "href": "#"
            },
            "delete": {
              "label": "delete <span class=\"usa-sr-only\">income</span>",
              "href": "#"
            }
          }
        }
      ]
    }
  ],
  "summary": [
    {
      "label": {
        "modifier": "text-end",
        "text": "Total"
      },
      "value": {
        "modifier": "text-end",
        "text": "$57,800.00"
      }
    }
  ],
  "add": [
    {
      "prefix": "https://codeforamerica.github.io/uswds/assets/img/sprite.svg#add",
      "label": "Add an income",
      "modifier": "cfa-button usa-button--outline",
      "href": "#"
    }
  ]
}

Accessibility

  • Unchecked
    Customization to the visual appearance of the Household details has been verified for WCAG 2.1 AA contrast minimum success.
  • Unchecked
    The Household details examples pass manual audits (WCAG 2.1 AA using axe or Lighthouse).
  • Unchecked
    The Household details achieves WCAG 2.1 AA resizing success.
    Resizing text up to 200% without loss of content or functionality.
  • Unchecked
    The Household details passes keyboard interaction tests.
    No keyboard test has been created.
  • Unchecked
    The Household details passes screen reader interaction tests.

  • Unchecked
    Guidance on ensuring Household details accessibility has been provided in this documentation.

Additional items

  1. The role="list" attribute is added to the unordered list element to preserve the list role when the add-list-reset class is used to remove list styling.

Checklist Key

  • Passes
    Passes
  • Unchecked
    Unchecked

Design library component

Source and usage

Package: @codeforamerica/uswds/packages/cfa-household-details

  • Thymeleaf template fragment: ./cfa-household-details.th.html
  • Embedded Ruby (ERB) partial template: ./_cfa-household-details.html.erb
Packages are collections of functionality that make up a component. Typically, they include stylesheets, templates, and scripts. Learn more about packages on the USWDS documentation site.
Thymeleaf template fragment

This is the pre-rendered template fragment from the package. It is the same template used to render the demonstrations above. You may copy and paste from this example or use the template using the th:block th:replace tag. See the example below.

<div th:fragment="householdDetails(modifier, header, list, household, summary, add)" class="border-2px border-base-light padding-3 radius-md" th:classappend="${modifier}">
  <div th:if="${header.heading.text}">
    <h3 class="font-body-xs margin-bottom-1 text-center" th:classappend="${header.heading.modifier}" th:attr="id=${header.heading.id}" th:text="${header.heading.text}">Heading</h3>
  </div>
  <div th:if="${header.heading.content}" th:utext="${header.heading.content}">
    <h3>Heading</h3>
  </div>
  <ul role="list" th:class="${list.modifier}" th:attr="aria-describedby=${header.heading.id}">
    <li th:each="person: ${household}" class="margin-0 padding-y-2" th:classappend="${list.item.modifier}">
      <div class="margin-bottom-1">
        <svg th:if="${person.icon}" class="usa-icon margin-bottom-neg-2px" aria-hidden="true" focusable="false">
          <use th:href="${person.icon}"></use>
        </svg>
        <b th:text="${person.label}">Person</b>
      </div>
      <div th:if="${person.details}">
        <div th:each="detail: ${person.details}" th:class="${detail.modifier}">
          <div th:utext="${detail.content}">Content</div>
          <div th:if="${detail.utility}">
            <a th:if="${detail.utility.edit}" th:href="${detail.utility.edit.href}" class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto" th:utext="${detail.utility.edit.label}">edit</a>
            <span th:if="${detail.utility.delete}" class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
            <a th:if="${detail.utility.delete}" th:href="${detail.utility.delete.href}" class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto" th:utext="${detail.utility.delete.label}">delete</a>
          </div>
        </div>
      </div>
      <div th:if="${person.utility}" class="margin-top-1" th:classappend="${person.utility.modifier}">
        <a th:if="${person.utility.edit}" th:href="${person.utility.edit.href}" class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto" th:utext="${person.utility.edit.label}">edit</a>
        <span th:if="${person.utility.delete}" class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
        <a th:if="${person.utility.delete}" th:href="${person.utility.delete.href}" class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto" th:utext="${person.utility.delete.label}">delete</a>
      </div>
    </li>
    <li th:if="${summary}" th:each="sum: ${summary}" class="border-top-1px border-base-light margin-top-neg-1px padding-top-2 mobile-lg:display-flex flex-justify">
      <div th:if="${sum.label}" th:class="${sum.label.modifier}"><b th:text="${sum.label.text}">Label</b></div>
      <div th:if="${sum.value}" th:class="${sum.value.modifier}" th:text="${sum.value.text}">Value</div>
    </li>
  </ul>
  <div th:if="${add}" class="text-center padding-top-2">
    <th:block th:replace="~{packages/cfa-button/cfa-button.th :: button(${add})}" />
  </div>
</div>
Template fragment inclusion

Below is an example of how to use the fragment from the package directory using the th:block th:replace inclusion tag. Replace the fragment parameters using your variables or context.

<th:block th:replace="~{packages/cfa-household-details/cfa-household-details.th :: householdDetails(${modifier}, ${header}, ${list}, ${household}, ${summary}, ${add})}" />
ERB template partial

This is the pre-rendered partial template from the package. You may copy and paste from this example or use the template directly from the path.

<div class="border-2px border-base-light padding-3 radius-md<% if defined?(modifier) %> <%= modifier %><% end %>">
  <% if header.has_key?('heading') && header['heading']['text'] %><div>
    <h3 class="font-body-xs margin-bottom-1 text-center<% if header['heading']['modifier'] %> <%= header['heading']['modifier'] %><% end %>"<% if header['heading']['id'] %> id="<%= header['heading']['id'] %>"<% end %>><%= header['heading']['text'] %></h3>
  </div><% end %>
  <% if header.has_key?('heading') && header['heading']['content'] %><div>
    <%= header['heading']['content'] %>
  </div><% end %>
  <ul role="list"
    <% if defined?(list) && list.has_key?('modifier') %>class="<%= list['modifier'] %>"<% end %>
    <% if header.has_key?('heading') && header['heading']['id'] %>aria-describedby="<%= header['heading']['id'] %>"<% end %>>
    <% household.each do |person| %><li class="margin-0 padding-y-2<% if defined?(list) && list.has_key?('item') && list['item']['modifier'] %> <%= list['item']['modifier'] %><% end %>">
      <div class="margin-bottom-1">
        <% if person['icon'] %><svg class="usa-icon margin-bottom-neg-2px" aria-hidden="true" focusable="false">
          <use href="<%= person['icon'] %>"></use>
        </svg><% end %>
        <b><%= person['label'] %></b>
      </div>
      <% if person['details'] %><div>
        <% person['details'].each do |detail| %><div
          <% if detail['modifier'] %> class="<%= detail['modifier'] %>"<% end %>>
          <div><%= detail['content'] %></div>
          <% if detail['utility'] %><div>
            <% if detail['utility']['edit'] %><a href="<%= detail['utility']['edit']['href'] %>" class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto"><%= detail['utility']['edit']['label'] %></a><% end %>
            <% if detail['utility']['delete'] %><span class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
            <a th:href="<%= detail['utility']['delete']['href'] %>" class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto"><%= detail['utility']['delete']['label'] %></a><% end %>
          </div><% end %>
        </div><% end %>
      </div><% end %>
      <% if person['utility'] %><div class="margin-top-1" th:classappend="${person.utility.modifier}">
        <% if person['utility']['edit'] %><a href="<%= person['utility']['edit']['href'] %>" class="usa-button cfa-button cfa-button--primary usa-button--unstyled font-body-2xs width-auto"><%= person['utility']['edit']['label'] %></a><% end %>
        <% if person['utility']['delete'] %><span class="text-base-lighter padding-inline-x-1 display-none mobile:display-inline-block" aria-hidden="true">|</span>
        <a th:href="<%= person['utility']['delete']['href'] %>" class="usa-button cfa-button cfa-button--danger usa-button--unstyled font-body-2xs width-auto"><%= person['utility']['delete']['label'] %></a><% end %>
      </div><% end %>
    </li><% end %>
    <% if defined?(summary) %><% summary.each do |sum| %><li class="border-top-1px border-base-light margin-top-neg-1px padding-top-2 mobile-lg:display-flex flex-justify">
      <% if sum['label'] %><div
        <% if sum['label']['modifier'] %> class="<%= sum['label']['modifier'] %>"<% end %>><b><%= sum['label']['text'] %></b></div><% end %>
      <% if sum['value'] %><div
        <% if sum['value']['modifier'] %> class="<%= sum['value']['modifier'] %>"<% end %>><%= sum['value']['text'] %></div><% end %>
    </li><% end %><% end %>
  </ul>
  <% if defined?(add) %><div class="text-center padding-top-2">
    <%= ERB.new(File.read('packages/cfa-button/_cfa-button.html.erb'), 0, 0, '@add').result_with_hash({items: add}) %>
  </div><% end %>
</div>
Partial render

Below is an example of how to include the partial in a view from the package directory using the Ruby ERB class. Replace the argument values using your variables or context. In a Rails environment, the render method can be used instead with the same hash values.

<%= ERB.new(File.read('packages/cfa-household-details/_cfa-household-details.html.erb'), 0, 0, '@householdDetails').result_with_hash({modifier: modifier, header: header, summary: summary, add: add, household: household}) %>

uswds.codeforamerica.org

Learn more about Code for America by visiting codeforamerica.org