Task list page

<GoabText tag="h1" mt="none">
  Apply for a service
</GoabText>
<GoabCallout
  type="important"
  emphasis="low"
  size="medium"
  heading="Application incomplete"
  mb="2xl"
  mt="xl"
  maxWidth="360px"
>
  You have completed 1 of 3 sections.
</GoabCallout>

<GoabText tag="h2">1. Before you start</GoabText>
<GoabTable width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td>
        <a href="#">Read terms of use</a>
      </td>
      <td className="goa-table-number-column">
        <GoabBadge
          type="success"
          content="Completed"
          ariaLabel="completed"
          icon={false}
        />
      </td>
    </tr>
  </tbody>
</GoabTable>

<GoabText tag="h2">2. Prepare application</GoabText>
<GoabTable width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td>
        <a href="#">Your contact details</a>
      </td>
      <td className="goa-table-number-column">
        <GoabBadge
          type="information"
          content="Not started"
          ariaLabel="not started"
          icon={false}
        />
      </td>
    </tr>
    <tr>
      <td>
        <a href="#">Your family</a>
      </td>
      <td className="goa-table-number-column">
        <GoabBadge
          type="information"
          content="Not started"
          ariaLabel="not started"
          icon={false}
        />
      </td>
    </tr>
    <tr>
      <td>
        <a href="#">Verify your identity</a>
      </td>
      <td className="goa-table-number-column">
        <GoabBadge
          type="information"
          content="Not started"
          ariaLabel="not started"
          icon={false}
        />
      </td>
    </tr>
  </tbody>
</GoabTable>

<GoabText tag="h2" mb="s">
  3. Schedule service
</GoabText>
<GoabText size="body-s" color="secondary" mt="2xs">
  You need to complete the previous section before you can start this task.
</GoabText>
<GoabTable width="100%" mt="l" mb="3xl">
  <tbody>
    <tr>
      <td>Receive email confirmation</td>
      <td className="goa-table-number-column">
        <GoabBadge
          type="default"
          content="Cannot start yet"
          ariaLabel="cannot start yet"
          icon={false}
        />
      </td>
    </tr>
    <tr>
      <td>Pay service fee</td>
      <td className="goa-table-number-column">
        <GoabBadge
          type="default"
          content="Cannot start yet"
          ariaLabel="cannot start yet"
          icon={false}
        />
      </td>
    </tr>
  </tbody>
</GoabTable>

<goab-text tag="h1" mt="none">Apply for a service</goab-text>
<goab-callout
  type="important"
  emphasis="low"
  size="medium"
  heading="Application incomplete"
  mb="2xl"
  mt="xl"
  maxWidth="360px"
>
  You have completed 1 of 3 sections.
</goab-callout>

<goab-text tag="h2">1. Before you start</goab-text>
<goab-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Read terms of use</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="success"
          content="Completed"
          ariaLabel="completed"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-table>

<goab-text tag="h2">2. Prepare application</goab-text>
<goab-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Your contact details</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="information"
          content="Not started"
          ariaLabel="not started"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Your family</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="information"
          content="Not started"
          ariaLabel="not started"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Verify your identity</a></td>
      <td class="goa-table-number-column">
        <goab-badge
          type="information"
          content="Not started"
          ariaLabel="not started"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-table>

<goab-text tag="h2" mb="s">3. Schedule service</goab-text>
<goab-text size="body-s" color="secondary" mt="2xs"
  >You need to complete the previous section before you can start this task.</goab-text
>
<goab-table width="100%" mt="l" mb="3xl">
  <tbody>
    <tr>
      <td>Receive email confirmation</td>
      <td class="goa-table-number-column">
        <goab-badge
          type="default"
          content="Cannot start yet"
          ariaLabel="cannot start yet"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
    <tr>
      <td>Pay service fee</td>
      <td class="goa-table-number-column">
        <goab-badge
          type="default"
          content="Cannot start yet"
          ariaLabel="cannot start yet"
          [icon]="false"
        ></goab-badge>
      </td>
    </tr>
  </tbody>
</goab-table>

<goa-text as="h1" mt="none">Apply for a service</goa-text>
<goa-callout
  version="2"
  type="important"
  emphasis="low"
  size="medium"
  heading="Application incomplete"
  mb="2xl"
  mt="xl"
  maxwidth="360px"
>
  You have completed 1 of 3 sections.
</goa-callout>

<goa-text as="h2">1. Before you start</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
  <table style="width: 100%">
    <tbody>
      <tr>
        <td><a href="#">Read terms of use</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="success"
            content="Completed"
            aria-label="completed"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
    </tbody>
  </table>
</goa-table>

<goa-text as="h2">2. Prepare application</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
  <table style="width: 100%">
    <tbody>
      <tr>
        <td><a href="#">Your contact details</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="information"
            content="Not started"
            aria-label="not started"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
      <tr>
        <td><a href="#">Your family</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="information"
            content="Not started"
            aria-label="not started"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
      <tr>
        <td><a href="#">Verify your identity</a></td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="information"
            content="Not started"
            aria-label="not started"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
    </tbody>
  </table>
</goa-table>

<goa-text as="h2" mb="s">3. Schedule service</goa-text>
<goa-text size="body-s" color="secondary" mt="2xs"
  >You need to complete the previous section before you can start this task.</goa-text
>
<goa-table version="2" width="100%" mt="l" mb="3xl">
  <table style="width: 100%">
    <tbody>
      <tr>
        <td>Receive email confirmation</td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="default"
            content="Cannot start yet"
            aria-label="cannot start yet"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
      <tr>
        <td>Pay service fee</td>
        <td class="goa-table-number-column">
          <goa-badge
            version="2"
            type="default"
            content="Cannot start yet"
            aria-label="cannot start yet"
            icon="false"
          ></goa-badge>
        </td>
      </tr>
    </tbody>
  </table>
</goa-table>

A task list page provides a structure for multi-step services, showing users their progress through a series of tasks with clear status indicators.

When to use

Use this pattern when:

A service has multiple distinct tasks or sections to complete
Users need to see their overall progress
Tasks can potentially be completed in different orders
Users may return to complete tasks over multiple sessions

Considerations

Group related actions into logical tasks
Show status badges for each task (Completed, In progress, Not started, Cannot start yet)
Include a summary callout showing how many sections are complete
Allow users to complete tasks in any order when possible
Clearly indicate when tasks have dependencies

View old example docs