Skip to main content

Patterns

Checklist

The Checklist Component is an annotated list of application requirements for a specific program.

Submitting the wrong documents is a major point of failure for many people who try to access benefits. The goal of this pattern is to help users determine which documents they should include with their application.

  • Checklist item Application
  • Checklist item Badge
  • Checklist item Flag
  • Checklist item Calendar
  • Checklist item Generic
  • Checklist item Eligibility Check (default)
    • Nested checklist item
    • Nested checklist item
    • Nested checklist item
<div class="c-checklist">
  <ul>
    <li class="c-checklist__item-application">Checklist item Application</li>
    <li class="c-checklist__item-badge">Checklist item Badge</li>
    <li class="c-checklist__item-flag">Checklist item Flag</li>
    <li class="c-checklist__item-calendar">Checklist item Calendar</li>
    <li class="c-checklist__item-generic">Checklist item Generic</li>
    <li>Checklist item Eligibility Check (default)<ul>
        <li>Nested checklist item</li>
        <li>Nested checklist item</li>
        <li>Nested checklist item</li>
      </ul>
    </li>
  </ul>
</div>